Customizing the appearance of your chat

To modify the appearance of your chat, go to your chat dashboard and click Settings > Appearance.

chatroll-appearance

You can modify the following:

  • Colors: The HTML color codes for the Chatroll module border, background, text area, and text. The updated colors are shown in the Embed Preview. For more advanced customization, see the CSS Customization section.
  • Border: Allows you to remove the default chat border. Turn off the border for a more minimal look or to create your own border surrounding the module. 
  • User List Position: Sets the position of the user list. Setting the user list to Top or Right forces that position. Setting the user list to Automatic lets the module determine the best position based on the width of the chat. To completely hide the user list, select Hidden. 
  • Sound: Sets the default for whether or not a sound plays whenever a message is posted to the chat. Users can change this option from the module.
  • Message Order: Determine whether new messages are displayed at the bottom or top of the chat.
  • Recent Messages: Set the maximum age of recent messages that show in the chat when it is loaded. To clear recent messages, click the Clear Recent Messages button. Note that clearing recent messages does not delete the chat history.
  • White Label: Removes all Chatroll branding from the module. For more advanced customization, see CSS Customization.
  • Custom CSS: Enter CSS into the Custom CSS field to modify the look of your Chatroll module. See CSS Customization for more information.

Click the Save Settings button for changes to take effect.

Note: When you modify your chat’s appearance via the dashboard, the changes will only be visible on the embedded or popped out instances of Chatroll. The changes will not show in the dashboard. 

Related Articles