Dashboard

Once logged in, you will be redirected to the Conversational AI Dashboard. Here you will have access to the overall usage statistics of the Bots in your organization.

 

At the top of the screen, you can filter your statistics by day, week, month, or choose a custom period of time. You select a chatbot from the dropdown list on the left to only see statistics of one bot.

Below the filter bar, you can see cards that contain KPIs.

KPI Description
Number of clicks Number of clicks on the Chatbot. This is the number of times that a user started a conversation.
Number of chats Number of conversations. This is the number times where users actual entered text.

 

Number of user inputs Number of user inputs. The nomal number of messages sent by users to the bots.

 

Avg. Chat Time Average amount of time spent chatting per conversation.

 

Avg Rating. Average rating of chatbot interactions. An average of the conversation ratings given by users (good, neutral, bad).
Thumbs Ratio Ratio of thumbs up/down. Users can give a thumbs up or down to a bot response.

 

Avg. Confidence Average confidence of the chatbot in classifying sentences from the user.

 

 

Clicking on the cogwheel button, a user can customize the KPIs that they see:

You can also export an Excel file, by pushing the “Export” button on the top right.

Scrolling down, you will a see a chart that displays the number of chats in the selected period:

And, on the right side, a table with the number of active conversations.

Bots Area

Clicking on the Bots tab you will be redirected to the list of all bots existing on the organization.

You can search a certain bot by name or by using a keyword.

On the right side, clicking on Create New Bot will create a new Bot space where you can deploy a new bot.

Creating an SDK Bot

In order for you to deploy, test and make an SDK bot available to the public, you will need to use the UI to create a bot. If you would like to create a Studio bot, please refer to the Studio section.

When clicking on Create New Bot, a window will pop up where you will be able to add information:

  • Type: Select the SDK Type
  • Name: Name to quickly identify the Bot;
  • Display Name: Name that will be shown as the Bot’s name on the widget;
  • Description: Description of the Bot (optional).

 

Going back to the Bots main page, you can see the list of the bots deployed on the organization.

On this page you can have access to summarized information of the bots, the Name, the Display Name, the type, a brief description of the bot, number of conversations, the average confidence of the bot in conversations with users, and the status (on the image below, the bot status is on; clicking the toggle will disable the bot).

By clicking the three dots on the right, you will also be able to edit or archive the bot. Archiving a bot, will delete it from the list.

The Bot Info Tab

In the bot Info tab, you can edit and configure different aspects of a chatbot.

  • Status: the Bot can be enabled or disabled simply by clicking on the green toggle;
  • Info: the Name, Display Name (name displayed on the chat widget) and Description can be changed here.
  • Conversation Expiration Time: the number of minutes a conversation can be idle until it is considered expired. In the screeshot above, if no messages are exchanged for a period of 120 minutes, the conversation is automatically ended by the system. If this option is set to 0, the conversation never expires.
  • Data Expiration Time: the number of days data can exist in the logs before being deleted. This is a GDPR compliance feature.

 

At the bottom, there are other configuration options for Text to Speech (TTS) and Speech to Text (SST). These are only available for SDK bots at the moment. You will need to have an account with one of the providers in order to enabled these options.

Text to Speech

In this area you can enable the text to speech function on a bot (by clicking the toggle), choose a TTS service provider and change the voice according to your needs. You will need an account with one of the providers in order to be able to use this feature.

  • Text to Speech: Choose the Text to Speech service provider (Google, IBM, Microsoft, ReadSpeaker, …);
  • Character: Choose a character within the list the provider offers (male or female, and its characteristics);
  • Language: Choose the language of interest;
  • Pitch: It is possible to change the pitch of the chosen voice (to higher or lower);
  • Speaking Rate: The speed with which the voice speaks (faster or slower) can be changed here.

 

Speech to Text

Clicking below, on Speech to Text, it is possible to enable the user to talk with the bot with voice, converting their voice to text.

  • Speech to Text: Choose the Text to Speech service provider (Google, IBM, Microsoft, EnderTuring, …);
  • Language: Choose the language according to the bot language;
  • Model: The Model of the Speech to Text is selected here (Video, Phone Call, …).

Sentiment

In this section, you can enable/disable sentiment analysis. Similarly, you will need an account with one of the providers, in order to be able to enable this option.

Using the Bot Studio

