Increase Your Brand Identity With Customized Live Chat

This document is your guide to tailoring the live chat widget to match your brand's visual identity. You'll discover how to customize the chat window's look, from colors and fonts to logos, ensuring a consistent brand experience for your website visitors.

In the Channels section, you'll explore three distinct live chat modes that can be installed on your website:

• Live chat widget mode
• Form Chat mode
• Landing chat mode

To start customizing the live chat, simply head to the Channels in your navigation bar.

💡 You must be the account owner or admin to configure these options in the channels

Set up live chat widget mode

The live chat widget mode appears as a chat window positioned at the bottom right corner of your website. This convenient feature allows your customers to start conversations with your staff by simply clicking on the launcher icon.

Here are 5 simple steps to set up your live chat to make it more attractive:

Step 1: Style your live chat appearance

You can easily customize the live chat style to suit your brand with the theme color, header and description text, team avatar, launcher avatar, and live chat position.

Go ahead and pick a theme color that matches your website's main shade. This way, your live chat will stand out and catch your customers' eyes, prompting them to take action.

The live chat theme colors will affect various elements, such as:

• Headings in your live chat
• Buttons
• Customer response
• Live chat launch icon

Custom live chat position

Decide where the chat widget should be placed on your website. You can choose between left and right. It is also possible to define the spacing between your chat widget and corresponding bottom and side edges.

Choose the chat button type

You can customize the appearance of the chat window when it is minimized to a chat button. You have the options to choose Icon only, Text only, or Text & Icon.

Choose who will send the message

If you'd like the customer to see the agent's avatar (instead of the team avatar) during conversations, just turn on the Show member avatars option. This way, the avatar of the responding agent will be displayed.

For a seamless brand experience, you can disable the Show Chative branding option to remove our branding from the chat widget.

💡 This feature is available exclusively in our paid plans.

Step 2: Set up welcome message behavior

Say hello with the welcome message! It's the first thing your customers will see when they start chatting with your website's live chat. To make that great first impression, you can adjust its text, pop-up style, and even set up pre-replies for them:

Show chat window

By enabling this option, the live chat window will automatically open whenever the customer comes to your website.

💡 The Show chat window is specific to the full welcome message window.

Welcome message

Next, you can select a display mode for the welcome message from four available versions, and then edit its title and description in the message section.

If you prefer to hide the welcome message, select the first option. For the remaining three choices, let's see how they appear in the real environment in the table below:

Reply suggestion

Reply suggestions provide pre-made answers for your customers, enhancing the appeal and user-friendliness of your chat interaction.

💡 Even after enabling the Show agent avatar option in the Appearance setting, reply suggestions will still be sent under the team avatar.

Set timing for welcome message

You can control when the welcome message appears and whether it includes sound notifications.

Choose to display the welcome message immediately when visitors enter your website or set a delay time for it.

Step 3: Identify potential customers

With Chative.IO, you can now smoothly qualify your leads and convert them into customers right from the start of the conversation, using a simple form. This feature allows you to gather essential customer details like name, phone number, email, and more.

For various purposes, you have three display options for this form:

• Disable: Turn off the lead identification form.
• Enable and non-skippable: All visitors must complete this form before engaging in a conversation.
• Enable and skippable: Visitors can either share their information to become a lead or simply proceed as a guest by selecting Continue as guest option

💡 Once a lead provides their details, the information will be included in their profile.

Step 4: Set up live chat language

Chative.IO provides multilingual live chat capabilities covering 170 languages, allowing you to connect with customers and engage in various languages.

The system adapts to the customer's browser language for the corresponding system language. You can adjust two language types:

• Live chat appearance language: You can select preferred language for header text, welcome messages, and more. To display live chat in additional languages, you can simply add more languages.
• Live chat system language: Customize texts such as "Enter your message," "Enter your name," and more within the Translation settings.

💡If the language you set up doesn't match the customer's browser language, the system language will automatically revert to the Preferred language.

You can read this document for more details on how to set up a multilingual live chat.

Step 5: Set up live chat notification

Notifications play a vital role within the live chat system. Particularly from the customer's perspective, they prevent interruptions during conversations and ensure prompt awareness of staff responses.

Therefore, we highly recommend configuring the following settings to enhance your customers’ experience:

• Blink browser tab: Enable tab blinking upon the arrival of unread messages.
• Unread message popover: Allow unread messages to be visually highlighted through automatic pop-ups.
• Pop up disappear after: Determine how long the unread message popover stays visible.
• Place red circle dot: Notify customers of unread messages by displaying a red circle dot above the live chat launcher icon.