Table of Content
Live chat is an essential component of customer interaction software, allowing your customers to communicate with your support representatives in real-time. In LiveAgent you can create your own chat buttons that can be placed anywhere on your website.
Chat buttons can be enhanced by the AI chatbot feature, allowing your visitors to communicate with an AI-powered bot trained on your data before connecting to real human agents. Read more in our AI Chatbot Feature Overview and Setting Up AI Chatbot Feature articles.
Creating a Chat Button
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 your image or by writing your own 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 right away and its configuration window will be opened. In the Overview section 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. You can also customize the design of both online (when chat is available) and offline (when chat is not available) versions of the button, and also the design of its pre-chat form and/or contact form.
As the chat button configuration options are vast, see our Chat Button Settings Overview article for a detailed description of each section and setting.
After having your contact button set up according to your needs hit the "Save" button.
Managing Chat Buttons
To edit your chat buttons, navigate to the Configuration > Chat > Chat Buttons section, and click either on the image of a button, its name, or the Actions (cogwheel icon) button.
Cloning, Deactivating & Deleting a Chat Button
If you'd like to create a copy of your existing chat button, in the Configuration > Chat > Chat Buttons section, click on the Actions (cogwheel icon) button, and select "Clone". A new chat button with the same setting, colors, and custom code will be created and its configuration window opened.
To deactivate a chat button, either select the "Deactivate" option after clicking the mentioned Actions button, switch the toggle button, or open its configuration window, uncheck the "Active" checkbox, and save the button. The same actions can be taken to re-activate the chat button. To delete a chat button, select the "Delete" option after clicking the mentioned Actions button, or open its configuration window and click "Delete".
Integrating a Chat Button
To integrate your chat button into your website, navigate to the Integration section and copy its integration javascript. Place the integration code before the </body> HTML tag of your website, ideally into an element that's displayed on every page of your web, e.g. the footer. If you would like to add the chat button to your LiveAgent customer portal you can do so by following this guide.