Configuring the ROBO.AI chat widget

ROBO.AI, the customer messaging and conversation AI platform. You can add a customized widget to your website in 3 easy steps.

Get Set Up

1

Signup to our Admin platform

Create an account on our Admin platform.
2

Create a bot

Go to the Bot tab in your admin account dashboard and click Create Bot.
3

Generate an HTML code snippet and embed in your website.

Now you have created a bot you can access that bot´s info page. Navigate to the Channel tab and you will see the snippet generator. Add or create an API key and choose your language. Now the code is ready to be copied and pasted onto your website. You can fully customize the bot with styles and some other parameters. See the section below for detail on this.
<script src="https://cdn.robo-ai.com/widget/widget.js"></script>
<script>
  var config = {
    bot: "bot-uuid",
    key: "<api-key>",
    language: "en"
  };
  RoboAi.init(config);
</script>

Additional Features

Register Commands

A bot may send commands to the widget. Commands are defined by each bot and the widget can choose to run arbitrary code when a command arrives. Examples of commands can be an URL redirection, showing a pop-up, etc. All commands 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.
// an example of a command the bot receives to redirect the user.
{
  name: "open-url",
  params: [
    {
      key: "url",
      value: "http://example.com",
    }
  ]
}

// this is the structure to register command handlers.
RoboAi.commandReceived((command) => {
   //deal with command
}, "command-identifier")

// an example registration of an 'open-url' command handler. When the bot receives
// commands that have this tag they will redirect the user to that window.
RoboAi.onCommandReceived((command) => {
        const url = command.params.find(param => param.key === 'url');
        window.open(url, '_blank')
    }, "open-url");
});

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.
// an example of an event.
// a user clicks on a menu item on the application.

menuitem.onclick(function(item) {
  RoboAi.sendEvent("menu-clicked", [{key: "option",value:"about"}]);
});

// the event is received by the bot and identified
{
  type : "event",
  name: "menu-clicked",
  params: [
    {
      key: "option",
      value: "about",
    }
  ]
}

// a bot response is triggered
// bot - "I see you want to know more about our company, can I answer any questions?"

Widget API and Events

There are multiple widget API methods and events available.
// from version 1.1.0 onwards
RoboAi.disableUserInput() //removes user input buttons in footer (they are showing by default).
RoboAi.enableUserInput() //shows user input buttons in footer 
RoboAi.endConversation() // ends current bot conversation.
RoboAi.clearMessageHistory() // clears current message history.
RoboAi.startConversation() // restarts the dialogue.
RoboAi.isDialogueActive() // returns tue if there is active dialogue, false if not.

// from version 1.0.1 onwards
RoboAi.closeWidget() //close the widget.
RoboAi.openWidget() //open the widget.

// sends a message to the bot and accepts a string.
RoboAi.sendMessage(/* add message you want to send the bot */) 

// widget events - you must subscribe to the event after initialization.
RoboAi.on('open', function onOpen() {
  //do something when the widget opens.
});
RoboAi.on('close', function onClose() {
  //do something when the widget closes.
});
RoboAi.on('message-sent', function onMessageSent() {
  //do something when the widget sends a message to the bot.
});
RoboAi.on('message-received', function onMessageReceived() {
  //do something when the client receives a message from the bot.
});

Customize your Widget

Customize the Robo.Ai experience. There are optional parameters and a full suite of styling options available. Below is a list of all available parameters, a description of what they do and their default values.

let config = {
   bot: 'bot-pt-pt',
   key: '<Your API key>',
   language: 'pt',
   //below are optional parameters and their default values.
   // disable bot audio.
   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 'embedded' is called above 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 left empty on embedded view.
   // it must be a selector string e.g '#thisId' or '.thisClass'.
   parentElement: ''
    
   // 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', //px or %
    widgetHeight: '300px', //px

    // 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: '#842b2c',

    // presentation text bubble styles
    // these will cascade automatically 
    // from general colors if not set.
    presentationTextColor: '#ff3366',
    presentationBorderColor: '#ff3366',
    presentationBackgroundColor: '#fff',

    // 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',

    // 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 %

    // 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',

    // dialogue bubble - both user and bot bubbles.
    bubbleFontWeight: '300',

    // 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,
  } 
}

Contact us for a demo

Contact