You can add your chatbot on your website to automate communications with your visitors. Aimylogic provides a customisable chat widget for that.

How to create chat widget

Click on "Chat Widget" button in the Channels menu of Aimylogic. A settings window appears. Here you can customise appearance of your chat widget.



Once you are finished click on Connect button.

Add chat widget to the website

Click on "Get Script" button to copy a Javascript code of your chat widget to the clipboard.



How you have to place this script on every page of your website where you'd like your visitors could chat with bot. Paste copied script between <head></head> tags, for example

<head>
<script src="https://bot.aimylogic.com/chatwidget/ae6deeca-be8e-43f0-b218-2b7f4d1aaaae/justwidget.js" async></script>
</head>


How to pass custom data from website

Your Javascript code can pass some variables to the chat widget during the widget initialisation. After that your bot obtains these variables and can use it in the scenario. For example, you can pass a client ID of the visitor and their email.

To pass parameters just place an initialisation script before the line with chat widget's link.

<script>
window.juswidgetVariables=new Object();
window.juswidgetVariables.start=new Object();
window.juswidgetVariables.start.id="55";
window.juswidgetVariables.start.name="Bob";
</script>


In the example above we passed two parameters - id and name. It will appear in the bot's scenario in the variable named $start.

How to customise widget's style

You can overwrite some CSS of the chat widget on your website. There is a list of components you can change to tune widget's look-and-feel.

Size of the logo

.justwidget--asst-pic {
width: 100px !important;
height: 100px !important;
}

.justwidget--asst-pic-waves {
bottom: -105px !important;
border-width: 55px !important;
}


Messages text style

.justwidget--message_content p {
font-style: italic !important;
}


Names of visitor and chatbot

.justwidget--message_content .justwidget--username {
text-transform: uppercase !important;
}


Name and messages of chatbot

.justwidget--message_asst .justwidget--message_content {
color: red !important;
}


Name and messages of visitor

.justwidget--message_user .justwidget--message_content {
color: blue !important;
}


Avatars

.justwidget--message_cell .justwidget--image {
width: 20px !important;
height: 20px !important;
border-radius: 10px !important;
}


Chatbot's avatar

.justwidget--message_asst .justwidget--image {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAAAAXNSR…Kzs7MPBaQPFJJ3RBoRrYU9rUHKjNZ/ytgvejO9FO3+RIv5X7Vtp94iw6RcAAAAAElFTkSuQmCC) !important;
}


Visitor's avatar

.justwidget--message_user .justwidget--image {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIW…fbhyVJ6hBFsR3g/v7+o2EYR3d3d+8KhUJwbm6uZjn+HQA9sYxA5bR6kwAAAABJRU5ErkJggg==) !important;
}


Title of widget

.justwidget h1.justwidget--headline {
font-size: 1em !important;
background-color: yellow !important;
color: black !important;
}


Message input field

.justwidget--text {
color: #000000 !important;
background: pink !important;
font-size: 1em !important;
}
Was this article helpful?
Thank you!