How do I Customize the Chat Pages of My Support Center?

Last Updated -

Note: This FAQ refers to the Advanced Theme Editor. For a step by step guide on how to edit elements of your Layout Page, as well as all other pages on your Support Center, please click here.



If you enable Chat in, there are two sets of pages that you can customize - the individual chat pages and a "Widget" that you can embed on your own website. Here are a few general tips and considerations for the Chat pages: 
  • You can style both the initial chat page and the page that results when you've connected to the Chat
  • If you'd like to display the Chat link only when Agents are available, you'll need to use the Chat Widget


  • Administrator access level or above.
  • Understanding of HTML and/or CSS.
  • Familiarity with Liquid to easily customize the appearance of Support Center. For more information about Liquid, see List of Liquid Variables.

Default Chat in Support Center

To edit the chat page on your Support Center go to Admin > Channels > Support Center > Web Themes > Edit Web Theme > ​Advanced Themes > Chat(New). This page refers to the Chat form itself and looks like this by default:

For the pre-create popup that appears before a chat request is submitted, you need to edit the Chat (Pre-create) file in your web theme. This is how it looks as default:


The Chat Widget

To edit the chat widget and retrieve the code to embed on your own website go to Admin > Channels > Chat > Add Theme to create a copy of the system default theme for editing. Name your theme and edit the HTML and CSS to create the look and feel you desire. Set this as Default and click the Embed Code button to retrieve the chat widget code.

Example: Making a field required on the Chat Form

To make a field required, you'll need to add to the existing jquery statement that's running in the page. For example, if you wanted the phone number to be required, you could add: