Skip to main content

Customize live chat for your brand

In this document, you’ll find everything you need to customize your ChativeIO web chat. To customize the live chat, please go to the Channel settings in your navigation bar. Inside Channel, you'll see three types of live chat modes that you can choose to install on your website:

Note:

  • You must be the account owner or admin to configure these options in the channels
  • As you begin to customize your live chat, you’ll see a preview of your changes on the right-hand side of your screen.

Set up Live chat widget mode

Live chat widget mode in the chat window in the bottom right of a website. Whenever your customers visit your website, they will be able to start the conversation with your staff by clicking the live chat icon.

Conversation in livechat!

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.

Customize livechat appearance!

We would recommend you to choose the theme color that consists of your website's main color so that your customers can get more impressions on your live chat to take action.

The colors of the live chat theme will affect a number of items, like:

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

Choose who will send the message

In case you want the agent avatar (not the team avatar) to appear while chatting with the customers, you can enable the option Show agent avatar. After that, the message will show the avatar of the agent who responds to them.

And for a consistent brand experience, you can remove our branding from the chat widget by disabling the Show ChativeIO branding option.

Note: This option is only available on ChativeIO Pro plans

Step 2: Configure welcome message behavior

The welcome message is the first message that your customers will see when they want to kick off a conversation with your live chat on your website. So to make a good first impression, you can adjust its text, pop-up mode, and even make pre-replies for them:

Customize message behavior for livechat!

Automatically expand

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

Welcome message

Next, you can choose the display mode for this welcome message between four versions, then edit the welcome message title and description in the message section.

If you don't want the welcome message to show up, please choose the first version. About the other three versions, let's see how they appear in the real environment in the table below.

Reply suggestion

The reply suggestions are messages with ready-made answers for your customers. They make your chat invitation and appearance more engaging and user-friendly.

There are many different way to style display your live chat widget and the welcome message and reply suggestions:

  
livechat widgetlivechat widget with reply suggestions
  
livechat widgetlivechat widget with reply suggestions
  
bigger livechat widgetbigger livechat widget with reply suggestions

💡 The live chat will send the reply suggestion under the team avatar even after enabling the Show agent avatar option in the Appearance setting.

💡 The Automatically expand only applies to the full welcome message window.

Step 3: Identify potential leads

With ChativeIO, now you can qualify your leads and convert them to customers more easily at the beginning of the conversation with a simple form. It helps you collect customers' basic information such as namephone numberemail, and GDPR Compliance agreement.

Customize to identify potential leads!

For different purposes, here are three options you can choose to display this form:

  • Disable: Disable the lead identification form.
  • Enable and non-skippable: Every visitor needs to fill in this form to start the conversation with your business
  • Enable and skippable: Visitors can choose to leave their data to become your business's lead or start the conversation like a normal guest by clicking Continue as guest option.

Note:

  • Check out our documents here about the type of Contacts in ChativeIO to understand how we evaluate customers
  • After a lead leaves their details, the data will be added to their profile, which can be found in the Contact

Step 4: Set up Live chat language

ChativeIO supports multilingual live chat for up to 170 languages. You can have a live chat in different languages to enhance your customer experience.

Set up live chat language!

The system will base on the customer browser language to give out the corresponding system language. There are two types of language you can adjust, which are:

  • Live chat appearance language: You can add another language for the header text, the welcome message,... which you have set up in the steps above. All you need to do is click the + Add language button > click the eye icon until it turns green > start to edit the text
  • Live chat system language: The text such as "a moment ago", "type here",... All of these texts can be edited in the Translation section in your Account Settings.

And if your language is Right to Left language, then you can change the text direction into Left to RIght in the Text direction option. However, if your live chat is a multilingual one and has both types of directions, then we suggest that you choose the third option Automatic Detection.

Note:

  • If the language you set up doesn't match with the customer's browser language, the system language will automatically default as 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

Notification plays an important role in the Live chat system. Especially under customer view, it keeps customers not dropping in the middle of conversations and allows them to get noticed about the staff response.

Set up live chat notification! "Set up live chat notification")

Therefore, we recommend you to do these set up so your customers could have better experiences:

  • Blink browser tab: Blink the browser tab when unread messages arrive
  • Unread message popover: Let the unread message become visual by having them automatically pop up
  • Pop up disappear after: The timing for the Unread message popover
  • Place red circle dot: Let customers know there are unread messages by showing a red circle dot above the live chat launcher icon.