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

A pop-up window has the following variables of individual elements:

  1. Logo URL
  2. Text Color
  3. Content Background Color (R,B,G)
  4. Header Background Color
  5. Chat message field
  6. Send Button
  7. End Button

Window texts, messages and labels

Window texts, messages and labels are language-dependent, and not listed here. For more information, see The Website Definition (managing multiple sites).

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('https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.png')
Text Color text_color #000000
Text Font text_font verdana, arial, helvetica, sans-serif
Text Size text_size 12px

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 https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.com/favicon.ico
Logo Link URL http://www.boldchat.com
Logo URL https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.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  
Related Articles