Table of Content
- Chat Buttons Overview (separate article)
- Chat Button Settings Overview
- 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.
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 chat button's configuration Overview section.
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 "When no agent is online, offline button is displayed and visitor can use contact form." option is active in chat button's configuration Overview 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 "When no agent is online, offline button is displayed and visitor can use contact form." option is active in chat button's configuration Overview 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.