How do I adjust the SuperOffice Chat widget layout to my company's brand style?

To make your chat widget fit your company's brand layout, please follow the steps below:

1. Log in to Settings & Maintenance. 
    
2. Select Chat (1) on the left side of the menu, choose the chat channel (2) you want to customize, and click Edit (3) next to that channel.
   
   ​
   ​
3. Select the Chat widget layout where you can adjust the chat widget so that it fits your needs. You can adjust various parameters, which are explained one by one below:
   
   ​

• Theme: Select from two predefined themes for the chat window — Classic or Modern.

• Theme colour: Select the base/background colour for the chat window. Choose it from the color panel (click the color box) or enter an RGB code. Under Theme colour, you can also choose:

  • Text colour

  • Font (applies to messages and buttons)

  • Font size

• Message colours: Choose different colors for the chat messages:

  • Agent background colour

  • Agent text colour

  • Customer background colour

  • Customer text colour

• Button colour: Define the appearance of chat buttons by selecting:

  • Background colour

  • Text colour

• Widget size: Choose between two options — Normal or Large.

  Note! Colour and font settings will override the color and font defined in the selected theme.

• Show logo (1): Select this option to display an image in the header of the chat window. To add an image, click the link to upload it or drag and drop the image file.

• Show agent photo: Enable this option to display the agent’s photo in the chat window. Once an agent responds to a new chat, the header logo and text will be replaced by the agent’s photo and name.

• Use the agent’s first name only: Enable this option if you want only the agent’s first name to appear in the chat instead of their full name - useful for creating a more personal and friendly tone.

  Note! The agent must have a personal image in their contact card for it to be displayed in the chat.

• Header (2): Enter a short welcome text (no more than 45 characters) to display in the chat window header.

• Message (3): Enter a short message (no more than 45 characters) to display below the header.
  
  

 

• Use a custom queue message. The message you add here will be visible while the customer is waiting for an agent to answer their question. You can use the following placeholders:
  
  {cque} = a number indicating the position in the queue (1)
  
  {cavw} = the average waiting time, in the format hh:mm (2)
  
  

More information

FAQ: How do I add a SuperOffice Chat widget to my website?