How do I set up Orbita Web Chat on my site (archive)
Orbita provides a Web Chatbot plug-in that can be used on any website. The Web Chatbot plug-in is quick and easy to configure for your website. You can also customize the Web Chatbot appearance
Prerequisites
- jQuery reference for the website.
You should paste the below code inside the head tag.
- A Google Dialog flow Agent.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Register your website in Experience Manager
Register your website by whitelisting the domain in the Experience Manager. Follow the below steps to register your website in the Experience Manager.
1. Login to Experience Manager
2. Click on ‘Organization’ in the Settings column.
3. In the Organization page, click on ‘Application Settings’.
4. Paste your site’s domain name at the arrow mark (as shown in the below screenshot) and click on the tick at the bottom right corner.
For example, if your website address is https://orbita.ai , your domain name will be “orbita.ai”.
Creating Chatbot Endpoint in Experience Designer
Refer to the below documentation to Configure the Chatbot endpoint and customizing it. How do I configure Chatbot
Integrating the Web Chatbot with Website
There are 3 different chatbot views that can be integrated within the website.
Sidebar View.
Dock View.
Inline View.
Initial configuration steps
1. Inside the head tag, create a script tag.
2. Inside the script tag, give the chat plugin file reference for ‘src’.
<head>
<script src=" https://<Portal’s hostname>:<port>/chatbot/chat-plugin.js"></script>
</head>For example:
<script src=" https://aurora.orbita.cloud:8443/chatbot/chat-plugin.js"></script>3. Create a div (given below) inside the body tag with ‘<Unique ID>’ as the ‘id’.
Sidebar View
Sidebar view will load the chatbot on one side of the webpage.
Copy the below code inside the div that is created for 'chatWindow'.
Please note that the property value of “domId” in the below code is ‘chatWindow’ because the “div id” that is created in step 3 of initial configuration steps is “chatWindow”.
The chatbot will be loaded on the right-side end of the webpage.
Dock Float View
The chatbot will be docked on the right bottom corner of the webpage.
Copy the below code inside the div that is created for 'chatWindow'.
Note:
The value of Property named ‘theme’ should be ‘dock’.
‘height’ should be given in number format.
The property value of “domId” in the below code is ‘chatWindow’ because the “div id” that is created in step 3 of the initial configuration steps is “chatWindow”.
The chatbot will be loaded as a small popup at the bottom of the webpage. When clicked on the popup, the chatbot will be docked in the right bottom corner.
Inline View
The Inline view will load the chatbot within the container in the body of the webpage.
Copy the below code inside the div that is created for 'chatWindow'.
Note:
Should not give height and width properties.
Position property should be ‘inline’ or ‘absolute’.
Inline: The chatbot dimensions will be aligned to the container’s dimensions.
Absolute: The chatbot dimensions will be fixed by default to 460x460.The property value of “domId” in the below code is ‘chatWindow’ because the “div id” that is created in step 3 of initial configuration steps is “chatWindow”.
The chatbot can be loaded inside the containers within the website’s body.
Properties and its usage
Property and its usage | Description |
|---|---|
| If you want the chatbot to open as you load the website, add the property dockDefaultAction and set the value to open. If you don't use this property in the script, you have to click on the chatbot icon to open the chatbot. This property is valid only for dock and dock-float themes. |
| The property value for ‘domId’ should be set as the same ‘<Unique ID>’ which is used in the div tag in Step1. |
| The property value for ‘launchWord’ can be set to any utterance to begin the conversation. The default value is ‘open’ |
| The property value for ‘name’ will be assigned as the name of the Chatbot. |
| The property value for ‘width’ should be a numeric value. This field is for restricting the width of the chatbot window. (Not applicable for Inline view theme). |
| The property value for ‘height’ should be a numeric value. This field is for restricting the height of the chatbot window. (Not applicable for Inline view theme). |
| The property value for ‘serverUrl’ should be the Orbita AI Platform URL. |
| The ‘theme’ property is valid only if the chatbot is plugged into a third party website. It is not applicable for chatbot rendered in a full window. The theme can be dock, dock-float, inline, and sidebar. |
| The property value for ‘enableLogin’ can be ‘true’ or ‘false’. If enableLogin is set to ‘true’, a login link will appear for the end-user at the header of the chatbot. The chatbot would require the oath Server URL, Client ID and Client Secret to allow login functionality. |
| The property value for ‘oathuserverUrl’ should be a URL. |
| The property value for ‘clientId’ should be the oath client ID obtained from the Experience Manager or third-party website. |
| The property value for ‘clientSecret’ should be the oath client ID obtained from the Experience Manager or third-party website. |
| The property value for ‘logoUrl’ can be a link to the image file. This will display a logo in the header of the chatbot. |
| The property value for ‘themeCode’ can be “xxxxxx” – a 6-digit html color code. |
Sample Code
Below is a sample code that can be used to generate a chatbot quickly with default property values.
Copy the below code and paste it in the html file to get the default chatbot on your website.
However, ‘clientId’ and ‘clientSecret’ is not given in this code. You will have to generate them from the Experience Manager.