Webchat Channel

Enhance your website's user engagement with our versatile webchat widget. Easily integrate a chatbot into your site to provide seamless customer support, boost sales through conversational marketing, and connect with visitors without relying on other channels. Customise the widget to align with your brand and improve user interaction, ensuring a smooth and efficient communication experience.

The webchat widget allows you to integrate a chatbot into any website independently, without needing other channels. This feature enables you to harness the full potential of conversational marketing, free from the limitations often associated with alternative platforms.

Accessing the Webchat Widget

To use the webchat widget, you must first create an Omni-Channel chatbot. Remember, the webchat feature is exclusive to the Omni-Channel.

If you haven't set up an Omni-Channel yet, click the "Set up omni channel" button to create one, as shown in the screenshot below:

Once you've created the Omni-Channel and named it, you'll see the following screen:

You can either create a new bot or convert an existing one into an Omni-Channel.

After setting up the Omni-Channel, you can find the webchat widget in the left sidebar.

Configuring the Webchat Widget

Locate your widget and click the pencil icon on its right to edit and personalise the webchat widget according to your preferences.

Clicking the icon takes you to the main overview of available settings:

Content Settings

The first section in the widget is the content tab, where you can adjust the following options:

• Chat Bubble

• Chat Header

• Chat Footer

• Conversation Button

• Welcome Message

• Out of Office Message

• Pre-Chat Form

• Default Start Flow

Let's explore each option individually.

Chat Bubble

The chat bubble feature allows you to choose your preferred bubble icon, which is immediately visible in the preview at the bottom right corner.

You can opt for an icon-only display or combine it with text using the top screen options.

Chat Footer

The chat footer button lets you design a custom footer for your chatbot widget.

You can include text, hyperlinks, and more.

Conversation Button

The conversation button feature allows you to create custom call-to-action (CTA) buttons for users to start, continue, or restart a conversation.

Welcome Message

Add a welcoming headline and tagline to encourage users to click on your webchat widget.

Out of Office Message

The out of office message feature lets you add a notification to your widget, including setting a custom reply message.

Pre-Chat Form

This feature allows you to collect essential data before the chat begins, saving it to any system or custom user field available.

Note that the Pre-Chat Form does not work with embed and full-page modes. You must use floating or pop-up styles.

Start by adding a form header to explain its purpose, then insert a field form by clicking the + Add Field button.

You can select from the following field types:

After choosing your field type, you can edit it by clicking the edit button.

While editing fields, you have several options. For example, with an email field type:

First, select the system or custom user field to save the user's input. You can then name the form field label and provide a placeholder example for the email format. The hint section allows you to add more details about the field type.

The last two options let you decide if the field is mandatory and set its width. The final result will look like this:

Once you have customised the field, click the done button at the top to save your changes.

Below the fields, there's an option to allow users to write a message before entering the chatbot.

Here's how it appears to users in the live view:

This message is stored in the system field called {{last text input}}.

Default Start Flow

If the pre-chat form isn't enabled, you can set a default starting flow of your choice.

Once selected, you can choose from any flows you've previously created.

Skipping the Conversation Button

In the web chat, you can configure it to bypass the need for a button click to start a conversation.

• To achieve this, ensure:

• You don't select other channels in the web chat widget.

• The default start flow is connected.

You can find your connected channel settings here:

Also, ensure the start flow is linked to any of your flows.

After making these changes, apply them, install the code, and test it on your website.

Ensure the pre-chat form is not enabled for this feature to work.

You should no longer need to click a button to start the conversation.

Greeting Messages

You can configure different greeting messages for various pages on your website.

These messages appear to first-time users.

You can find the greeting message settings below:

Specify which page(s) to trigger the greeting message and set the sender's name and profile.

Watch the video below for more details:

Settings

In the settings tab, you can customise the following options:

• Language

• Notification Sound

• Features

• Whitelist Domain

Let's explore each setting in detail.

Language

The language setting allows you to change the display language for certain sections within the widget.

Select the language on the left, and you'll see the changes reflected instantly in the preview on the right.

Notification Sound

This option lets you set the sound for new message notifications that users hear during conversations with your webchat widget.

Choose from 21 different sounds or opt for no sound if preferred.

Features

This option allows you to enable or disable specific features within your widget.

The available options include: Allow Emoji Picker -› Enables users to select from pre-set emojis. Allow Upload Attachments -› Lets users upload documents, images, or videos. Allow users to end chat -› Allows users to close the chat conversation. Allow popup Chat Window -› Enables users to switch the chat widget to a pop-up for a larger display. Allow to Continue Chat in Mobile -› Users can scan a QR code to continue the conversation on their phone, providing a seamless experience from computer to mobile. Enable Text Typing Effect → Displays responses word by word; if disabled, responses appear instantly. Allow Audio Recorder → Allows users to send audio messages.

