Customising Your Widget's Appearance

This function lets you change the enterprise name, master colour, widget icon, in-call video and image, and Smart Greeting to suit your preferred look and feel and content.

To customise the widget appearance:

  • From the navigation menu, go to Administration > Widget > Appearance.
  • Click on English (default).

There are two tabs in this section:

  • Basic Setting: provides a set of options that let you change your Widget's color, icon, and other physical attributes.
  • Smart Greeting (optional): lets you enable/disable Smart Greeting and change its settings.

Preview Panel

The preview panel displays the real-time rendering of your widget's appearance and Smart Greeting as you customise them in Basic Setting and Smart Greeting tabs, respectively.

Basic Setting

The Basic Setting tab provides brand customisation options to closely align the web widget to your organisation's look and feel.

Enterprise Name
This refers to the name of your brand/business displayed on the widget.

To enter an enterprise name:

  • On the Basic Setting tab, enter your business name under the Enterprise Name field.
  • Click on Save.

Widget Master Color
The Master Color is assigned to the widget header and buttons. You can select the master colour from preset colour shades or customise it using the colour picker.

To select a preset master colour:

  • On the Basic Setting tab, click on Master Color.
  • Click on the preferred colour.
  • Click on Save.

To customise the master colour using the colour picker:

  • On the Basic Setting tab, click on Master Color.
  • Click on the poly-chromatic circle.
  • Select a colour shade from the colour field. You may also use the slider or enter Hex codes and RGB values to select a colour.
  • Click on Save.

Widget Icon

You can personalise the widget icon by uploading your brand image file.

To upload a new widget icon image:

  • On the Basic Setting tab, click on Widget Icon.
  • Click on Upload.
  • Browse and select the desired image from your image library.
  • Click on Save.

Icon Image File Specifications
Format: JPG or PNG
File size: 100 KB or less
Resolution: 160 x 160 pixels

In-call Video and Image

To upload a video/image pair:

  • On the Basic Setting tab, click on In-call Video/Image
  • Click +Add New In-call Video and Image.
  • For video upload, click on Upload above In-call Video.
  • For image upload, click on Upload above In-call Image.
  • After uploading the video and image files, click on Save.

In-call Video File Specifications
Video Format: MP4
Video file size: 3 MB or less
Suggested video ratio: 16:9

In-call Image File Specifications
Image Format: JPG or PNG
Image file Size: 500 KB or less
Image resolution: 1280 x 720 pixels

Smart Greeting

Smart Greeting is a Widget feature that automatically displays a welcome message to your visitors whenever they visit your website. This message pops out just above your minimised maaiiconnect Widget, letting your visitors know that they can use the Widget to connect and interact with your support agents through call or chat. It is a smart, simple way to create an excellent first impression on your visitors.

maaiiconnect Widget with Smart Greeting enabled

Enabling Smart Greeting

To enable Smart Greeting:

  • From the navigation menu, go to Administration > Widget > Appearance.
  • Click on English (default), then click on the Smart Greeting tab.
  • Toggle the Enable Smart Greeting in Widget ON.

Smart Greeting enabled on visitor side

Once you enable Smart Greeting, you can customise its appearance, content, and settings.

Greeting Style
You can choose from the following Smart Greeting Styles:

  • Text Greeting: Lets the minimised maaiiconnect Widget display a simple text message. The message can be a simple greeting, a question, or an invitation to open the Widget.
  • Text with Tag: Lets the minimised maaiiconnect Widget display a text message and call or chat buttons that route to a specific Tag. These interactive buttons let visitors directly engage with your support agents associated with the Tag without having to open the Widget and scroll through its Tag Directory.

To select a Greeting Style:

  • Beside Greeting Style, click on the radio button beside your preferred option.

Enabling Smart Greeting

Greeting Headline and Greeting Message
These refer to the main message or greeting you want to pop out from the minimised maaiiconnect Widget whenever a visitor visits your website.

  • Beside Greeting Headline, type in the headline text that you want to immediately capture your visitors' attention. The Greeting Headline should be no longer than 70 characters.
  • Beside Greeting Message, type in additional information or more details that you want to share with your visitors, such as an invitation to contact your support agents. The Greeting Title should be no longer than 100 characters.
  • Click on Save.

Greeting Headline and Greeting Message

Greeting Tag
If your selected Greeting Style is Text with Tag, you will be required to choose a Destination Tag where maaiiconnect will route incoming inquiries from the Smart Greeting.

  • On the dropdown box that will appear, select a Tag from the list of available Tags.
  • Click on Save.

Greeting Tag

📘

Note:

It is recommended that a designated Tag meets the following criteria:

  • Has at least one Destination that supports all languages (or the language you are currently setting);
  • Has at least one Destination that supports all countries/regions, and;
  • Has the Conditional Trigger disabled.

To know more about Tags, refer to the Creating New Tags section of this Guide.

Greeting Schedule
You can set the Smart Greeting to only display on your website during specific times and days of the week.

  • Beside Greeting Schedule, toggle the button ON to enable this setting.
  • Under Set Timezone dropdown list, select the timezone where you wish to display the Smart Greeting.
  • Under Set Time Range, select the start and end times you wish to display the Smart Greeting.
  • Under Set Days of the Week, click on the days of the week you wish to display the Smart Greeting.
  • Click on Save.

Greeting Schedule

Disabling Smart Greeting

To disable Smart Greeting:

  • From the navigation menu, go to Administration > Widget > Appearance.
  • Click on English (default), then click on the Smart Greeting tab.
  • Toggle the Enable Smart Greeting in Widget OFF. A pop-up message will appear, asking you to confirm the action.

Disabling Smart Greeting

  • Click on Disable.

Disable Smart Greeting confirmation

Updated 12 days ago


Customising Your Widget's Appearance


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.