Live Chat Web Widget Setup

You can customise the website live widget in two ways:

On the Verloop.io Platform
Using website SDK code

To know how to set up the live widget, click here.

On the Verloop.io Platform

Head to the ‘Branding’ section, where you’ll discover a neatly organised hub, housing everything you need – from the Bot Widget to the White Label section. Click on the “Bot Widget.”

There you will see the following screen.

Easily modify your bot’s name.
Add a subtitle.
Upload a new bot avatar, and watch it instantly update within the preview.
Change the colour, and see the widget transform in real time.
It’s as simple as choosing a colour, clicking outside, and seeing your widget adapt.
Once you are confident with the preview, opt to save for publishing the changes.

Note: You can even add the CSS code to customise the live widget.

Using SDK Code

you can now seamlessly modify your widget style directly through the website SDK code.

Here’s what you can now adjust using the SDK code:

Title style
Title colour
Subtitle style
Subtitle color
Widget position
Subtitle position
Brand Logo

Simply paste the following code into your website console and add your desired settings within the function. These settings will effortlessly override any configurations you’ve set up in the Verloop.io platform.

Use the function
setWidgetProperties

Sample:

Verloop(function() {

    this.setWidgetProperties({

title:"Title to add", 

subtitle:"Subtitle for the chat", 

widgetTitlePosition:"left"

    });

});

Expected Format of Values

{

  title: 'Sample Title <String>',

  titleColor: '#FF0000',

  subtitle: 'Sample Subtitle <String>',

  subtitleColor: '#FF0000',

  widgetTitlePosition: 'right/left/center <String>',

  widgetSubtitlePosition: 'right/left/center <String>',

  brandLogoUrl: 'valid http/https url <String>'

}

Live Widget and Messaging Section