• Allow Emoji Picker -› let users pick from pre-set emojis

• Allow Upload Attachments -› let users upload documents, images and or videos

• Allow users to end chat -› this option will allow the user to close the chat conversation.

• Allow popup Chat Window -› this allows users to change the chat widget into a pop up which results in a bigger display of the chat

• Allow to Continue Chat in Mobile -› Users can scan a qr code to continue the conversation on their phone. Smooth experience if they start on a computer and want to continue the conversation with your business while being in the road

• Enable Text Typing Effect → This will allow the response to show up word by word, if this is disabled, then the response will show up at once immediately.

• Allow Audio Recorder → Allows users to send audio messages

Whitelist Domain

To display the widget on your website, you must whitelist your domain. Simply add your root domain, and all subdomains will be automatically recognised.

Note that only one root domain is supported in the Omni-Channel.

Channels

The webchat widget enables users to seamlessly redirect to various platforms like WhatsApp, Facebook Messenger, Instagram, Telegram, and more. This feature ensures users can connect with you through their preferred channels, enhancing their experience.

How It Works

When users first access your webchat widget, they see a Get Started button along with different channel options, integrated via Omni Channels.

If a platform like WhatsApp is linked to an Omni-Channel and the user clicks the WhatsApp icon instead of the Get Started button, they are automatically redirected to that platform. This functionality is unique to Omni Channels, facilitating smooth transitions between communication platforms.

Where to Find It

To enable this feature, follow these steps:

1. Navigate to Webchat Widget Settings: Access the settings menu for your webchat widget.

2. Locate the Channels Option: Find the option labelled Channels in the settings.

1. Activate the Desired Channels: Toggle on the channels you wish to enable. Once activated, these channels will appear in the webchat widget, ready to redirect users as needed.

For Example:

We've linked a page with Flexito OmniAI for testing purposes:

Additionally, we have a test website where three channels are enabled, allowing users to select any of them.

What Happens When You Click a Channel:

Users clicking the Messenger Channel will be redirected to the Facebook page.

Appearance

These options let you customise your webchat to align with your brand colours and preferences.

You can choose from the following options:

• Theme

• Font

• Colours

• Start Chat Button

Theme

Themes allow you to customise the appearance of your webchat widget with pre-set values.

Available themes include: Standard Flat Facebook WhatsApp WeChat

• Standard

• Flat

• Facebook

• WhatsApp

• WeChat

These themes provide a familiar look and feel similar to platforms like Messenger or WhatsApp, creating a consistent chat experience.

As shown, this setup makes users feel comfortable starting a conversation with your business, thanks to the familiar experience.

Font

With fonts, you can completely transform the webchat widget's appearance to match your brand or create a unique experience.

Currently, you can choose from 25 fonts to personalise the webchat widget.

Colour

This option lets you change the colour palette of your webchat widget.

Customisable sections include: Widget Colour Bubble Icon & Text Colour Start Chat Button Colour Header Background Colour Body Background Colour

• Widget Color

• Bubble Icon & Text color

• Start Chat Button Color

• Header Background Color

• Body Background Color

Start Chat Button

This option lets you adjust the border radius of the "start conversation" button.

Alternatively, select the custom option to add your own radius, ensuring consistency with your website's buttons.

Display Style

The display style option offers multiple ways to use the webchat on your website. Let's explore the different options:

There are five main sections you can customise:

• Style

• Design

• Install Code

• Set Custom User ID

• Custom CSS

Style

Choose from four styles for using the webchat channel on your website.

• Floating Modal -› Displays a live chat icon at the bottom of your page

• Full Page () -› Embeds the chat widget as a full page

• Embed Chat Window () -› Displays the chat window anywhere on your page

• Popup Modal () -› Pops up a window with the chatbot conversation. Any element on your page can trigger it if you apply a class to it.

The best part is that you can install different web chat styles on different pages of the same website. Watch this video for more details:

Design

In the design tab, you can configure the conversation widget settings for the selected widget style. Below is an example of the embed chat window option:

Install Code

The install code generates your script for the desired chat widget style you want to make live on your page.

The installation code varies depending on the widget style you choose.

Here's an example of the embed chat window:

Set Custom User ID

Chat now allows users to pass bot user information from their website directly into the Omni-Channel bot by setting a custom user ID. This feature enables specific flows for guest users versus those who have provided their information, as well as fetching chat history and other user-specific flows previously unavailable.

Accessing the "Set Custom User ID" Feature

Within the OmniBot, click "Webchat Widget Settings," then the "Display Style" tab, and finally "Set Custom User ID."

The setup will appear as follows:

Special Key

