Customize a pop-up chat window

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

Fastpath: In the Web Admin Center, go to Channels > Chat > Chat Windows > [New or existing window] > Customization.

You can customize the following interface elements:

  • Window texts, messages, and labels
  • Colors
  • Logo and images
  • Layout and custom scripting

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

Overview of customization setting groups

The following table describes the key areas that you can customize for pop-up chat windows in Bold360:

Main group - Key group Description
Pop-up - Basic > AutoAnswers Defines Auto Answers messages for your customer self-service. For more information, see Auto Answers: Customer self-service.
Pop-up - Basic > Colors Defines the color scheme of your pop-up chat window. For more information, see Colors (Pop-up - Basic > Colors).
Pop-up - Basic > Logo Defines the logo and favicon displayed in the pop-up window.
Pop-up - Basic > Other Defines the default customer name and the title of the chat window.

The default customer name is displayed when a pre-chat form is not available or the customer does not provide a name.

Pop-up - Basic > Sizing Defines the default size of the chat window.
Pop-up - Chat page > Buttons Defines the button caption for ending the chat session.
Pop-up - Chat page > Chat History Defines the layout of agent-, customer-, and system messages in the chat panel.
Pop-up - Chat page > Header/Footer Defines CSS styles for the different parts of the chat window.
Pop-up - Chat page > Sizing Overrides the default size of the chat window that you can set in the Pop-up - Basic > Sizing key group.
Pop-up - Details > ACD Defines messages that the Automatic Distribution system displays to customers while they are waiting for an agent in queue.
Pop-up - Details > ActiveAssist Defines messages for the customer before and during co-browse sessions.
Pop-up - Details > Buttons Defines button captions of the chat window.
Pop-up - Details > Chat Transcript Defines labels of the chat transcript dialog.
Pop-up - Details > Chat Window Defines system messages in the chat window.
Pop-up - Details > Header/Footer Overrides default CSS styles for the different parts of the chat window that you can set in the Pop-up - Chat page > Header/Footer key group.
Pop-up - Details > Miscellaneous Various labels and messages related to unavailable agents, auto-translated messages, chat validation, and basic action buttons, such as Yes, No, OK, and Cancel.
Pop-up - Details > Post Chat Survey Defines button captions and labels on the post-chat form.
Pop-up - Details > Pre Chat Survey Defines button captions and labels on the pre-chat form.
Pop-up - Details > Remote Control Defines button captions, labels and messages when the customer is in a remote control session.
Pop-up - Details > Sizing Defines the default size of the chat window. These values are taken from the Pop-up - Basic > Sizing key group by default.
Pop-up - Details > Unavailable Email Defines system messages and labels for the email that customers can send when chat is not available.
Pop-up - Post chat > Buttons Defines the button caption for sending the post-chat form.
Pop-up - Post chat > Header/Footer Defines CSS styles for the different parts of the post-chat window.
Pop-up - Post chat > Sizing Defines the size of the post-chat window.
Pop-up - Pre-chat > Buttons Defines the button caption for sending the post-chat form.
Pop-up - Pre-chat > Header/Footer Defines CSS styles for the different parts of the pre-chat window.
Pop-up - Pre-chat > Sizing Defines the size of the pre-chat window.
Pop-up - Unavailable email > Buttons Defines the caption of the Close button when chat is not available and the sending e-mail is enabled for the customer.
Pop-up - Unavailable email > Header/Footer Defines CSS styles for the different parts of the window where the customer can send an email when agents are unavailable.
Pop-up - Unavailable email > Sizing Defines the size of the window where the customer can send an email when agents are unavailable.

Window texts, messages and labels

Window texts, messages and labels can be customized per language. See also Provide a chat window in multiple languages.

Colors (Pop-up - Basic > 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.
Key Variable Description
Content Background Color (R,G,B) (Pop-up ? Basic) content_background_color

Default: #F0F0F0

The background color of the upper panel, where the chat messages are displayed.
Header Background Color (Pop-up ? Basic) header_background_color

Default: url('https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.png')

The background color of the window header.
Text Color (Pop-up ? Basic) text_color

Default: #000000

The font color of messages.
Text Font (Pop-up ? Basic) text_font

Default: verdana, arial, helvetica, sans-serif

The font family of messages.
Text Size (Pop-up ? Basic) text_size

Default: 12px

The font size of messages.

Chat message fieldSend ButtonEnd Button

Logo and images (Pop-up ? Basic > Logo)

Note: The default aspect ratio of the logo image is 1:1 (square). This setting can be overridden in the style sheet.
Key Default value Description
Logo - Favicon URL https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.com/favicon.ico The URL of the favicon that is displayed on your browser's tab.
Logo Link URL http://www.boldchat.com The web address where the customer navigates by clicking the logo.
Logo URL https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.com/ext/images/BoldChat_logo.png The URL of your logo.

Button captions of the chat window, pre-chat, and post-chat forms

You can show custom buttons to customers to close the chat window, start chat from the pre-chat from, or close the post-chat form.

  1. Depending on which button's caption you want to customize, do the following:
    • To change the button caption for ending the chat session, go to Pop-up - Chat page > Buttons > Submit Button
    • To change the button caption for starting the chat from the pre-chat form, go to Pop-up - Pre-chat > Buttons > Submit Button
    • To change the button caption for closing the post-chat form, go to Pop-up - Post chat > Buttons > Submit Button
  2. Change the caption of the button in the editor at the bottom of the page.
  3. Save your changes.

Chat window size

The default size of a pop-up chat window is 480px (height) x 640px (width). To resize the chat window, go to Pop-up - Basic > Window and set the new Window Height and Window Width.

Layout and custom scripting (Pop-up ? Chat page)

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

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

Group Key Type Description
ActiveAssist (Pop-up ? Details) Co-browse Stylesheet CSS Defines the window's appearance during co-browse sessions.
Header/Footer (Pop-up ? Chat page) Footer Include CSS Defines the appearance of the footer bar.
Header/Footer (Pop-up ? Chat page) Head Include CSS Defines global styles.
Header/Footer (Pop-up ? Chat page) Header Include CSS Defines the appearance of the header bar.
Header/Footer (Pop-up ? Chat page) Navigation Include HTML Defines the structure of the navigation bar.
Header/Footer (Pop-up ? Chat page) Side Bar Left Include HTML Defines the appearance of the bar on the left side of the chat panel, which is not visible by default.
Header/Footer (Pop-up ? Chat page) Side Bar Right Include HTML Defines the appearance of the bar on the right side of the chat panel, which is not visible by default.