Table of Content
- Creating, Managing & Integrating Chat Buttons (separate article)
- Overview section
- Online scenario section
- Offline scenario section
- Online button section
- Chat window section
- Pre-chat form section
- Offline button section
- Contact form section
Each LiveAgent chat button can be vastly configured to meet your needs and match your company branding. In this article, we've covered a detailed overview and description of each available setting and field in a chat button's settings.
Overview
In this configuration section you can name your button, select the department that will handle the chat initiated via this chat button, and choose the language used in the button.
Name - This field allows you to define the name of the chat button to distinguish it from the others in the list of chat buttons.
Goes to - The field allows you to select the department to which by default chats initiated via this button will be routed. This setting is bypassed if the "Let visitor choose department" option is active in the pre-chat form or contact form fields section of the chat button.
Language - This field allows you to select in which language the chat button's elements are displayed. Custom texts defined across the chat button's configuration sections are not automatically translated to the selected language.
Online scenario
In this configuration section you can define the workflow of the chat button in an online scenario when there is an agent available for chats in the button's department.
Queue threshold to trigger the offline scenario - This field allows you to define the number of how many chats must be in the button's departmnet chat queue to follow the offline scenario instead. The Edit button redirects to the Online button configuration section.
Request information by pre-chat form, when chat buton is clicked - This setting allows you to display a pre-chat form and require various infromation from the visitor before intiating the chat.
Chatbot - This field allows you to select whether a visitor should be connected to an available chatbot after initiating the chat before reaching out to a human agent or not.
Enable to Leave offline message directly in chat window - This option allows the visitor to end the chat and leave an offline message while waiting in the chat queue. Leaving an offline message opens the customer's ticket created from the chat.
Offline scenario
In this configuration section you can define the workflow of the chat button in an online scenario when there is an agent available for chats in the button's department.
When there are no human agents available to handle chats - this field allows you to select when there are no agents available for chats in the button's department whether the chat button should be hidden, display an offline button, or show online button with a chatbot.
Request information by pre-chat form, when chat buton is clicked - This setting allows you to display a pre-chat form and require various infromation from the visitor before intiating the chat.
Chatbot - This field allows you to select the available chatbot to which a visitor should be connected after initiating the chat. The visitor cannot be transferred to a human agent while the chat button is in offline scenario.
Enable to Leave offline message directly in chat window - This option allows the visitor to end the chat and leave an offline message instead. Leaving an offline message opens the customer's ticket created from the chat.
Online button
In this configuration section you can adjust the apparance of your chat button in online state.
Animation - This field allows you to select a short animation applied to the online chat button when the button is displayed on the page.
Position - This setting defines the position of the chat button on the page. The available positions vary depending on the chat button type.
Z-index - The z-index value specifies the stack order of the online chat button on your website. An element with a greater stack order is always displayed in front of other elements with a lower stack order. It is recommended to enter a higher number to avoid issues with displaying the online chat button behind other elements of your website.
Appearance on mobiles - This setting allows you to select whether the online button shall be on mobile devices displayed without changes, be scaled down, or not displayed.
Hover effect - This option allows you to select a short animation applied to the online chat button when a visitor hovers over it with cursor.
Other customization elements - Below the fields common for each online chat button there are also additional fields available to adjust the colors, gradients, texts, or images of the button. The available elements vary based on the selected button type. All the text fields support HTML code for further adjustments.
Chat window
In this section you can configure the settings of the chat window displayed to the visitors and adjust its design.
Title - This field sets up the title of the chat window, if applicable. The title is displayed only if specific chat window styles are selected.
Welcome message - This setting allows you to define an initial welcome message that is automatically added to the chat when an agent picks it up. The welcome message allows you to use variables listed below this field to automatically populate various information.
Enable hiding welcome message - This checkbox allows you to decide whether the welcome message should be added to the chat every time when an agent picks it up or to skip it if a message from the visitor was already added before an agent picked up the chat, including the message written in the pre-chat form.
Hide start chat again button - This setting allows you to disable the "Start chat again" button that is by default displayed to the visitor once a chat ends.
Enable leaving offline message - With this option enabled your visitors can choose to leave an offline message instead while waiting in the queue for an available agent.
Z-index - The z-index value specifies the stack order of the chat window on your website. An element with a greater stack order is always displayed in front of other elements with a lower stack order. It is recommended to enter a higher number to avoid issues with displaying the chat window behind other elements of your website.
Style - The pre-defined design style of your chat window. The selected style defines the overall design of the chat window and other available customization elements.
Position - This setting defines the position of the chat window on the page. The chat window can be either positioned as an embedded element to one of the bottom corners or docked to the left or right side, or popped up into a new window.
Size - This setting allows you to set up the width and height of the chat window when embedded to the bottom right or left corner or the pre-defined size of the popup window.
Other customization elements - Below the fields common for each chat window there are also additional fields available to adjust the colors of the chat window elements. The available elements vary based on the selected chat window style.
Custom CSS - In this section you can define custom CSS styles that will be applied to the chat window. Click on the "set custom CSS" to access the "Custom CSS" window. The custom CSS is applied to the whole chat window regardless of the selected style.
Pre-chat form
In this section you can configure the settings of the pre-chat form, displayed to the visitors after clicking on the online chat button before initiating the live chat.
This section and its sub-sections are available only if the "Request information by pre-chat form, when chat button is clicked." option is active in Online scenario and/or Offline scenario configuration sections.
Logo - This option allows you to upload the logo of the pre-chat form, if applicable. The logo is displayed only if specific pre-chat form styles are selected.
Title - This field sets the main title of your pre-chat form.
Knowledgebase - This setting allows you to suggest the visitor a set of articles from your knowledge base to check before initiating a chat. Enabling this setting adds the "Suggested articles" button next to the main "Chat" button on which visitors can click to view the proposed knowledge base articles. The article is loaded directly in the pre-chat form with an option to open it in a new tab.
The list of suggested articles changes based on the text that the visitor enters into the Message field. If the Message field is not available, the list displays the most viewed articles.
Extend the knowledge base search with the source page title, keywords, and description - By enabling this option you can extend the search of the knowledge base articles suggesting function to include not only the content of the articles, but also their title, keywords, and descriptions in the search.
Description - This field allows you to insert additional description below the title of your pre-chat form. The Description field supports HTML code for further adjustments.
Pre-chat form Design
In this section you can adjust the design of the pre-chat form.
Position - This setting defines the position of the pre-chat form on the page. The chat window can be either positioned as an embedded element into the center of the page, to one of the bottom corners,docked to the left or right side, or popped up into a new window.
Size - This setting allows you to set up the width and height of the pre-chat form when its position is set to centered, embedded to the bottom right or left corner, or the pre-defined size of the popup window.
Page blocker - Enabling this option allows you to block the content of the page behind the pre-chat form while the form is displayed.
Z-index - The z-index value specifies the stack order of the pre-chat form on your website. An element with a greater stack order is always displayed in front of other elements with a lower stack order. It is recommended to enter a higher number to avoid issues with displaying the pre-chat form behind other elements of your website.
Style - The pre-defined design style of your pre-chat form. The selected style defines the overall design of the form and other available customization elements.
Other customization elements - Below the fields common for each pre-chat form there are also additional fields available to adjust the colors of the form elements. The available elements vary based on the selected pre-chat form style.
Custom CSS - In this section you can define custom CSS styles that will be applied to the pre-chat form. Click on the "set custom CSS" to access the "Custom CSS" window. The custom CSS is applied to the form for each pre-chat form style separately.
Pre-chat form Fields
In this section, you can customize the fields of your pre-chat form. You can let visitors choose the department which they want to reach out by activating the "Let visitor choose department" option. With this option active, you can decide which departments visitors will be able to contact and set up different fields for each available department.
Offline button
In this configuration section you can adjust the design of your chat button in offline state.
This section is available only if the "Show offline button" option is selected in the Offline scenario configuration section.
Animation - This field allows you to select a short animation applied to the offline chat button when the button is displayed on the page.
Position - This setting defines the position of the offline chat button on the page. The available positions vary depending on the chat button type.
Z-index - The z-index value specifies the stack order of the offline chat button on your website. An element with a greater stack order is always displayed in front of other elements with a lower stack order. It is recommended to enter a higher number to avoid issues with displaying the button behind other elements of your website.
Appearance on mobiles - This setting allows you to select whether the offline button shall be on mobile devices displayed without changes, be scaled down, or not displayed.
Hover effect - This option allows you to select a short animation applied to the offline chat button when a visitor hovers over it with cursor.
Other customization elements - Below the fields common for each offline button there are also additional fields available to adjust the colors, gradients, texts, or images of the button. The available elements vary based on the selected chat button type. All the text fields support HTML code for further adjustments.
Contact form
In this section you can configure the settings of the contact form, displayed to the visitors after clicking on the offline chat button instead of starting the live chat.
This section and its sub-sections are available only if the "Show offline button" option is selected in the Offline scenario configuration section.
Logo - This option allows you to upload the logo of the contact form, if applicable. The logo is displayed only if specific contact form styles are selected.
Title - This field sets the main title of your contact form.
Knowledgebase - This setting allows you to suggest the visitor a set of articles from your knowledge base to check before submitting a ticket. Enabling this setting adds the "Suggested articles" button next to the main "Send" button on which visitors can click to view the proposed knowledge base articles. The article is loaded directly in the pre-chat form with an option to open it in a new tab.
The list of suggested articles changes based on the text that the visitor enters into the Message field. If the Message field is not available, the list displays the most viewed articles.
Extend the knowledge base search with the source page title, keywords, and description - By enabling this option you can extend the search of the knowledge base articles suggesting function to include not only the content of the articles, but also their title, keywords, and descriptions in the search.
Description - This field allows you to insert additional description below the title of your pre-chat form. The field supports HTML code for further adjustments.
Confirm message - In this field you can adjust the confirmation message displayed to the visitor after submitting the contact form. The field supports HTML code and allows you to use variables listed below this field to automatically populate various information.
Contact form Design
In this section you can adjust the design of the contact form.
Position - This setting defines the position of the contact form on the page. The contact form can be either positioned as an embedded element into the center of the page, to one of the bottom corners,docked to the left or right side, or popped up into a new window.
Size - This setting allows you to set up the width and height of the contact form when its position is set to centered, embedded to the bottom right or left corner, or the pre-defined size of the popup window.
Page blocker - Enabling this option allows you to block the content of the page behind the contact form while the form is displayed.
Z-index - The z-index value specifies the stack order of the contact form on your website. An element with a greater stack order is always displayed in front of other elements with a lower stack order. It is recommended to enter a higher number to avoid issues with displaying the form behind other elements of your website.
Style - The pre-defined design style of your contact form. The selected style defines the overall design of the form and other available customization elements.
Other customization elements - Below the fields common for each contact form there are also additional fields available to adjust the colors of the form elements. The available elements vary based on the selected contact form style.
Custom CSS - In this section you can define custom CSS styles that will be applied to the pre-chat form. Click on the "set custom CSS" to access the "Custom CSS" window. The custom CSS is applied to the form for each pre-chat form style separately.
Contact form Fields
In this section, you can customize the fields of your contact form. You can let visitors choose the department which they want to reach out by activating the "Let visitor choose department" option. With this option active, you can decide which departments visitors will be able to contact and set up different fields for each available department.