Online chat for a website

By installing an online chat on your website, you can collect client data and automate communication with visitors directly on your site.

You can also connect your sales team to the chat, enabling managers to join client conversations. Communication can take place either through the MaviBot web interface or via our mobile apps for Android and iOS.

How to create an online chat

To create a chat, go to the "Messengers" section and click the "Online chat" button.

Once you click the "Online chat" button, the settings panel for your newly created chat will open automatically.

The appearance of the chat will depend on your chosen settings. On the right side, you’ll see a live preview of the chat widget, which you can open and close to test how it looks and behaves.

Settings

Decoration

  1. Chat title

This field sets the name of the online chat — it will appear at the very top of the chat window.

  1. Chat subtitle

This field is located below the chat title and allows you to clarify the role or purpose of the online chat on your website.

  1. Specified widget label

The label on the widget button is displayed when the online chat is minimized. By default, it shows the text from the title and subtitle fields, but you can set a different label if needed.

  1. Welcome chat message

This field contains the text of the bot’s initial greeting message

  1. Text orientation

Using the text alignment toolbar, you can align the chat's title and subtitle to the left, right, or center—just like in standard text editors.

  1. Chat button

This button is designed to open the online chat when clicked.

You can choose how the online chat button will appear on different devices: the website’s desktop

There are several display options available. You can position the button on either the right or left edge.

  1. Color palette

To customize the online chat to your liking, you can not only adjust the color but also display interesting patterns in the chat background and header.

You can also choose the color and brightness of the patterns as well as other elements of the online chat. To do this, enable the "Advanced settings" checkbox.

You can also configure additional advanced color settings for the online chat.

  1. Online chat avatar

This option allows you to change the assistant’s avatar in the online chat. The avatar can be added either via a URL or by uploading a file.

You can also hide the chat avatar by enabling this checkbox, if needed.

  1. MaviBot logo

The settings allow you to display the MaviBot logo.

Settings

  1. Text inside the input field

By default, this field contains the text: "Enter your message and press Enter."

You can customize this text or leave the default.

  1. Inscription in the mobile verison

By default, the text is set to: "Choose your preferred contact method."

  1. Message when assigning an operator to a client

If you include #{operatorName} in this field, the operator's name specified in the "Employees" section will be displayed.

You can assign an operator manually by clicking the "Take client" or "Transfer client" button during a client conversation. Alternatively, you can configure automatic client distribution among operators in the "Employees" section.

  1. Message when operators offline

By default, the following message will be displayed: "No operators are currently online. Please leave us a message, and we will get back to you as soon as possible."

The "Online" status for the bot is taken from the "Employees" section. Possible statuses are: Online, Break, and Offline.

You can also change your status from the top bar while in any section of the project

  1. Sound notisfaction in online chat

These settings allow you to enable or disable sound alerts for chat opening and new messages in the online chat for website visitors.

  1. Display messenger

You can choose which messengers are displayed on the website when hovering over the online chat widget (icon).

  1. Show only messagers

If you enable this toggle, only the messenger buttons will appear on the website. All other online chat functions will be disabled!

  1. Messenger text

By default, it is set to: "Write to".

  1. WhatsApp Start Message

This text will appear in the input field for the user in WhatsApp when they click the button on your website. The user will just need to press "Send."

Be sure to also include this text in the conditions of the starting block of your message sequence.

  1. Custom links

In addition to messenger buttons, you can now add your own buttons with custom links.

You can specify the URL for the link and add an image in the settings.

  1. File upload

This setting allows you to receive attachments from website visitors, such as images.

  1. User data

In the first message, you can obtain consent for personal data processing and/or collect user information through a data collection form. You can also set or change the email address via the welcome window.

Filling out the form can be optional or made mandatory by enabling the "Make form filling mandatory" toggle.

Example of the first message with data collection.

After configuring the form, you can select the country display settings using a dropdown field.

  1. Callback request

The "Callback request" checkbox appears in the online chat settings if Telephony is enabled in the project.

How it works

When filling out the form, the user can check the box to request a callback. In that case, one of the employees with telephony enabled is automatically selected, and a call is made to the client.

The employee is assigned automatically. When selecting an employee, the following are checked:

  • Status: On Shift

  • Any role, including Administrator

  • Telephony is enabled (configured) for the employee

After the call, this employee will be assigned as responsible for the user.

  1. Request consent for personal data processing

This option is disabled by default. When enabled, a message saying "I give consent for personal data processing" along with the "Confirm" button will appear the first time the online chat is launched.

Example of the first message to obtain consent for personal data processing:

  1. Start button settings

Clicking the "Add button" opens the form to create a start button:

The button can have one of the following functions:

  • Link. Allows you to add a URL to navigate to another page on your website or an external web resource.

  • Email. The client will be redirected to his email service to send a message to the email address specified in the button settings.

  • Phone. The call app launches, or the user is prompted to choose an app to make the call — depending on the device uses. The call goes to the number specified in the button settings.

  • Message (from administrator / user) — this feature allows the bot to send quick replies when clicking a button.

For example, you can create a button named "Address," and in the "Message" field, specify the exact address and office hours.

The text in the "Message" field will be without line breaks. Please take this into account when working.

  • Separate clients from different domains. This setting allows separating conversations if the same person writes in the online chat hosted on different domains. By default, it is treated as the same conversation.

This toggle is necessary if different online chats are installed on different websites within the same domain and you need to separate conversations when the same person writes.

  • Buttons in the text will be displayed in the online chat history (toggle). Enable this option to show buttons from the funnel builder’s text in the client’s online chat history.

  1. Hide the online chat

It’s not necessary to remove the online chat from the website. You can simply hide it using the corresponding toggle.

Automatic actions

The way automatic actions work is as follows: for an automatic action to be triggered, a specific trigger condition must be set for that action.

First, set the conditions for when the custom action should be executed. You can add conditions based on the time of day, visitor’s country, city, current page URL, and so on.

More about conditions:

  1. Current time. Set the automatic trigger of the online chat depending on the time period when the client interacts with the chat (for example, during happy hours after 4:00 PM, a visitor to your landing page may receive a discount).

  2. Perform this action only once per day for the user. This condition can be applied in various cases: for example, to send affiliate or other links in messages from the administrator/user (such as access to new course materials); for a loyalty or accumulation system; and so on.

  3. User city / User country. By setting this condition, you can target the specific group of users who would benefit from your service— for example, when a client’s physical presence is required to purchase a product or service.

In this case, you can set the condition to either equal or not equal. For example, if you need to specify a city or country (or a list of countries) for which the automatic action should not be triggered, choose "not equal."

  1. The day of the week. This condition serves as a trigger for automatic actions based on the day of the week. You can select checkboxes next to the days of the week, set the condition to equal or not equal, and choose the automatic action to be performed by the online chat.

For example, you can set all the working days of your operators/managers to enable their further contact with clients.

  1. URL of the current page. The automatic action will trigger depending on whether the URL contains/does not contain or equals/does not equal a specified link.

  2. User message. To trigger the automatic action under this condition, the field must contain a specific word from the user.

  1. Time on page. This condition is similar to time of day; however, if your client database is spread across different time zones, you need this automatic action to occur at the same local time for each time zone.

  2. Time since MAviBot window was closed. This condition is set similarly to time of day or time on page but depends on the user’s action of closing the Salebot window.

  3. Time since visitor’s first message. The automatic action will trigger after a specified period (in seconds) following the client’s first message in the online chat.

  4. Time without operator response since user’s first message. This condition is also set in seconds and triggers regardless of whether the operator has replied to the client or not.

If needed, conditions can be combined, allowing the automatic action to trigger based on multiple criteria:

Next, choose which action the online chat should perform automatically:

  1. Automatic chat opening. This action automatically opens the online chat for the user. No additional configuration is required.

  2. Automatic invitation to chat. This automatic action sends the user a predefined message entered in the corresponding field. You can also hide the message input field using the checkbox with the same name, if needed.

  3. Hide the online chat icon from a website. This action can be used, for example, after your administrators’ working hours have ended.

  4. Show the online chat icon. Similar to the previous action, this allows you to display the chat icon for clients during a specific time period (or based on other necessary conditions).

  5. Send message as administrator. This action sends a message in the online chat under the administrator role.

  6. Submit a form. This action is used to collect client data. You can customize the form text, select the required input fields (such as name, phone number, email, checkbox, or any other input field you configure manually).

You can configure a custom input field. For example, to collect the client’s city of residence or any other relevant information.

Banners

You can add clickable banners to the chat's startup window in the "Banners" tab. Let's proceed to the settings.

  1. Click on "Add banner".

  1. Upload an image.

To make the banner clickable (allowing your client to follow a link when clicking on it), enter the URL in the corresponding field.

Next, sspecify the banner's title and subtitle if needed.

Enter the title and subtitle, then click "Save".

The banner will then appear in the online chat widget.

To disable a banner (stop showing it in the online chat), toggle the switch to the inactive position.

To edit or delete a banner, click Edit.

Quality rating

There is an additional settings section in the online chat called "Quality control". To enable this feature, go to the corresponding tab in the settings.

The functionality offers a choice between three quality rating scales: five-point, three-point, and two-point.

Enter the text that will appear before the rating in the corresponding field.

There is no default value in this field. If you leave it empty, the following text will appear on the quality rating banner.

You can also specify a custom name for the customer feedback field.

To do this, simply enter your own text for the field name, as well as a placeholder text inside the feedback field. By default (see the example above), the purpose and text of each field are already set for your convenience.

You can also enable a checkbox to make the customer’s feedback comment mandatory.

Next, you can fill in the feedback message that will be sent to the client after a positive or negative review. To see how the final online chat message appears after submitting a rating, click the button in the chat to send the rating.

"User can rate the chat" checkbox

In the "Clients" section, the operator can end the dialogue during a conversation with a user. If this checkbox is enabled, the user will be able to provide a rating.

The operator can click the "End conversation" button during a conversation with a user. This will open a confirmation form for the operator's action:

If an email service is connected in the channels, options to send messages via email will appear.

After the operator ends the conversation, a quality rating form is sent to the user, and the rating itself is recorded in Analytics.

If the client does not leave a rating, the statistics will show "User did not leave a rating."

How to add the online chat to your website

To embed the online chat on your site, simply copy the script from the Code tab and paste it into your website’s HTML.

Copy the online chat code.

Next, go to the "Sites" section and click on the tile of the site where you want to place the online chat widget.

Then, proceed to Site editing.

And go to the site settings.

In the Colors, Fonts & HTML section, paste the copied online chat code into the HTML code head field.

Paste this code on every page of your website, inside the <head> tag.

The online chat is now successfully connected to your website.

Sending a form for clients to fill out

The online chat also includes a feature that allows you to send a form to clients in order to collect user information and add him to the system for further interaction.

Such a form is sent using the online_chat_send_form() function, which takes the following parameters:

  1. name;

  2. phone;

  3. privacy;

  4. callback (this parameter works only if telephony is integrated into the project);

  5. age;

  6. email_group_ID (if you include this parameter with an email, a client email will be created and linked to the chat user);

  7. wa_group_ID (if you include this parameter with a phone number, a WhatsApp contact will be created and linked to the chat user).

  8. If a non-existent group is specified, the form will be sent, but the client will not be created.

Important

Notification that will appear in the chat after the form is submitted

The data submitted via the form is saved in the client’s variables. You can see more details about these variables below in the online client’s profile.

! online_chat_send_form(arguments, texts)

It takes two required arguments.

arguments - parameter string

texts - form name

For example, in the calculator, you can enter it like this: online_chat_send_form("name,phone", "Hi, please fill out the form.").

Example of the online chat response.

Last updated