The Bot Studio allows anyone to create and deploy a custom website FAQ bot quickly and easily.

Create a bot

After you login, navigate to the Bots page and click the Create New Bot button.

You will see the form appear below. Set the type to studio and fill in the fields and save.

You now have a new studio bot.

Bot Configuration

Navigate back to the bot list and you will see your newly created bot. Click on that bot and you will be taken to that bot’s customization page.

The first tab provides information on the bot. You can edit all the fields as in an SDK Bot. The Text-to-Speech and Speech-to-Text features are not available for studio bots.

Studio Tab

To build and train your bot, open the Studio tab.

Welcome Messages Section

In this section, you can configure your bot’s welcome messages. These are the messages that the bot will send to the user when a conversation is started. You can add your bot’s Welcome Messages in the Welcome Messages tab.

To add a new Welcome Message click the Create New Button and add your message. This is the message your bot will send to every user that opens the widget on your site. Ideally it should be a greeting and a question.

You will see your new Welcome Messages listed here and you can edit and delete them using the three dots on the right of each message.

FAQ Stories Section

In this section, you can manage your Frequently Asked Question Stories. Each Story is meant to answer one possible question of the user. FAQs can be managed in the FAQ tab within the Studio.

To create a new story, click on the Create New button on the FAQ tab.

 

Each story is made of two parts: question examples and answers:

  • The question examples should have as many options as you can think of, these are the questions that users may ask the bot around a certain topic.
  • The answers are below and you can add multiple bubbles. You can edit and delete FAQs using the three dots to the right of the entry.

The more FAQs you have and the more detailed they are the better user experience will be.

Fallback Section

In the fallback section, you configure the behavior of the bot, when it does not understand the user’s question. There are 3 options here:

  • Confidence Threshold – This option determines when the bot should fallback to a fallback message. If a question is classified by the bot with a confidence below that threshold, a fallback message will be triggered
  • Standard Fallback Message – This is the message that the bot shows, whenever it does not understand a question
  • Fallback after three messages – This is the message that the bot shows, after 3 not understood questions i a row. When this happens, there are two options: a simple last fallback message, or a handover to a messenger channel.

Deployment – Publish Your Bot

Once you have written your FAQs (a minimum of 10 is advised, with a minimum of 10 examples each) you can deploy your bot. Click on the Publish Bot button under the tabs. Deployment could take up to 10 minutes. If you get an error about not having enough information, it means you must make more FAQs or more detailed FAQs.

Once you have deployed the status of the bot should have been changed from Draft to Online.

If you make any further changes to the configurations you will have to publish the bot again to keep it up to date.

Importing/Exporting Content

Exporting content.

If you wish to back up the content of your bot, you can do so by pushing the export button on the top right. This will generate a JSON file that you can download.

Importing content.

You can import a bot by pushing the import button and uploading a JSON file. Beware that the contents of the bot with be replaced by the contents of the imported file.

Test your bot

To test your bot take a look at our Testing a Bot using in the Test tab tutorial.

Going live with your Studio Bot

There are several options to going live with your bot. The obvious choice is to add the chat widget to your website. Learn how to configure and add the chat widget to your website on the respective tutorial

You can also configure other channels, like WhatsApp, Facebook, SMS or Freshchat.

The Logs Tab

In this tab, you can browse the conversation logs – the records of the conversations with the users.

This view is a tabular view that shows the following information:

  • Date/Time: it shows when the input was sent to the bot;
  • Channel: it shows where the conversation took place (through Facebook Messenger WhatsApp, Website API, etc);
  • Input: what the user sent to the bot;
  • Sentiment: if the feature is enabled, it will show a smiley face with a happy, sad or neutral face;
  • Top Intent: what the bot identified as the topic of the input;
  • Confidence: indicates how certain the bot was that the intent has been correctly identified;
  • Answer: the answer given by the bot

 

Browsing the conversation logs

You can use the filters to select the period you would like to analyse. Each entry in the table is part of a conversation. In order to get more information about a conversation, click the pink arrow under the date.

You will be able to see the whole conversation of which this message is part of, along with a conversation ID, the start and end date of the conversation, its duration, the messages it contained, its confidence score and sentiment, etc.

Exporting logs

In order to make analysis easier, or create statistics, you can export the conversation logs for the selected period of time. On the top of the page, select the intended dates for the logs you want to export. Then, click one of the export buttons to download a CSV or an Excel file.

