Table of Contents |
---|
Chatbot Endpoint setup
Create a flow using as shown below in Experience Designer.
...
http in Nodes
appSettings for Mobile/web (optional)
Enter the following values in the fields:
Method. GET
URL. /appsettings
Name. App Settings for Mobile
...
Mobile Chatbot URL
Enter the following values in the fields:
Method. POST
URL. Enter the web chatbot URI. Default value is /bot/mobile
Name. Mobile Chatbot URL
...
Web Chatbot URL
Enter the following values in the fields:
Method. POST
URL. Enter the web chatbot URI. Default value is /bot/web
Name. Web Chatbot URL
...
Bot Listener
Enter the following values in the fields:
Method. GET
URL. Enter the web chatbot URI. Default value is /bot/web
Name. Bot Listener
...
Bot Provider V2
Bot provider V2 node is named Web Chat Bot in the example flow.
Please refer to Bot Provider V2 node for more information on this node.
...
Bot View Template
You can customize the Chatbot view using the Bot view template node, named Web Chatbot Template, in the flow. To use the default web chatbot view, leave the Custom CSS and Custom JS fields blank. For more information on the node, see Bot view template node
The URLs in both http in nodes (in Web Chatbot URL node and Bot Listener node) and the bot view template node should be the same.
...
App Settings
The function node is named App Settings. Place the following code in the function node.
...
onlineMessage.The message that is displayed when you are back online.
...
Documents related to App Settings:
How do I use the Banner directive?
...
How do I add a wait indicator to my chat bot?
http out Node
The http out node is named Chatbot Output.
...
Info |
---|
The default endpoint URI is /bot/web. You can have more than one endpoint per instance provided the endpoint URIs are different. |
Deployment to Google
To deploy the flow to google dialog flow and get the web chatbot running, follow these steps.
Login to Experience Manager.
Select the project that you want to deploy.
Select Deployment.
Open the Google tab and click Publish.
For more information, see How do I deploy Orbita's interaction model to Google Dialogflow?
Also, see Account Linking with Google Dialogflow
Testing the web chatbot endpoint
If you want to enable chatbot in https://www.domain.com and if you give /bot/testdoc in the URL field, you can access the chatbot using the URL https://www.domain.com/oeapi/bot/testdoc.
Customizing your chatbot
You can customize the Chatbot in 3 different places:
Environment level
Go to Experience Manager > Global Menu > Settings > Organization > Application settings. You can see Chatbot Custom CSS and Chatbot Custom JS. Style changes here affect all the chatbot endpoints in that environment.
...
Project level
At the project level, you can use the Chatbot settings to customize your chatbot. Chatbot Settings.
Go to Project side menu > Develop > Chatbot settings > Custom CSS/JS.
Chatbot endpoint level
Any style changes used in the Bot view template node in Experience Designer are limited to that endpoint. Select the Custom CSS or Custom JS tab and start customizing.
...
Custom CSS
Using Custom CSS, you can override the current style of the chatbot. The following code samples show some of the frequently used properties.
Example: Change image attributes
If the chat bubble contains an image and if you want to change attributes of the image you can use the following code.
Code Block |
---|
/*image bubble*/ .msg a{ float : right !important; color : #6629B7; line-height : 35px; } .msg a img{ float : left !important; width : 50px !important; } |
Example: Customize the color of the user bubble
For changing the color of the user bubble, you can use the following code.
Code Block |
---|
/*User Bubble Background changes */ .self .msg { background : #6629B7 !important; } |
Example: Change button style
If your chat bubble contains buttons, you can change the styles of buttons with the following code.
Code Block |
---|
/*Buttons Bubble changes*/ .chatWindow .choiceControl{ border-style : solid; border-width : 1px; border-color : #6629B7; } .other .msg{ color:#6629B7; } .choiceControl{ border-radius: 12px; } /*buttons background*/ .choiceControl .choices .smrtBtn{ background: #6629B7; } .choiceControl .choices{ background-color: #f2f2f2; } |
Example: Change scroll bar style
You can change the scroll bar style of the entire chatbot using the following code.
Code Block |
---|
/*Scroll bar changes*/ ::-webkit-scrollbar{ background:#f2f2f2; } ::-webkit-scrollbar-button{ height: unset; } ::-webkit-scrollbar-thumb{ background: #fff; /*background: #6629B7;*/ border-style: solid; border-width: 1px; border-color: #6629B7; } |
Example: Add your own logo
You can display your own logo on the chatbot using following code.
Code Block |
---|
/*logo*/ .chatWindow .orbita-logoimg{ width : 249px; content : url("https:domainname.com/image001.png") } |
Custom JS
Custom JS code is executed after the Chatbot is rendered on the page. The following sample code shows a custom alert message when you click on the key in the chatbot.
Code Block |
---|
function alertbox() { $('.orbita-enter-button').on('click', function() { alert('hello'); }); } setTimeout(function() { alertbox(); }, 3000); |
Obtaining the client ID and client secret
The site must be registered in the Experience Manager to get the client ID and client secret.
...