Editing Themes

< Back
  1. To begin Editing your theme, make sure that you have the desired page selected. To Select a Page to Edit, choose the page from the drop-down menu towards the top of the browser window. Highlight and click on your preferred page edit. WebChat allow you to customize many different sections of the User Interface. Below is a list of the WebChat sections and what can be customized.
  2. Choose a Theme from the dropdown menu that you would like to edit. Now you are ready to start making changes to the theme.


Header: This is the static header for the chat client.

Below is a list of what can be customized.
  • Title: Enter your Header Text into text field.
  • Height: You can adjust the Header Height by using the up and down arrows.
  • Background Color: Use the color picker or enter a html color code to change the Background Color.
  • Font Color: Use the color picker or enter a html color code to change the Font Color.
  • Font Style: Choose the Font style by using the drop-down menu. Click on to select the preferred font style.
  • Font Size: You can simply adjust the Font Size by using the up and down arrows.
  • Font Weight: You can adjust the Font Weight by using the up and down arrows.


Chat Request Form: This is from that your customer will fill out before the initial chat session begins.

  • Background Color: Use the color picker or enter a html color code to change the Background Color.
  • Instruction Message Font Color: Enter your Header Text into text field. This will appear above the information boxes.
  • Instructions Font: Choose the Instructions Font style by using the drop-down menu. To select, click on the preferred font style. The instructions will appear on top of the Chat Request Form.
  • Instructions Font Size: You can adjust the Instructions Font Size by using the up and down arrows.
  • Instructions Font Weight: You can adjust the Instructions Font Weight by using the up and down arrows.
  • Instructions Width: You can adjust the Instructions Font Width by using the up and down arrows.
  • Instructions Height: You can adjust the Instructions Font Height by using the up and down arrows.
  • Textbox Color: This controls the textboxes in the chat request form. Use the color picker or enter a html color code to change the Background Color.
  • Textbox Border Color: Use the color picker or enter a html color code to change the Border Color.
  • Textbox Font Color: Use the color picker or enter a html color code to change the Font Color.
  • Textbox Font: Choose the Font style by using the drop-down menu. To select, click on the preferred font style.
  • Textbox Font Size: You can adjust the Textbox Font Size by using the up and down arrows.
  • Textbox Font Weight: You can adjust the Textbox Font Weight by using the up and down arrows.
  • Textbox Width: You can adjust the Textbox Width by using the up and down arrows.
  • Textbox Height: You can adjust the Text Box Height by using the up and down arrows.
  • Groups Font Size: This controls the font size of the Agent Group names listed in the dropdown of the request form. You can adjust the Group Font Size by using the up and down arrows.
  • Groups Font Weight: You can adjust the Group Font Weight by using the up and down arrows.
  • Groups Width: You can adjust the Group Width by using the up and down arrows.
  • Groups Height: You can adjust the Group Height by using the up and down arrows.
  • Chat Button Background Color: Use the color picker or enter a html color code to change the Chat Button Background Color.
  • Chat Button Hover Color: When you mouse over the Chat Button this will be the color that will display. Use the color picker or enter a html color code to change the Chat Button Hover Color.
  • Chat Button Font Color: Use the color picker or enter a html color code to change the Chat Button Font Color.
  • Chat Button Font: Choose the Chat Button Font style by using the drop-down menu. To select, click on the preferred font style.
  • Chat Button Font Size: You can adjust the Chat Button Font Size by using the up and down arrows.
  • Chat Button Font Weight: You can adjust the Chat Button Font Weight by using the up and down arrows.
  • Chat Button Height: You can adjust the Chat Button Height by using the up and down arrows.
  • Email Button Background Color: The email button display when there are no available agents to chat with in the group. Use the color picker or enter a html color code to change the Email Button Background Color.
  • Email Button Hover Color: When you mouse over the Email Button this will be the color that will display. Use the color picker or enter a html color code to change the Email Button Hover Color.
  • Email Button Font Color: Use the color picker or enter a html color code to change the Email Button Font Color.
  • Email Button Font: Choose the Email Button Font style by using the drop-down menu. To select, click on the preferred font style.
  • Email Button Font Size: You can adjust the Email Button Font Size by using the up and down arrows.
  • Email Button Font Weight: You can adjust the Email Button Font Weight by using the up and down arrows.
  • Email Button Width: You can adjust the Email Button Width by using the up and down arrows.
  • Email Button Height: You can adjust the Email Button Height by using the up and down arrows.

Preview Theme Changes: Theme changes will automatically display in the preview section to the left of the controls.
To Save the changes made to your theme, click on the  button. Your theme will instantly reflect the changes.

***Note: once you have saved your theme settings, you will not be able to reload your theme back to the old layout.


Reloading Theme Settings: Click the  button to ‘Reload Theme Settings’ list back to last saved state. All changes that were made to the theme will revert back to the last saved default settings.
2018-05-22T19:56:32+00:00