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.

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.

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

http out Node

The http out node is named Chatbot Output.

Deployment

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

   

   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:

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 line item where the Client ID and secret are needed. The details of the registered application appear on this page.

   

6. Click Edit.

   

7. Select the Browser Key tab.

8. Enter the Domain name of the website where you wanted to integrate the Chatbot.

9. 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:
  Web chat bot stops loading or stops working
• Page:
  Bot Provider V2 node