Creating chat buttons

Live chat has the ability to provide the convenient answers that customers want, while also adding significant benefits to the staff and bottom line of your company. Livechat builds customers' confidence while shopping and increases overall customer experience.

Live Chat Functionality Overview

Live chat Setup

To create a new live chat button, navigate in your LiveAgent panel to Configuration > Chat > Chat Buttons and click on the "Create" button.

In the pop-up window choose the type of your chat button. You can choose from the pre-defined styles and designs, or select the Custom type and create your own button either from an image or by HTML and CSS code. The colors of the pre-defined designs can be customized further in the chat button's settings.

After selecting the type of your button, your chat button will be created and its settings will be opened. In the Overview screen you can name your button, select department that will handle the chat initiated by the particular chat button and choose the language to be used in the button. If you decide to request information by pre chat form, when a chat button is clicked check the first box. If you want to display an offline button when no agent is online check the second box. Activate the chat button by checking the third box .

You can also customize the design of both 'online' (when chat is available) and 'offline' (when chat is not available) button. And also the design of pre-chat form or contact-form (displayed if no agent is online).

Step 4: By clicking the Online button settings you can make changes to the design of Online button.

Step 5: To change the Chat window design click on Chat window settings.

Step 6: In the Pre chat form settings you can choose whether clicking a contact button shall initiate a chat immediately or it shall provide a pre-chat form to be filled. 

Step 7:By clicking the Offline button settings you can make changes to the design of Offline button.

Step 8: By clicking the Contact form settings you can make changes to the design of Contact form.

Step 9:  After having your contact button set up according to your needs hit the Save button.

Step 10: Now navigate to the Integration section and place the following code before </body> of your page. For example if you would like to add the chat button to your LiveAgent customer portal you can do so by following this guide.

Note: Each live chat button has its own code.