ROBO.AI, the customer messaging and conversation AI platform. You can add a customized widget to your website in 3 easy steps.
Configuring the ROBO.AI chat widget
Get Set Up
<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
// 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");
});
// 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?"
RoboAi.closeWidget() //close 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,
// 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,
}
}