In this document, you’ll find everything you need to customize your Chative 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


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.




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 BotStar branding option. 


Note: This option is only available on Chative 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:




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.


For more detail on how the welcome message and reply suggestions will be displayed in each version, you can check out this table:


Display versionWelcome messageWelcome message + Reply suggestion
Disable the welcome message


Note: 
  • 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 Chative, 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 name, phone number, email, and GDPR Compliance agreement. 



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 Chative 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


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



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.



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.



Set up Chat as the content mode


Besides having the live chat appear at the bottom left corner of your website, Chative also allows you to add the live chat directly inside the website content using our Chat as the content mode.


In the Chat as the content mode, you can set up most of the settings in the live chat mode except for:
  • The position option (left / right) in Appearance section
  • In the Notification section, only the "Blink browser tab" is available 


Furthermore, in this mode, you will be able to change some elements in the appearance such as background, height, etc.


Follow the steps below to set up your Chat as the content live chat mode:


1. From your navigation bar, go to Channel and create a Chative Web Chat channel.


2. Set up the appearance, language, and notification.


3. Go to the Chat as the content section.


4. Style your live chat with:
  • Chat background: The chat background's color. We recommended choosing the colors that show your Brand or match the Website.

  • Display header:  The live chat header shows the bot name and avatar
  • Fix height: The height of the live chat
  • Composer mode:
    • Interaction mode: Only show reply composer after an agent's message to prevent the user from typing messages.
    • Static mode: Always show reply composer


5. Click the Save button for the changes to be applied



Set up Chat as the landing page mode


The last type of Live chat is Chat as the landing page mode, this mode allows you to put the live chat to be displayed on an individual page without publishing it into any website.



Chat as the landing page setup will have all the settings like in the live chat normal mode. But in the Notification section, only the "Blink browser tab" option is available


After you have set up the live chat appearance, behavior language, lead identification, notification, you can also set up the whole webpage appearance to make it more attractive. 


Please follow this guideline customize the Chat as the landing page live chat mode:


1. From your navigation bar, go to Channel and create a Chative Web Chat channel.


2. Set up the appearance, language, and notification.


3. Go to the Chat as the landing page section.


4. Go to the Appearance section and style your live chat content with:
  • Chat background: The chat background's color. 
  • Display header:  The live chat header shows the bot name and avatar
  • Composer mode:
    • Interaction mode: Only show reply composer after an agent's message to prevent the user from typing messages.
    • Static mode: Always show reply composer


5. Customize your Page Content with:

  • Page Theme: There are two types of theme that you can choose which are:
    • Gradian: Your page background will be the color you choose.
    • Image: The image you choose will be the background. And if you choose this option, you will be able to add a layer filled with a solid color in the Background image color mask option.
  • Page logo: The web page logo, which is like the "Disney" logo in the example above.
  • Page description: The description for your live chat. 
  • Landing page URL: The webpage link.


6. Click the Save button for the changes to be applied


Note: the Background image color mask option will only appear when you choose to add an Image in the Page Theme



Once you're done with this procedure, you're ready to complete the steps described in adding Web Widget to your website. Let's check it out!