Customize a pop-up chat window
Pop-up chat windows open in a new browser window.
Fastpath: In the Web Admin Center, go to . 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:
- Logo URL
- Text Color
- Content Background Color (R,B,G)
- Header Background Color
- Chat message field
- Send Button
- 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 |
|---|---|
| Defines Auto Answers messages for your customer self-service. For more information, see Auto Answers: Customer self-service. | |
| Defines the color scheme of your pop-up chat window. For more information, see Colors (Pop-up - Basic > Colors). | |
| Defines the logo and favicon displayed in the pop-up window. | |
| 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. |
|
| Defines the default size of the chat window. | |
| Defines the button caption for ending the chat session. | |
| Defines the layout of agent-, customer-, and system messages in the chat panel. | |
| Defines CSS styles for the different parts of the chat window. | |
| Overrides the default size of the chat window that you can set in the key group. | |
| Defines messages that the Automatic Distribution system displays to customers while they are waiting for an agent in queue. | |
| Defines messages for the customer before and during co-browse sessions. | |
| Defines button captions of the chat window. | |
| Defines labels of the chat transcript dialog. | |
| Defines system messages in the chat window. | |
| Overrides default CSS styles for the different parts of the chat window that you can set in the key group. | |
| Various labels and messages related to unavailable agents, auto-translated messages, chat validation, and basic action buttons, such as Yes, No, OK, and Cancel. | |
| Defines button captions and labels on the post-chat form. | |
| Defines button captions and labels on the pre-chat form. | |
| Defines button captions, labels and messages when the customer is in a remote control session. | |
| Defines the default size of the chat window. These values are taken from the key group by default. | |
| Defines system messages and labels for the email that customers can send when chat is not available. | |
| Defines the button caption for sending the post-chat form. | |
| Defines CSS styles for the different parts of the post-chat window. | |
| Defines the size of the post-chat window. | |
| Defines the button caption for sending the post-chat form. | |
| Defines CSS styles for the different parts of the pre-chat window. | |
| Defines the size of the pre-chat window. | |
| Defines the caption of the Close button when chat is not available and the sending e-mail is enabled for the customer. | |
| Defines CSS styles for the different parts of the window where the customer can send an email when agents are unavailable. | |
| 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.
- 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
- To change the button caption for starting the chat from the pre-chat form, go to
- To change the button caption for closing the post-chat form, go to
- Change the caption of the button in the editor at the bottom of the page.
- 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 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. |
