Advanced features for chat window customization

Advanced customization options provide further flexibility to design and script your chat windows.

Variables
Customization variables conform to the ${variable_name} scheme.
Tip: As a general rule, variable names reflect the name of the corresponding key. For example, you can refer to the Header Font Color key with the header_font_color variable.
Key chaining
Variables can be chained if a key needs to inherit the value of another key. Working with key chains is helpful to avoid inconsistent color or text usage and simplify the customization process.
Note: Key inheritance is limited to a certain number of levels due to performance considerations, usually around four.
CSS, Javascript and HTML includes

Includes allow you to inject custom JavaScript code, redesign the layout and fine-tune CSS settings in one place.

Any valid CSS, Javascript or HTML snippet is allowed in the appropriate fields without restrictions.

To customize your CSS code, you can inspect chat window elements to determine their scope using Chrome, Firefox, or a professional development tool.

Tip: To format window labels, messages and texts, you can also use HTML tags.
Window and frame objects

Every layered chat window comprise a window and a frame object with different scopes.

  • A chat window object is a container element that controls the window object of the host page, in which the chat window is embedded.
  • A chat frame object is the window object of the innermost iFrame, in which the chat runs.
Image format

When linking to external images, you can use the following HTTP protocol formats:

  • http:// for standard pages without HTTPS security
  • https:// for secure pages
  • http(s):// to automatically detect the appropriate protocol
Color format
All standard CSS and HTML color representations are supported:
  • Hex color codes, such as #FFFFFF (preferred)
  • Color strings, such as red or black
  • RGB color scheme: rgb(r, g, b)
  • RGBA color scheme: rgba(r, g, b, a) (discouraged)