| Table of Contents | ||
|---|---|---|
|
Endpoint setup
Create a flow using Http in, Bot Provider V2, Bot View template, Http out and Function nodes as shown.
...
http in Nodes
appSettings for Mobile/web
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
Provide the Developer Access Token in the Bot provider V2 node named Web Chat Bot in the example flow.
...
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 info go to Customizing the CSS and JS of a chatbot.
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.
...
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 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.
See also Setting up and deploy Orbita's interaction model to Google Dialogflow
Obtaining the developer access token
Log into Dialogflow.
Select an agent.
Open the General tab to find the Developer access token.
For more information, 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 two ways:
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 instance.
Any style changes used in the Bot view template node in Experience Designer are limited to that endpoint alone. Select the Custom CSS or Custom JS tab and start customizing.
View file name Invalid file id - 296c825c-0a05-46e2-99cf-2eac69110b84
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.
...
Login to Experience Manager.
Click on the menu, at the top right corner of the web page, to get a drop-down menu.
In the drop-down menu, select Settings > Register Application.
View file name Invalid file id - ce38478e-a539-4f4d-8156-080b6ec605b3 Fill in the required details such as Name, Description, Reference URI, Website, and Organization Name. Check the Accept the terms and conditions and click Save. A list of registered applications appears on the page.
Select the line item where the Client ID and secret are needed. The details of the registered application appear on this page.
Click Edit.
Select the Browser Key tab.
Enter the Domain name of the website where you wanted to integrate the Chatbot.
Click Get Key. The Client Id and Client Secret appear.
Related Articles
| Filter by label (Content by label) | ||||||||
|---|---|---|---|---|---|---|---|---|
|