Types of Widgets & Widget Configurations

In this guide#

This guide shows you the various types of widgets you can deploy on your website, along with various types of widget buttons. We will also walk you through how you can customise the widget to better suit the theme of your website.

Widget Types#


Image.png

Widget Types appear on the 1st Step of setting up an Inbound Campaign, as can be seen in the above image.

Bar Widget#

Image.png

A Bar Widget is an overlay widget, that appears as a horizontal banner on the top portion of your website, as can be seen above.

A user can choose to do the following with a Bar Widget:

  1. Simply view it and do nothing more
  2. Click the Widget Button (“+Explore” in this case). Clicking on the widget button results in a button action (more on that later).
  3. Close the widget by clicking x in top right of the widget.

Following are the conversion metrics that are tracked in the campaign report for a Bar Widget:

Image.png

  1. Widget Impressions → This is the no. of times the Widget is loaded.
  2. Widget Conversions → This is % of times the button is clicked.
  3. Chat Impressions → This is the no. of times the Chat Widget is pops up.
  4. Chat Conversions → This is the % of times the user responds on the Chat Widget by sending a message.

Supported Button Types(more on this later):

  1. Trigger a Journey
  2. Redirect to WhatsApp Chat

Slide In Widget#

Image.png

A Slide In Widget is an overlay widget that slides in from either left or right part your website, as can be seen above.

A user can choose to do the following with a Slide In Widget:

  1. Simply view it and do nothing more
  2. Click the Widget Button (“Yes, please” in this case). Clicking on the widget button results in a button action (more on that later).
  3. Close the widget by clicking x in top right of the widget.

Following are the conversion metrics that are tracked in the campaign report for a Bar Widget:

Image.png

  1. Widget Impressions → This is the no. of times the Widget is loaded.
  2. Widget Conversions → This is % of times the button is clicked.
  3. Chat Impressions → This is the no. of times the Chat Widget is pops up.
  4. Chat Conversions → This is the % of times the user responds on the Chat Widget by sending a message.

Supported Button Types(more on this later):

  1. Trigger a Journey
  2. Redirect to WhatsApp Chat

Chat Auto-Popup#

Image.png

Unlike the above 2 overlay widgets, this one is a part of the chat widget itself, that sits on the bottom right of your website.

Whenever this type of a campaign is executed, the chat widget opens up with the preconfigured journey, as can be seen in the above image.

Image.png

  1. Widget Impressions → This is N/a since there is no concept of an overlay widget here.
  2. Widget Conversions → This is N/a since there is no concept of an overlay widget here.
  3. Chat Impressions → This is the no. of times the Chat Widget pops up.
  4. Chat Conversions → This is the % of times the user responds on the Chat Widget by sending a message.

Supported Button Types(more on this later):

  1. Trigger a Journey

Widget Customisation & Button Types#


Image.png

Using the above image as reference, we have the following configurations for a widget:

Card Placement#

NOTE: This is applicable for Slide In Widget only.

Through this configuration you can choose whether the widget will slide in from the right or left of the website

Image.png

Card Colour#

NOTE: This is applicable for Slide In & Bar Widget only.

Through this configuration, you can set the colour of your widget background.

Image.png

Button Colour#

NOTE: This is applicable for Slide In & Bar Widget only.

Through this configuration, you can set the colour of your widget button.

Image.png

Header Text#

NOTE: This is applicable for Slide In & Bar Widget only.

Here you can type in the header text, and also configure the font family, font size and font colour of that text.

Image.png

Sub-header Text#

NOTE: This is applicable for Slide In Widget only.

Here you can type in the sub-header text, and also configure the font family, font size and font colour of that text.

Image.png

Button Text#

NOTE: This is applicable for Slide In & Bar Widget only.

Here you can type in the button text, and also configure the font family, font size and font colour of that text.

Image.png

Button Type#

Here you can define what action will be carried out once the user clicks on the widget button (for Slide In and Bar Widget), or in the case of chat auto popup, you can define which journey will be triggered.

Image.png

These are the 2 Button Types:

  1. Trigger a Journey (Available for Slide In, Bar and Chat Auto Popup)#

ezgif.com-gif-maker.gif

Whenever the visitor clicks the overlay widget button, or whenever the chat auto popup is executed, the configured journey is triggered, as can be seen in the image above.

Once, the button type is selected as “Trigger a Journey”, the Journey to be Triggered can also be selected.

Image.png

  1. Redirect to WhatsApp Chat (Available only for Slide In and Bar Widgets)#

ezgif.com-gif-maker.gif

Whenever the visitor clicks the overlay widget button the visitor is redirected to the configured WhatsApp Chat Bot, as can be seen in the image above.

Once, the button type is selected as “Redirect to WhatsApp Chat”, the WhatsApp Profile(the WhatsApp Business Profile to be redirected to), and the Default User Message (the pre-filled user message when the user lands on the WhatsApp Bot) can be configured.

Image.png