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

App Settings

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

msg.payload = { 
                speechToText      : "google", 
                headerLogo        : "",
                waitTime          : 4000,
                offlineMessage    : 'You lost your Internet connectivity'
                onlineMessage     : 'You are online',
                supportedLanguage : [
                                      "en-US",
                                      "ja-JP",
                                      "es-US"
                                    ]
              };
return msg;

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

   

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

   

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.

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.

You can use the Client ID and Client Secret in the Web Chatbot to integrate it with Orbita.

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.

   

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.

   

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

   

6. Click Edit. 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.

   

Related Articles

• Page:
  How to manage URL Params and Query strings
• Page:
  Chatbot Settings
• Page:
  How do I link to an external audio file?
• Page:
  How do I import an Amazon Alexa schema?
• Page:
  How do I enable account linking in Amazon Alexa?