The special key is a string set that Flexito OmniAI uses to decrypt the hash sent from your website. It verifies that the user is created from your website and is authorised and authentic.

Identifier Hash

The identifier hash is a string composed of the user ID you want to set, encrypted using the SHA256 algorithm with HMAC enabled. Flexito OmniAI verifies this hash to confirm and authorise requests from your website.

This hash must be created from your website's backend and sent in its encrypted form to Flexito OmniAI, or the request will be denied. Below is a sample PHP code for such encryption:

$identifier_hash = hash_hmac('sha256', $user_id, 'b02612a8bdf5e736c41ce (tel:)d124');

Snippet Code

Paste the code snippet in the same area where you place the bot's code snippet, i.e., in your website's header section.

The snippet code includes the payload for user details, along with the mandatory fields of user_id and identifier hash.

<script> window.addEventListener("chatbot:ready", function () { window.$chatbot.setUser("{user_id}", { name: "full name", email: " (mailto:)", identifier_hash: "{identifier_hash}" }); }); </script>

Here, you can enter custom user details such as name and email, and set the user_id.

Note: Replace the {user_id} and {identifier_hash} variables with the variables where you map the desired values.

1. Instructions

Copy the snippet code into your website's header, where the bot's code snippet is also placed. Replace the {user_id} variable with the custom user_id you want to assign. This value is typically fetched from your server or website's backend. Using the same user_id, create the identifier hash from your server or website's backend using the SHA256 algorithm with HMAC enabled. Copy both to the snippet code, then publish it live on your website. You'll then be able to create users with custom user IDs.

Custom CSS

You can add your own custom CSS to tailor the web chat interface.

Find the webchat widget CSS selectors here:

Advanced Section

The webchat button offers numerous customisation options, some of which are more advanced and are detailed in this section.

Installing Multiple Widget Types and Different Starting Flows on Your Website

The webchat widget allows you to install as many types as you want on any page within your domain.

After generating your desired widget type, you can add a ref parameter to it. This lets you start any flow you prefer with ease.

Creating Your Ref URL

You can create any type of ref URL within the tool section.

Once you've created your ref URL and connected it to your preferred flow, you can use this ref URL by copying the ref parameter.

Adding the Ref Parameter to Your Webchat Installation Code

Now that you've created your ref URL and copied the ref parameter, it's time to add it to your webchat installation script.

Here's how you do it:

If you've pasted your webchat installation script, simply add a question mark after .js, then add ref=, followed by your copied ref parameter from the ref URL you created.

This overrides the existing default starting flow, allowing you to start your preferred flow instead.

This approach lets you use the same widget on different pages but with different starting flows.

Possible use cases include:

• A landing page requiring a specific sales flow

• Customer support starting with a support flow

But there's more!

Using the ref URL parameter also allows you to add payloads to the widget.

Payloads let you add specific data directly to the user's custom fields without needing user input. For example, if you want to know which section of the website the user came from, such as a landing page, you can add this as a payload in the widget to be saved to the user profile.

Adding Payloads to the Webchat Widget

To add a payload, return to the ref URL used in the webchat widget.

You can add up to 10 payloads directly to the user's profile.

Let's take adding the source from which the user came, such as a page on your website, as an example.

In the first payload line, add the custom user field "traffic_source."

Remember to click the Save button in the top right corner once done.

When you return to your webchat installation script, you can now add your preferred data to the ref parameter.

For instance, if you've added this widget to your landing page, the traffic source could be the name of your landing page or whatever suits you. It might look like this:

To add a payload, use two hyphens followed by your value, such as "--ebook-7figure-income."

When a visitor interacts with this webchat widget on that page, this value will be added to their user profile.

You can save up to 10 different payloads this way.

Pre-Fill User Data for the Webchat User

If you already have user information like name or email, you can pass it directly to the webchat user.

Additionally, you can pass extra parameters directly to the webchat user's custom field.

Passing User Information

Use this script to pass user information to the webchat user.

<script> window.addEventListener("chatbot:ready", function () { window.$chatbot.setUser("XXXX", { email: "YYYYYY", name: "ZZZZ", avatar_url: "" }); }); </script> Ensure the userID XXXX is unique for each user.

Passing Extra Parameters to Webchat User

To pass extra parameters to the webchat user, use the code below.

<script> window.addEventListener("chatbot:ready", function () { window.$chatbot.setCustomAttributes({ user_fields: { provider: "XXXX", issue_title: "YYYY" } }); }); </script> Ensure the user custom field names match those in your Flexito OmniAI Chatbot.

In the example above, the names "provider" and "issue_title" are exactly as they appear in our chatbot.

Watch the video tutorial here to learn more.

Frequently Asked Questions:

1. Can I change the footer of the web chat widget? ()

2. Can webChat widget be opened by default without click? ()