1. Home
  2. Live Chat
  3. Implementation Guide
  4. Live Chat Web Widget Setup
  1. Home
  2. Live Chat
  3. Live Chat Web Widget Setup
  • User Guide
  • Developer Docs
Frequently visited sections What is verloop?, FAQ Overview?

Live Chat Web Widget Setup

Customising Live Web Widget

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.

  1. Easily modify your bot’s name.
  2. Add a subtitle. 
  3. Upload a new bot avatar, and watch it instantly update within the preview.
  4. Change the colour, and see the widget transform in real time.
  5. It’s as simple as choosing a colour, clicking outside, and seeing your widget adapt.
  6. 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

Live Widget and Messaging Section

  • Customers can minimise the conversation with the widget close interaction button.
  • Rich media interaction is available.
  1. URLs – preview to be shown, previews will be clickable
  2. URLs being clickable
  3. buttons clickable (support for bot builder message types)
  • Customer messages time stamp added.
  • Rich media interaction for customers. Customers can upload images and add links.
    • URLs will be clickable
  • Queue position information of the chat is shown to the end user.
  • Typing indicator for the customer for when the agent is typing.
  • Notification sounds
    • When a new message from a bot/agent. 
    • When the first welcome message is shown.

Updated on February 26, 2024
Was this article helpful?

Related Articles

Not what you are looking for?
Click the link below to submit a support ticket
Submit Ticket
Schedule a demo

Get Started with Verloop.io