Website Chat Widget

Add the Bonomi Web Chat Widget to your site.

The Web Chat Widget allows website visitors to contact you via live chat or through other Messaging Channels you have connected.

Step 1: Navigate to Channel Settings From Settings Module, navigate to the menu item, Channels

Step 2: Add Channel Press Add Channel and choose Web Chat. The Connecting Web Chat Widget dialog should open up.

Step 3: Specify Website Fill in the website(s) where the Widget will be added.

Step 4: Select a Theme Color Using the interactive color picker, select a theme color for the chat widget.

Tip: Choose a color that matches your brand color and website!

Step 5: Select a Display Icon for the Widget Choose an icon that would like to show on the website for the widget.

Tip: Widget can be further customized once connected.

Step 6: Follow through the steps at the platform Once you have specified the necessary information, press NEXT to follow through.

Step 7. Install the Script You can add the generated script to your preferred website. Alternatively, you can send the installation instructions to someone else via email.Connecting Web Chat

You may require a webmaster or technical admin to assist in installing the chat widget on the website. Please seek assistance if necessary!

Depending on what system you use to create and manage your website, we have created a step by step guides to walk you through installing a Chat Widget onto your website.

pageInstall on WordPress pageInstall on Wix pageInstall on Shopify pageInstall on Squarespace

For other platform or services, navigate to HTML source of the page. Paste the script before the </body> tag.

<body>
...
...
...
<!-- PASTE SCRIPT HERE -->
</body>

If you require assistance, you can choose to forward the script along with installation instructions to your website administrator. Select the respective checkbox and enter the email address of someone who can help you install the chat plugin.

The Bonomi Web Chat Widget will appear on your site once the script has been successfully installed.

Step 1: Navigate to Channel Settings From Settings Module, navigate to the menu item, Channels

Step 2: Locate the Web Chat channel Once you have located the Web Chat channel, press CUSTOMIZE

3. Press the Customize button for the Web Chat.

You can see right away the changes on the right side. That shows you how the chat icon will appear on the website.

You may customize the following to change the appearance of the widget on the website.

Theme Color

The chosen color will be used as the primary color of your widget

Text Color

The chosen color will be used as the primary text color of your widget

Webside Chat Icon

The display icon is shown on the website for user to interact with web chat

Popup Message

A small message that pops up above the widget icon

The Popup Message is shown to website visitors once per day 5 seconds after the page load.

Position

You can set the position and size of the webchat widget icon.

Header Elements

Title

The Title will show at the top of your chat widget

Tagline

The Tagline will be displayed under the Title

Website Chat Logo

This logo will appear next to the Title and in the minimalized version

Channel Icons

You can add your channels here as well. The icons will appear in the minimalized and extended version as well and will be clickable

Pre-Chat Form

You can enable the pre-chat form and add the fields about the informations that you would like to ask. The fields can be mandatory and the titles can be set to your language.

You can also edit the Get started button to your own preferences.

Additional Settings

Input Bar Text

This text will function as a placeholder in the typing area

Text Font

Set the font for all the texts

Widget Channel Links

This option will enable contacts to contact you through their preferred channel providing the options are given. You can add up to six channels and it will be shown at the top of the Web Chat Widget.

If the Web Chat Widget has never been configured before, connected channels with adequate information will be listed by default as Widget channel Links

You may add the widget channel links and specify the necessary information for the selected channel.

Here is the list of Input Field required for each of the Channel Links supported.

Channel Links

Input Field Required

WhatsApp Phone Number

Facebook Messenger

Facebook Page ID

Telegram Botname

Twitter

Twitter ID

LINE

LINE ID

Viber

Viber URI

SMS

SMS Phone Number

Email Address

Phone Call

Phone Number

Web Chat Logo

Drop your logo image here so it will show at the top of the Web Chat. The format can either be in PNG, SVG or JPG and file size is not more than 1.0 MB.

Show Greeting Message Pop Up

When this option is selected, the bonomi widget will pop up with your greeting message and chat options after 5 seconds delay time.Pop Up After 5 Seconds

When using this option the widget will be completely hidden. Until a the Anchor Reference has been clicked.

#webchat_widget

Using the above anchor you can create a button on your page, to open the widget once clicked.

Pre-Chat Form

Enabling this option will add a pre-chat form to your Web Chat. If enabled, your website visitor will not be able to chat until they fill out the form you have set up.

With this option enabled, you can include additional custom fields when necessary. In addition to that, you can also customize the label for the default fields on how they appear to your contacts.Installation script

Scroll further down and there will be a script to be added into your website.

Any changes to your Web Chat Widget Customization will be automatically reflected on your website. You do not need to reinstall the script.

Channel Configuration

Web Chat channel can be configured with a unique: - Channel Name - Greeting Message - Website Domain(s)

Step 1: Navigate to Channel Settings From Settings Module, navigate to the menu item, Channels

Step 2: Locate the Web Chat channel Once you have located the Web Chat channel, press Configure

Step 3: Make the necessary configuration You can configure the following:

Channel Name - Name used internally to identify the account
Greeting Message - This message is the first message sent to contact when they message you through Web Chat.
Website Domains - The website of which the widget to be installed

Important: If you do not add your website to this list, your widget will not load. You can enter multiple URLs if you plan on installing the plugin to multiple websites.

Step 4: Update the configuration Press Done to update the channel configuration