Testing a Bot

Once you’ve deployed and SDK bot, or published a Studio Bot, you can test the user experience on the test tab.

Ask your bot questions in line with the FAQs that you have created. If you see any areas that the bot is not responding well.

In a Studio bot you can amend the FAQs you have created or add more and then publish again using the UI.

In an SDK bot, you will need to modify, train and make a new deployment using the Command Line Tool (CLI).

Configuring the Chat Widget

The ROBO-AI chatbot widget has two modes, ‘chatbot‘ and ‘messenger‘.

Chatbot mode is fully automated, a bot talks to your customers. Messenger mode can use both bots and your own agents to respond to customers. The setup and customization features is listed below.

Using the widget

When deployed, in order to use the widget you must initialize it, the widget exposes a global object with an initialization method. By default, the global object name is RoboAi, but it can be customized through environment variables. This snippet must be added to the header of your HTML page.

<script>
  var config = {
    bot: '<BOT-ID>',
    key: '<API-KEY>',
    language: '<LANG>''
    api: {
          password: '<API-PASSWORD>',
          username: '<USERNAME>',
          url: '<URL>',
        }
    //see other params below...
  };
  RoboAi.init(config);
</script>

 

If you are using the Admin UI to create your Bot then on the Channels tab of the bot page you will see a mockup of the above script that you can copy and paste right into your web page. You can suppliment this with the config params below.

 

 

Configuration Parameters

 

