Chatbot Endpoint setup

Create a flow using Http in, Bot Provider V2, Bot View template, Http out and Function nodes 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

Provide the Developer Access Token in the 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 info go to Customizing the CSS and JS of a chatbot.information on the node, see Bot view template node

...

App Settings

The function node is named App Settings. Place the following code in the function node.

...

• speechToText. Defines the Speech-to-Text converter to be used by the chatbot application and it takes values such as native, default, and google.

• headerLogo. Specifies an image file to show it in the chatbot.

• waitTime. Defines the time (in milliseconds) the bot waits before showing the next bubble. Also, see How do I delay delivering bubbles in Chatbot using waitTime?

• offlineMessage. The message that is displayed when you are offline. You cannot do any action in the chatbot when offline.

...

• 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 override the global settings in chatbot?

How to modify the Main menu of the chatbot

How do I add a wait indicator to my chat bot?

http out Node

The http out node is named Chatbot Output.

...

Deployment to Google

To deploy the flow to google dialog flow and get the web chatbot running, follow these steps.

1. Login to Experience Manager.

2. Select the project that you want to deploy.

3. Select Deployment.

   

4. Open the Google tab and click Publish.

   

   See also Setting up and For more information, see How do I deploy Orbita's interaction model to Google Dialogflow

Obtaining the developer access token

1. Log into Dialogflow.

2. Select an agent.

3. Open the General tab to find the Developer access token.
   

   Image Removed

   For more information?
   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 two ways:

1. 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.

   Image RemovedImage Added

2. 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.

/*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.

/*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.

/*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.

/*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.

/*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.

...

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.

...

1. Login to Experience Manager.

2. Click on the menu, at the top right corner of the web page, to get a drop-down menu.

3. In the drop-down menu, select Settings > Register Application.

   View file
   name Invalid file id - ce38478e-a539-4f4d-8156-080b6ec605b3

   Image Added

4. 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.

   Image RemovedImage Added

5. Select the line item where registered application for which the Client ID and secret are needed. The details of the registered application appear on this page.

   Image RemovedImage Added

6. Click Edit.

   Image Removed

   Select Scroll down and 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.

   Image RemovedImage Added

Related Articles