HELP FILE

Customizing pop-up chat windows

Pop-up chat windows open in a new browser window.

Branding options are grouped by complexity into Simple and Custom types, allowing you to customize:
  • Window texts, messages and labels
  • Colors
  • Logo and images
  • Layout and custom scripting
Fastpath: To modify settings, go to Setup > Account Settings > Chats > Custom Chat Windows > Brandings.
Tip: You can use key chaining to reuse values for related elements.

Layout overview

Hover your mouse over the image to see some of the corresponding variable of individual elements.

Window texts, messages and labels

Window texts, messages and labels are language-dependent, and not listed here.

Colors

Fastpath: On the Brandings page, select Common - Layered and go to Colors.
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.
Setting group Key Variable Default value
Simple Content Background Color (R,G,B) content_background_color #F0F0F0
Header Background Color header_background_color url('http(s)://images.boldchat.com/ext/images/header_gradient_gray.png')
Text Color text_color #000000
Text Font text_font verdana, arial, helvetica, sans-serif
Text Size text_size 12px

Text Box Send Button End Button

Logo and images

Fastpath: On the Brandings page, select Common - Layered and go to Chat Frame.
Note: The default aspect ratio of the logo image is 1:1 (square). This setting can be overridden in the style sheet.
Setting group Key Default value
Simple Logo - Favicon URL http(s)://images.boldchat.com/favicon.ico
Logo Link URL http://www.boldchat.com
Logo URL http(s)://images.boldchat.com/ext/images/BoldChat_logo.png

Layout and custom scripting

Fastpath: On the Brandings page, select Common - Pop-up.

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

How can I determine the scope of CSS classes and their effect?

To customize your CSS code, you can inspect chat window elements to determine their scope using Chrome, Firefox, or a professional development tool. For more information, see Advanced features for chat window customization.

Group Key Type Description
ActiveAssist Cobrowse Stylesheet CSS
Header/Footer Footer Include CSS Defines the appearance of the footer bar
Header/Footer Head Include CSS Defines global styles
Header/Footer Header Include CSS Defines the appearance of the header bar
Header/Footer Navigation Include HTML Defines the structure of the navigation bar
Header/Footer Side Bar Left Include HTML
Header/Footer Side Bar Right Include HTML