{
  // these are only needed if the bot is in chatbot mode.
  mode: 'chatbot' // this is the default
  language: '<LANG>', // the UI language, the following values are supported: en, pt, de
  bot: '<BOT-ID>', // The bot ID on ROBO.AI
  key: '<API-KEY>', // The API key from ROBO.AI

  // messengermode enables conversation between agent and customer. whenever 
  // we start the plugin if it's in messenger mode, the user will be connected 
  // to a websocket which starts/opens a new conversation.
  mode: 'messenger',
  messengerUrl: '<SERVER-URL>',
  messengerCompanyId: '<COMPANY-ID>',
  messengerGroupId: '<GROUP-ID>',


  // ROBO.AI core host info
  api: {
    url: '<URL>',
    username: '<USERNAME>', // basic authentication username
    password: '<API-PASSWORD>', // basic authentication password
  },
  // banner below footer with link to privacy terms
  // default is not showing, to show add a link 'privacy terms'.
  privacyTerms: '',
  // customize the bottom message
  bottomMessage:  Powered by Robo.ai ,
  // if you want to add terms that need to be accepted
  // before the conversation.
  showTerms: false
  termsText: 'DisclaimerAdd your disclaimer here',
  termsAcceptButtonText: 'Accept',
  termsRejectButtonText: 'Reject',
  // The presentation sentence displayed by the bubble, if its not translatable, the
  // presentationSentence option may be used, if there exist translations, they can be
  // configured on the presentationSentenceTranslations option
  presentationSentence: 'non translatable sentence',
  presentationSentenceTranslations: {
    en: 'english translation',
    pt: 'portuguese translation',
    de: 'deutch translation',
  },
  // does the widget support audio conversations
  isAudioDisabled: false,
  // write a custom error message.
  errorMessage : 'Unfortunately we are having technical issues.',
  // if a bot has multiple responces e.g some text and a video,
  // they can be in seperate bubbles.
  isBubbleSeparated: true
  // viewMode is the mode in which the chat appears on the application.
  // the default is 'popup'.
  // if it needs to be embedded in a specific container use 'embedded'.
  viewMode: 'popup'
  // if viewMode is set to 'embedded' it is necessary to specify the
  // parentElement that will hold the chat in your application. there is
  // no default and there will be an error if this is left empty.
  // it must be a CSS-like selector string e.g '#thisId' or '.thisClass'.
  parentElement: ''
  // the widget is set to initalize after the initial HTML document
  // has been completely loaded and parsed (DOMContentLoaded), if it needs to
  // load immediately this needs to be set to true and it will not wait for this.
  immediateInitialization = false
  // run the conversation in debug mode.
  debug: false
  // indicates the communication mechanism between the widget and
  // the ROBO.AI platform. Supported values are:
  //   default: use whatever mechanism is set as default
  //   rest: use the REST API
  //   mock: use mock responses bypassing any communication with the server
  apiStrategy: 'default'
  // Rate the conversation after the user clicks to close
  // The user has the choice to send feedback or ignore
  enableRating: false,
  ratingTitle: 'How was your experience?',
  ratingText: '',
  showBadOption: true,
  showNeutralOption: true,
  showGoodOption: true,
  ratingPlaceholder: 'Comments...',
  ratingSendButtonText: 'Send',
  ratingIgnoreButtonText: 'Ignore',
  ratingFinishButtonText: 'Finish',
  ratingSuccessMessage: 'Thank you for rating! Have a good day.',
  // thumbs feedback on answers
  showThumbs: false,
  
  
  // styling configuration, most values will accept CSS property like values.
  // i.e: colors may use hex format, rgb(), rgba(), etc.
  // below are the default settings.
  styles: {
    //This edits the width of the entire widget
    widgetWidth: '380px',
    widgetHeight: '300px',
    // bubble icon image, this icon shows in the corner of
    //the screen when the widget is collapsed.
    bubbleIcon: 'http://my-server.example.com/bubble-icon.png',
    // Other font size variables cascade
    //from this if not explicitely set.
    regularFontSize: '15px',
    mediumFontSize: '14px',
    smallFontSize: '12px',
    tinyFontSize: '8px',
    textFont: 'Arial, sans-serif',
    // a logo tag is small text that can go with the logo
    // in the widget header.
    logoTag: 'demo',
    logoTagColor: '#fff',
    logoTagFontSize: '8px',
    // if just text is wanted rather than a logo in
    // the widget header.
    logoText: '',
    logoTextFontSize:'15px'
    logoTextColor:'#fff'
    // the logo image URL
    logoImage: 'http://my-server.example.com/logo-image.png',
    // the URL to where the logo link points to.
    logoLink: 'http://my-website.com/homepage',
    // bot avatar image URL.
    botAvatarImage: 'http://my-server.example.com/bot-image',
    // general widget colors, all  other color defaults
    // cascade from these values if not explicitely set.
    primaryColor: '#ff3366',
    primaryShadowedColor: '#ffa0b9',
    primaryDarkColor: '#cc3262',
    secondaryColor: '#aaa',
    neutralColor: '#101010',
    primaryBackgroundColor: '#fff',
    secondaryBackgroundColor: '#f7f7f7',
    dangerColor: '#fff',
    dangerBackgroundColor: '#a42a44',
    // presentation text bubble styles
    // these will cascade automatically
    // from general colors if not set.
    presentationTextColor: '#ff3366',
    presentationBorderColor: '#ff3366',
    presentationBackgroundColor: '#fff',
    // disclaimer accept and reject buttons.
    termsAcceptButtonColor: '#008000',
    termsRejectButtonColor: '#808080',
    // rating smile colours
    ratingBad: '#de684b',
    ratingNeutral: '#ffbf00',
    ratingGood: '#63c671',
    // rating ignore and send buttons, the 'Finish' button on the
    // rating sucess page is the same colour as 'ratingSendButtonColour'.
    ratingIgnoreButtonColour: '#808080',
    ratingSendButtonColour: '#008000',
    // the above also change the colour of thumbs feedback ignore and send buttons.
    // header and bubble styles
    // these will cascade automatically
    // from general colors if not set.
    headerBackgroundColor: '#ff3366',
    headerActiveBackgroundColor: '#cc3262',
    headerActionColor: '#fff',
    headerActionActiveColor: '#fff',
    headerActionActiveBackgroundColor: '#fff',
    // footer styles
    // these color attributes will cascade automatically
    // from general colors if not set.
    footerBackgroundColor: '#ff3366',
    footerBorderColor: '#EEEEEE',
    footerTextColor: '#fff',
    footerActiveTextColor: '#cc3262',
    footerInactiveTextColor: ' #ffa0b9',
    footerIconSize: '24px',
    // edit how the user bubbles are labelled
    userTitle: 'you'
    // text input by the user.
    // these color attributes will cascade automatically
    // from general colors if not set.
    textInputBorderColor: '#ff3366',
    textInputTextColor: '#101010',
    textInputBackgroundColor: '#fff',
    textInputActiveBorderColor: '#cc3262',
    textInputActiveBackgroundColor: '#f7f7f7',
    // cascades from regular font size
    textInputFontSize: '15px',
    // links - answers that are links
    // these color attributes will cascade automatically
    // from general colors if not set.
    primaryLinkColor: '#ff3366',
    primaryActiveLinkColor: '#cc3262',
    // buttons - buttons in the widget footer.
    // these color attributes will cascade automatically
    // from general colors if not set.
    buttonTextColor: '#fff',
    buttonBorderColor: '#cc3262',
    buttonBackgroundColor: '#ff3366',
    // cascades from regular font size
    buttonFontSize: '15px',
    // button styling for multi-option answers.
    multichoiceButtonWidth: auto // %
    multichoiceButtonHeight: auto // px or %
    // for dropdown multi-option answers.
    // the threshold when buttons change to dropdown.
    multichoiceSwitchToSelectThreshold: 10,
    // styles for dropdown.
    multichoiceSelectBackground: '#006bb8',
    multichoiceSelectColor: '#ffffff',
    //carousel styling
    carouselImageMaxWidth: '50%',
    //show the dots under the carousel.
    isCarouselDots: true,
    // bot dialogue bubble
    // the bots answers appear in this bubble style.
    // these color attributes will cascade automatically
    // from general colors if not set.
    botBubbleBackgroundColor: '#ff3366',
    botBubbleTextColor: '#fff',
    botBubbleBorderColor: '#ff3366',
    // cascades from regular font size
    botBubbleFontSize: '15px',
    botBubbleLinkColor: '#fff',
    botBubbleLinkActiveColor: '#aaa',
    // user dialogue bubble
    // the users answers appear in this bubble style.
    // these color attributes will cascade automatically
    // from general colors if not set.
    userBubbleBackgroundColor: '#aaa',
    userBubbleTextColor: '#fff',
    userBubbleBorderColor: '#aaa',
    // cascades from regular font size
    userBubbleFontSize: '15px',
    userBubbleLinkColor: '#fff',
    userBubbleLinkActiveColor: '#ff3366',
    // error dialogue bubble
    // if an error occurs the bot send the message in this bubble style.
    // these color attributes will cascade automatically
    // from general colors if not set.
    errorBubbleBackgroundColor: '#fff',
    errorBubbleTextColor: '#842b2c',
    errorBubbleBorderColor: '#842b2c',
    // cascades from regular font size
    errorBubbleFontSize: '15px',
    errorBubbleLinkColor: '#ff3366',
    errorBubbleLinkActiveColor: '#cc3262',
    errorBubblePadding: '5px',
    errorTimeMarginTop: '2px',
    errorTimeMarginLeft: '40px',
    errorTimeMarginBottom: '10px',
    errorTimeFontSize: '12px',
    // dialogue bubble - both user and bot bubbles.
    bubbleFontWeight: '300',
    // if you want the dialogue bubbles square put '0px'.
    bubbleBorderRadius: '15px',
    bubblePadding:'0px',
    // dialogue bubble time caption.
    // These color attributes will cascade automatically
    // from general colors if not set.
    bubbleTimeColor: '#101010',
    // cascades from small font size.
    bubbleTimeFontSize: '12px',
    // Play button next to the bubbles
    // These color attributes will cascade automatically
    // from general colors if not set.
    bubbleActionIconColor: '#cc3262',
    //cascades from regular font size
    bubbleActionIconSize: '15px',
    // sound recording
    // visualizer is the moving sound line
    recordingVisualizerHeight: '120', // number
    recordingTimeColor: '#ff3366',
    // cascades from regular font size
    recordingTimeFontSize: '15px',
    soundRecordingBackground: '#f7f7f7',
    // hints
    // These color attributes will cascade automatically
    // from general colors if not set.
    hintsBorderColor: ' #ccc',
    hintsBackgroundColor: '#f7f7f7',
    hintsItemBackgroundColor: '#ff3366',
    hintsItemActiveBackgroundColor: '#cc3262',
    hintsItemTextColor: '#fff',
    // cascades from small font size
    hintsItemFontSize: '12px',
    // z-index for the widget container, default puts
    // widget in front of popups on your website
    botContainerZindex: '1000000',
  }
}

 

Prepare the Bot to Receive Events

Your application can send events to the bot. Responses to events are defined in the bot.  Examples of events can be a user clicking on a certain menu item in your application, being idle on a certain page, etc. All Events are described as JavaScript plain objects and they follow a common structure: they all have a name and an arbitrary list of parameters defined as key/value pairs.