Customizing Your Widget's Appearance

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

To customize the widget appearance:

  • From the navigation menu, go to Settings > 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 customize them in Basic Setting and Smart Greeting tabs, respecively.

Basic Setting

The Basic Setting tab provides brand customization options to closely align the web widget to your organization'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 color from preset color shades or customize it using the color picker.

To select a preset master color:

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

To customize the master color using the color picker:

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

Widget Icon

You can personalize 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 minimized 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 Settings > 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 customize its appearance, content, and settings.

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

  • Text Greeting: Lets the minimized 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 minimized 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 minimized 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 Settings > 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 7 days ago


Customizing 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.