This tutorial summarizes how to customize your chatbox while sharing best practices. The steps are detailed in the rest of the article.

1. Set up your chatbox

Go to Engagement > Notifications & Chatbox

NB : Your chatbox is unique, but you can set up as many notifications as you like to engage your visitors.

2. Customisation

2.1 Style

• Add your colours
• Choose the font which fits your graphic layout

• Choose your chatbox position (how far from your website page borders). You can also customise its position on mobile devices.

2.2 Header

This video summarizes the challenges of customizing the chatbox and especially its header, which greatly influences the experience of visitors to your site:

• Customise your chatbox header by displaying the average response time or your operator's presence thanks to a green or red dot.
• Humanise even more your visitors' conversational experience since your agents' avatar, name* and role are displayed.

How to enable these new features?

There are two available header displays :

• a "before conversation" display, when the visitor has clicked on the notification but has not sent his first message yet.
• and a "during conversation" display when the visitor has already sent his first message and received a response from an operator.

Each display can be customised. 

2.2.1 Before a conversation

• You can display 1, 3 or 0 avatars. We provide you with some avatars or you can upload your own ones:

• You can customise the header text which is displayed during office and out of office hours. By default, you can display an average response time ranging from a few minutes or a few hours. You can also use the "Custom Message" field to suggest "Max. response time: 4 hours", "Customer service opened Mon - Fri, 9 am until 6 pm" for example.

2.2.2 During a conversation

• Once the conversation has started, you can display your agent's avatar or select a default one*. We provide you with some avatars or you can upload your own ones.

• Type in the text to display under your agent's name.

2.3 Conversation thread

• Enable or disable the display of your agents'/experts' avatar when the chatbox is opened (the avatar which has been added when their profile has been created). You can also choose a default avatar that will be used for the welcome message only or for the whole conversation thread.
• Customise the automatic messages wordings

• Enable the option which allows visitors to access their conversation history

The visitor will also have the possibility to send other the history of the ongoing conversation by email. To do so, he will have to click on the button at the top right of the chatbox.

Then, he will be able to fill in his e-mail.

2.4 Composition box

• Customise the composition box wording which encourages the visitor to send you a message
• Enable the option which allows visitors to send images (png, jpg, gif) or PDF documents

2.5 Reduced chatbox

• Customise your reduced chatbox icon style and light or dark-coloured effect
• Customise your reduced chatbox design (shape and size)

2.6 E-mail

In this area, you can customise the e-mail template which is sent out to visitors when they requested to receive their conversation history or when the agent answered a chat conversation in asynchronous mode.

• Fill in your brand name
• Upload your logo
• Choose to hide the conversation content
• Fill in your website URL on which your visitors will be redirected when clicking on the appropriate link in the e-mail. The iAdvize tag must be integrated into this URL.
  
  

3. Save your chatbox

You can download the practice sheet below: