How to show an email form when no operators are available
You can set the Unavailable Email Form to appear when a no operators are available to answer a chat request.
You can set the Unavailable Email Form to appear when a no operators are available to answer a chat request.
Result: The New Custom Chat Window is displayed.
Multiple emails must be separated by a comma, semi-colon, or space.
You may share the transcript of a chat with others that do not have access within BoldChat.
Result:
You can correlate specific canned message folders with a chat window. This can be helpful in an environment with multiple web sites to ensure that relevant messages are presented to operators.
Result: The New Custom Chat Window is displayed.
You can set a chat window to be displayed in any of seven pre-translated languages or 35 custom languages. There is no need to create multiple chat windows for multiple languages.
The primary language is shown to customers when no translation is available in their own language.
Example: For example, if English is your default language, a customer from Poland sees the chat window in English unless you specifically select Polish as a provided language and add a Polish translation.
Digital DX looks for a customized (localized, translated) chat window for the chosen or detected language. If no customized window exists, the default language is shown.
You can set up a pre-chat form that is displayed to visitors after they click a chat button but before actually chatting with an operator. The pre-chat form is a component of the Custom Chat Window definition associated with a chat button or chat invitation. The form can be customized. Visitor input is added to the incoming chat.
Result: The New Custom Chat Window is displayed.
See also How to provide a chat window in multiple languages.
To provide the visitor with choices, you must add Available Departments.
You can prompt visitors for feedback after a chat has been closed.
Result: The New Custom Chat Window is displayed.
Result:
Use the Operator Wrap-Up feature to gather information from operators about ended sessions.
Result: The New Custom Chat Window is displayed.
Option | Description |
---|---|
Auto-Close | Set how long an ended session remains in the active chats view (shown in italics) before closing automatically. Required fields must be completed before the session can close. |
Standard Wrap-Up | Set fields that operators must complete before a session can be closed.
Tip: To create values for these fields, see Organizing Chats.
|
Custom Wrap-Up | Enterprise subscribers can set additional fields that operators can complete before a session can be closed. Unlike standard wrap-up, multiple response types are allowed (text, drop-down, radio button). Click New to set up fields and values. Fields can be required or optional. |
Adapt the look and feel of your chat windows to your design and locale.
You can customize the following interface elements:
You can use key chaining to reuse values for related elements.
A layered window has the following variables of individual elements:
The following table describes the key areas that you can customize for layered chat windows in Digital DX:
Main group - Key group | Description |
---|---|
Layered - Basic > AutoAnswers | Defines Auto Answers messages for your customer self-service. For more information, see Auto Answers: Customer self-service. |
Layered - Basic > Colors | Defines the color scheme of your layered chat window. For more information, see Colors (Layered - Basic). |
Layered - Basic > Other | Defines the default customer name, submit button caption and welcome message.
The default customer name is displayed when a pre-chat form is not available or the customer does not provide a name. |
Layered - Basic > Window | Defines the size and title of the chat window. |
Layered - Chat page > Buttons | Defines the button caption for ending the chat session. |
Layered - Details > ACD | Defines messages that the Automatic Distribution system displays to customers while they are waiting for an agent in queue. |
Layered - Details > ActiveAssist | Defines messages for the customer before and during co-browse sessions. |
Layered - Details > Buttons | Defines the button captions for closing the chat window, sending a message, submitting a form, as well as button captions related to video sessions. |
Layered - Details > Chat Frame | Defines captions, labels, and icons of the chat window. |
Layered - Details > Chat Transcript | Defines labels of the chat transcript dialog. |
Layered - Details > Chat Window | Defines system messages in the chat window. |
Layered - Details > Colors | Defines additional color schemes for your layered chat window. For more information, see Colors (Layered - Details). |
Layered - Details > Includes | Defines CSS styles for the chat window and for the page where the chat window is displayed. |
Layered - Details > Miscellaneous | Various labels and messages related to unavailable agents, video chats, auto-translated messages, and basic action buttons, such as Yes, No, OK, and Cancel. |
Layered - Details > Post Chat Survey | Defines button captions and labels on the post-chat form. |
Layered - Details > Pre Chat Survey | Defines button captions and labels on the pre-chat form. |
Layered - Details > Remote Control | Defines button captions, labels and messages when the customer is in a remote control session. |
Layered - Details > Unavailable Email | Defines system messages and labels for the email that customers can send when chat is not available. |
Layered - Post chat > Buttons | Defines the button caption for sending the post-chat form. |
Layered - Pre-chat > Buttons | Defines the button caption for starting the chat session from the pre-chat form. |
Layered - Unavailable email > Buttons | Defines the button caption for closing the chat window after the customer sends an email when chat is not available. |
Window texts, messages and labels can be customized per language. See also Provide a chat window in multiple languages.
Define the basic color scheme of layered windows.
Key | Variable and default value | Description |
---|---|---|
Button Background Color | button_background
Default: #01A5EE |
The background color of buttons in the chat window, such as the Send and Start Chat buttons. |
Content Background Color (R,G,B) | content_background_color
Default: 35, 35, 35 |
The background color of the inner chat window, where customers see the messages. |
Content Background Transparency | background_transparency
Default: 0.65 |
The transparency of the inner chat window. |
Customer Message - Message - Font Color | visitor_message_font_color
Default: #000000 |
The color of the customer's message. |
Customer Message - Name - Font Color | visitor_message_sender_color
Default: #FFFFFF |
The color of the customer's name. |
Customer Message - Time - Font Color | visitor_message_sent_color
Default: #FFFFFF |
The color of the time stamp when the customer sent the message. |
Customer Message Background Color | visitor_background
Default: #3DC8F3 |
The background color of the customer message container. |
General Text Color | text_color
Default: white |
The color of system messages and labels. |
General Text Font | text_font
Default: sans-serif |
The font family of system messages and labels. |
General Text Size | text_size
Default: 1em |
The font size of system messages and labels. |
Header Background Color | header_background_color
Default: #01A5EE |
The background color of the chat window's header. |
Header Font Color | header_font_color
Default: #FFFFFF |
The color of the label in the chat window's header. To change the label of the chat window, go to Layered - Basic > Window > Window Title. |
Message Input Background Color | message_input_background
Default: #FFFFFF |
The background color of the input field, where customers type their messages. |
Message Input Container Background Color | message_input_container_background_color
Default: #232323 |
The border color of the message input field and the Send button at the bottom of the chat window. |
Message Input Font Color | message_input_font_color
Default: #000000 |
The color of customer messages as they type. |
Operator Message - Message - Font Color | operator_message_font_color
Default: #E7E7E7 |
The color of agent messages. |
Operator Message - Name - Font Color | operator_message_sender_color
Default: #B2B2B2 |
The color of the agent's name. |
Operator Message - Time - Font Color | operator_message_sent_color
Default: #3DC8F3 |
The color of the time stamp when the agent sent the message. |
Operator Message Background Color | operator_background
Default: #232323 |
The background color of the agent message container. |
Key | Variable and default value | Description |
---|---|---|
ActiveAssist Activity Background Color | aa_background
Default: ${form_background} |
The background color of the message that describes the co-browse activity. |
ActiveAssist Activity Font Color | aa_color
Default: ${text_color} |
The color of the message that describes the co-browse activity. |
ActiveAssist Message - Message - Font Color | aa_message_font_color
Default: ${operator_message_font_color} |
The color of co-browse system messages. |
ActiveAssist Message - Name - Font Color | aa_message_sender_color
Default: ${operator_message_sender_color} |
The color of the agent's name who started the co-browse session. |
ActiveAssist Message - Time - Font Color | aa_message_sent_color
Default: ${operator_message_sent_color} |
The color of the time stamp when the agent started the co-browse activity. |
ActiveAssist Message Background Color | aa_message_background
Default: ${operator_background} |
The background color of the co-browse message container. |
Button Font Color | button_font_color
Default: ${text_color} |
The color of button labels. |
Dialog Background Color | dialog_background
Default: ${text_color} |
The background color of dialogs, such as when the agent asks the customer for remote control permission. |
Dialog Button Font Color | dialog_button_font_color
Default: ${text_color} |
The color of the button labels in chat window dialogs. |
Dialog Cancel Button Background Color | dialog_cancel_background
Default: ${form_background} |
The background color of the Cancel button in dialogs. |
Dialog Font Color | dialog_font_color
Default: ${form_background} |
The color of dialog texts. |
Dialog OK Button Background Color |
Every business has its own unique voice and brand identity, and Digital DX gives you the control and flexibility to customize your implementation to your unique business needs.
One Digital DX Agent account can only be integrated with one Digital DX AI account. A Digital DX AI account can escalate to more than one Digital DX Agent accounts, but it is not recommended to do so.
A Digital DX Agent account can have several chat windows, but one chat window can only be associated with one Digital DX AI Knowledge Base. A Digital DX chat window is similar to a Digital DX AI touchpoint configuration, which defines the behavior and appearance of a chat widget.
So while you can only associate one Digital DX Agent account with one Digital DX AI account, you can display the content of all your Digital DX AI Knowledge Bases by setting up multiple Digital DX chat windows.
To choose the actual interface seen by customers upon clicking a chat button, you must associate your chat button with a chat window.
This feature is part of the chat button setup process for both floating and static buttons.
Result: The settings are applied to the chat button.
Your chat button is ready to be set as a chat entry point by being associated with an HTML snippet and inserted to a site.
To activate a newly created chat button as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on Digital DX servers.
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:
A pop-up window has the following variables of individual elements:
Window texts, messages and labels are language-dependent, and not listed here. For more information, see The Website Definition (managing multiple sites).
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 |
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 |
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 |
You can adapt the appearance, layout, content, and behavior of chat windows to match your branding.
This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link.
Option | Description |
---|---|
Simple | Simple settings control the basic appearance of the chat window, including your logo, window size and primary colors.
Tip: Select Simple if you are satisfied with the default texts, functionality and layout, but need to adjust the look of the chat window quickly and easily.
|
Custom | Custom settings provide access to every detail of the chat window and allows you to use advanced features, such as variables and key chaining. Simple settings are retained.
Tip: Select Custom if you need to customize an element of your window not available in simple mode. Options include window texts and messages, style sheets, color refinements and scripting.
|
Result: You are ready to set up your Layered Chat Window or Pop-up Chat Window.
Take advantage of events and extend chat window features using JavaScript.
A layered chat window can trigger events during its life-cycle and allows you to work with JavaScript without restrictions.
Includes allow you to inject JavaScript code and attach event listeners to chat windows with different scopes:
Every layered chat window comprise a window and a frame object.
There are two ways to attach event listeners:
Can I remove a registered listener? Calling the addListener method prevents the listener to be cleared. Global functions can be removed.
Event | Global function name | Description | Arguments |
---|---|---|---|
new-message | bc_newHistoryMessageCallback | New message added to chat history |
|
chat-ended | bc_chatEndedEventCallback | Chat ended | |
push-page | bc_pushPageEventCallback | A PushPage request sent by the operator and the visitor accepts to be redirected to the target URL |
|
page-loaded | bc_chatWindowLoadedEventCallback | Page loaded | |
resize | bc_resizeEventCallback | Elements resized |
Event | Global function name | Description | Arguments |
---|---|---|---|
new-message | bc_newHistoryMessageCallback | New message added to chat history |
|
page-loaded | bc_chatWindowLoadedEventCallback | Page loaded | |
chat-ended | bc_chatEndedEventCallback | Chat ended | |
chat-closed | bc_chatClosedEventCallback | Chat closed | |
push-page | bc_pushPageEventCallback | A PushPage request sent by the operator and the visitor accepts to be redirected to the target URL |
|
resize | bc_resizeEventCallback | Elements resized | |
maximized | bc_chatWindowMaximizedEventCallback | Frame maximized | |
minimized | bc_chatWindowMinimizeEventCallback | Frame minimized |
The following snippets provide two different implementations of the same functionality.
iFrame object snippet (addListener method)
var _tEvents = {
"new-message": "bc_newHistoryMessageCallback",
"chat-closed": "bc_chatClosedEventCallback",
"chat-ended": "bc_chatEndedEventCallback",
"push-page": "bc_pushPageEventCallback",
"page-loaded": "bc_chatWindowLoadedEventCallback",
"resize": "bc_resizeEventCallback"
},
_tFunction = function(i, type, fName) {
console.warn("event \"" + i + "\" captured inside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
};
for (var i in _tEvents) {
mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}
window object snippet (global function)
var _tEvents = {
"new-message": "bc_newHistoryMessageCallback",
"resize": "bc_resizeEventCallback",
"chat-closed": "bc_chatClosedEventCallback",
"chat-ended": "bc_chatEndedEventCallback",
"minimized": "bc_chatWindowMinimizeEventCallback",
"maximized": "bc_chatWindowMaximizedEventCallback",
"page-loaded": "bc_chatWindowLoadedEventCallback",
"push-page": "bc_pushPageEventCallback"
},
_tFunction = function(i, type, fName) {
console.warn("event \"" + i + "\" captured outside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
};
for (var i in _tEvents) {
mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}
A Chat Window or Custom Chat Window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button, link, or invitation. Chat windows can be layered or pop-up, and can be customized in a number of ways.
We recommend creating and managing chat windows from the following location: Setup > Account Setup > Chats > Custom Chat Windows.
Any chart window can be associated with any chat entry point or invitation:
The direction of the relationship is from button/invitation to window.
A button can only launch one specific chat window, while a chat window can be launched from multiple buttons or invitations.
It is important to understand that "chat window" does not refer to a simple window (as in the actual graphical user interface element a visitor sees), but rather a complex group of settings associated with that interface element. Together these settings make up a definition.
The chat window definition controls the following aspects of your visitors experience:
As the name suggests, a layered chat window appears as a new element on your page instead of as a new window. Layered windows are optimized for display on mobile devices, but many users prefer them for desktop browsers, as well.
A pop-up chat windows opens in a new browser window.
Advanced customization options provide further flexibility to design and script your chat windows.
To customize your CSS code, you can inspect chat window elements to determine their scope using Chrome, Firefox, or a professional development tool.
Every layered chat window comprise a window and a frame object with different scopes.
When linking to external images, you can use the following HTTP protocol formats:
You can set a chat window to be displayed in any of seven pre-translated languages or 35 custom languages. There is no need to create multiple chat windows for multiple languages.
Result: The New Custom Chat Window is displayed.
Result: The Available Languages window is displayed with only pre-translated languages listed.
Don't see the language you want to add? Click List all languages to display languages for that have not been pre-translated.
The default language is shown to visitors when no translation is available in their own language.
Example: For example, if English is your default language, then a visitor from Poland will see the chat window in English unless you specifically selected Polish as a provided language and added a Polish translation.
Can I allow visitors to choose a language? Yes. Go to New Custom Chat Window > Pre-Chat Form > Enable > Language Selector.
How does BoldChat know which language to show to a visitor?Visitor language is determined as follows:
BoldChat looks for a branded (localized, translated) chat window for the chosen or detected language. If no branding exists, the default language is shown.
Each new BoldChat version comes with improvements or new features to chat windows. To avoid any adverse effects to your existing definitions, you can control when the upgrade process occurs and verify any changes.
To check if an upgrade is available, follow these steps:
Why would you upgrade your chat window definition?
The purpose of the Upgrade feature is to prevent a new release from breaking previously made customizations. You can copy your existing chat window definition to create a backup version. Then you can upgrade the backup to preview changes and see if you need to adjust your code customizations.
Even without seeing the Upgrade button, sometimes you may want to update the chat window or create a new one to apply newer features. This does not involve redeploying code, only creating new chat windows and linking those to chat buttons.
To choose the actual interface seen by visitors upon clicking a chat button, you must associate your Chat Button definition with a Chat Window definition.
This feature is part of the Custom Chat Button definition process for both floating and fixed-position buttons.
Result: The New Custom Button window is displayed.
Result: The settings are applied to the custom chat button definition.
To activate a newly created button definition as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on the BoldChat server.
Result: The New Custom Chat Window is displayed.
What are the default fields? They are shown in the left panel of the Transcript Fields window.
Chat with visitors even when you don't share the same language. Messages are auto-translated in real time, if the language pair is available.
The image below shows auto-translation in action. Hover your mouse over the elements to see their function.
The left panel shows messages in your language. Translated messages are marked with a red asterisk.
The right panel shows messages in the visitor's language. Translated messages are marked with a red asterisk.
Visitors are notified in a system chat message when you are not chatting in the same language.
The language you are expected to use for outgoing messages is indicated at the bottom left of the Chat tab (?You are expected to type in X?). To chat in a different language, you must disable auto-translation before typing. Otherwise BoldChat will attempt to translate your conversation.
The language you are expected to use for outgoing messages is indicated in the status bar. If you want to chat with a visitor in a different language than indicated, remember to disable auto-translation before typing. Otherwise BoldChat will attempt to translate your conversation.
Click Translate > Set Language... and adjust the preferred language.
Click Preview in [language] to preview the message. To edit and format the translated message before sending, click Edit Preview.
Click Translate > Enable Auto-translation to switch real time translation on or off.
Contact your administrator to update the list of languages you speak.
Click to mark the selected text of your message as not translatable.
Yes. Once the chat is reassigned, the operator language is adjusted by the new operator's settings.
If you neither share a common language with the visitor nor any of your language pairs are supported by auto-translate, you and the visitor may not be able to understand each other. Contact your administrator to address the issue.
As the name suggests, a layered chat window appears as a new element on your page instead of as a new window. Layered windows are optimized for display on mobile devices, but many users prefer them for desktop browsers, as well.
Branding options are grouped by complexity into Simple and Custom types, allowing you to customize the following interface elements:
Hover your mouse over the image to see the corresponding variable of individual elements.
A layered window has the following variables of individual elements:
Window texts, messages and labels can be customized per language. See How to provide a chat window in multiple languages.
Key | Variable | Description |
---|---|---|
Content Background Color (R,G,B) | content_background_color
Default: 35, 35, 35 |
The background color of the inner chat window, where visitors see the messages. |
Content Background Transparency | background_transparency
Default: 0.65 |
The transparency of the inner chat window. |
General Text Color | text_color
Default: white |
The color of system messages and labels. |
General Text Font | text_font
Default: sans-serif |
The font family of system messages and labels. |
General Text Size | text_size
Default: 1em |
The font size of system messages and labels. |
Header Background Color | header_background_color
Default: #01A5EE |
The background color of the chat window's header. |
Header Font Color | header_font_color
Default: #FFFFFF |
The color of the label in the chat window's header. |
Message Input Container Background Color | message_input_container_background_color
Default: #232323 |
The border color of the message input field and the Send button at the bottom of the chat window. |
Operator Message - Message - Font Color | operator_message_font_color
Default: #E7E7E7 |
The color of operator messages. |
Operator Message - Name - Font Color | operator_message_sender_color
Default: #B2B2B2 |
The color of the operator's name. |
Operator Message - Time - Font Color | operator_message_sent_color
Default:#3DC8F3 |
The color of the time stamp when the operator sent the message. |
Operator Message Background Color | operator_background
Default: #232323 |
The background color of the operator message container. |
Visitor Message - Message - Font Color | visitor_message_font_color
Default: #FFFFFF |
The color of the visitor's message. |
Visitor Message - Name - Font Color | visitor_message_sender_color
Default: #FFFFFF |
The color of the visitor's name. |
Visitor Message - Time - Font Color | visitor_message_sent_color
Default: #FFFFFF |
The color of the time stamp when the visitor sent the message. |
Visitor Message Background Color | visitor_background
Default: #3DC8F3 |
The background color of the visitor message container. |
Key | Variable | Description |
---|---|---|
ActiveAssist Activity Background Color | aa_background
Default: ${form_background} |
The background color of the message that describes the ActiveAssist activity. |
ActiveAssist Activity Font Color | aa_color
Default: ${text_color} |
The color of the message that describes the co-browse activity. |
ActiveAssist Message - Message - Font Color | aa_message_font_color
Default: ${operator_message_font_color} |
The color of co-browse system messages. |
ActiveAssist Message - Name - Font Color | aa_message_sender_color
Default: ${operator_message_sender_color} |
The color of the agent's name who started the co-browse session. |
ActiveAssist Message - Time - Font Color | aa_message_sent_color
Default: ${operator_message_sent_color} |
The color of the time stamp when the agent started the co-browse activity. |
ActiveAssist Message Background Color | aa_message_background
Default: ${operator_background} |
The background color of the co-browse message container. |
Button Font Color | button_font_color
Default: ${text_color} |
The color of button labels. |
Dialog Background Color | dialog_background
Default: ${text_color} |
The background color of dialogs, such as when the agent asks the customer for remote control permission. |
Dialog Button Font Color | dialog_button_font_color
Default: ${text_color} |
The color of the button labels in chat window dialogs. |
Dialog Cancel Button Background Color | dialog_cancel_background
Default: ${form_background} |
The background color of the Cancel button in dialogs. |
Dialog Font Color | dialog_font_color
Default: ${form_background} |
The color of dialog texts. |
Dialog OK Button Background Color | dialog_ok_background
Default: ${button_background} |
The background color of the OK button in dialogs. |
Form Background Color | form_background
Default: ${message_input_container_background_color} |
The background color of the pre-chat and post-chat forms. |
Form Input Background Color | form_input_background
Default: ${form_background} |
The background color of the input fields in pre-chat and post-chat forms. |
Form Input Border Color | form_input_border_color
Default: #6F6F6F |
The border color of the pre-chat and post-chat forms. |
Form Input Error Border Color | form_input_error_border_color
Default: #FF0000 |
The border color of error messages in pre-chat and post-chat forms. For example, when the customer enters an invalid email address. |
Form Input Font Color | form_input_font_color
Default: ${text_color} |
The font color of the input field content in pre-chat and post-chat forms that the customer types. |
Form Input Placeholder Color | form_input_placeholder_color
Default: #666666 |
The font color of placeholders in the input fields of forms. |
Link Font Color | link_color
Default: #9F9F9F |
The color of links. |
Link Font Hover Color | link_hover_color
Default: #CFCFCF |
The color of links when the customer hovers over a link. |
Message Input Background Color | message_input_background
Default: #FFFFFF |
The background color of the input field, where customers type their messages. |
Message Input Font Color | message_input_font_color
Default: #000000 |
The color of customer messages as they type. |
Operator Activity Font Color | activity_color
Default: ${text_color} |
The color of the message about agent activity. |
Required Text Font Color | required_font_color
Default: #C9C9C9 |
The color of the "Required" label in forms. |
Status Message Background Color | status_background
Default: #FFFFFF |
The background color of status messages. |
Status Message Font Color | status_font_color
Default: #000000 |
The color of status messages. |
Key | Variable | Description |
---|---|---|
Icons - Header - Menu | icon_header_menu
Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.png |
|
Icons - Header - Minimize | icon_header_minimize
Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/minimize-arrow.png |
|
Icons - Menu - Minimize | icon_menu_minimize
Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/minimize.png |
|
Icons - Menu - Close | icon_menu_close
Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/close.png |
The chat window is where you configure the customer?s chat experience. It controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button. Chat windows can be customized in a number of ways.
Need more info? There?s an entire section about chat windows.
You can enable file transfer in the chat window for both agents and customers.
It is possible to enable agents and customers to send files to each other. In the chat window settings, you can set this in one or both directions depending on your use case. We typically recommend turning this option on in both directions.
More efficient resolution through file transfer leads to increased customer satisfaction.
Digital DX AI offers automatic language translation in conversational and search modes. It enables your bot to answer your international visitors in any language while end user requests are served from one knowledge base in one language. This feature helps the multilingual support of knowledge bases that frequently change without the need of having to provide the translations as well. The translation engine supports more than 46 languages. The quality of Digital DX's automatic translation is almost as high as if you used a dedicated knowledge base per language.
Customers can switch between viewing the original bot or agent message, and the translated version of the message provided by GeoFluent. By using the toggle displayed above the input filed at the bottom of the widget, customers can check the original message in case of unclear translations. Currently, this toggle is always switched on.
GeoFluent supports the following languages in the chat window:
Afrikaans* | Arabic* | Bengali* | Bulgarian* | Chinese (Simplified)* | Chinese (Traditional)* |
Croatian* | Czech* | Danish* | Dutch | English (UK)* | Finnish* |
French | French (Canadian)* | German | Greek* | Hebrew* | Hindi* |
Hungarian* | Icelandic* | Indonesian* | Irish* | Italian | Japanese |
Kazakh | Korean | Lithuanian | Malay* | Norwegian (Bokmal)* | Norwegian (Nyorsk)* |
Polish* | Portuguese* | Portuguese (Brazilian)* | Punjabi* | Romanian* | Russian* |
Serbian | Slovak* | Spanish | Swedish* | Tagalog | Thai* |
Turkish* | Ukrainian* | Vietnamese* |
* You need to translate the branding of the chat windows.
To set up auto-translation, contact your Customer Success Manager with the following information at hand:
Once your GeoFluent account is set up for your Digital DX AI account, all your conversational widgets can provide live translations. To enable it, you must set up a language selector as follows:
At the beginning of a chat session, customers can select their language in the widget. When the chat is channeled to a human agent, Digital DX Agent receives the selected language value from Digital DX AI and automatically offers the relevant GeoFluent translations.
Auto-translation in Digital DX Agent takes the following parameters into account:
If the agent and the customer share a common language, then there is no need for translation and it is switched off by default. Otherwise, if none of the agent languages match the customer language and the language pair is available, messages are translated automatically.
When auto translations for conversational mode is enabled for an account, you can run reports on three new fields in the Automatic translation section of the Admin Center > Reports page:
You can group reports by the Auto-translated and Query language options.
You can generate reports on GeoFluent-based auto-translation on the Analytics > Reports page of the AI Console. You can select the following report fields from the Automatic translation category:
If GeoFluent translation service is used and it fails to translate the response, a message is displayed that the translation service is not available. The user can then resend the request.
Take advantage of events and extend chat window features using JavaScript.
A layered chat window can trigger events during its life-cycle and allows you to work with JavaScript without restrictions.
On the Customization tab, select Layered - Detailed and select the Includes key group. Includes allow you to inject JavaScript code and attach event listeners to chat windows with different scopes:
Every layered chat window is comprised of a window and a frame object.
There are two ways to attach event listeners:
Can I remove a registered listener? Calling the addListener method prevents the listener to be cleared. Global functions can be removed.
Event | Global function name | Description | Arguments |
---|---|---|---|
new-message | bc_newHistoryMessageCallback | New message added to chat history |
|
chat-ended | bc_chatEndedEventCallback | Chat ended | |
push-page | bc_pushPageEventCallback | A PushPage request sent by the agent and the customer accepts to be redirected to the target URL |
|
page-loaded | bc_chatWindowLoadedEventCallback | Page loaded | |
resize | bc_resizeEventCallback | Elements resized |
Event | Global function name | Description | Arguments |
---|---|---|---|
new-message | bc_newHistoryMessageCallback | New message added to chat history |
|
page-loaded | bc_chatWindowLoadedEventCallback | Page loaded | |
chat-ended | bc_chatEndedEventCallback | Chat ended | |
chat-closed | bc_chatClosedEventCallback | Chat closed | |
push-page | bc_pushPageEventCallback | A PushPage request sent by the agent and the customer accepts to be redirected to the target URL |
|
resize | bc_resizeEventCallback | Elements resized | |
maximized | bc_chatWindowMaximizedEventCallback | Frame maximized | |
minimized | bc_chatWindowMinimizeEventCallback | Frame minimized |
The following snippets provide two different implementations of the same functionality.
iFrame object snippet (addListener method)
var _tEvents = {
"new-message": "bc_newHistoryMessageCallback",
"chat-closed": "bc_chatClosedEventCallback",
"chat-ended": "bc_chatEndedEventCallback",
"push-page": "bc_pushPageEventCallback",
"page-loaded": "bc_chatWindowLoadedEventCallback",
"resize": "bc_resizeEventCallback"
},
_tFunction = function(i, type, fName) {
console.warn("event \"" + i + "\" captured inside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
};
for (var i in _tEvents) {
mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}
window object snippet (global function)
var _tEvents = {
"new-message": "bc_newHistoryMessageCallback",
"resize": "bc_resizeEventCallback",
"chat-closed": "bc_chatClosedEventCallback",
"chat-ended": "bc_chatEndedEventCallback",
"minimized": "bc_chatWindowMinimizeEventCallback",
"maximized": "bc_chatWindowMaximizedEventCallback",
"page-loaded": "bc_chatWindowLoadedEventCallback",
"push-page": "bc_pushPageEventCallback"
},
_tFunction = function(i, type, fName) {
console.warn("event \"" + i + "\" captured outside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
};
for (var i in _tEvents) {
mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}
Auto Answers is a self-service support feature that provides customers a way to browse questions and answers before chatting live, deflecting common or repetitive engagement from agents.
When enabled, Auto Answers provides customers a way to browse questions and answers before chatting live, deflecting common or repetitive engagement from agents. The feature is configured per chat window definition, which allows you to differentiate and customize customers' chat experience on your site.
The typical engagement sequence for customers is as follows.
Auto Answers utilizes canned messages to present the most relevant answers to customers based on various factors, such as frequency of use, popularity, customer rating and key terms.
You can populate the pool of questions and answers using either the admin.Bold360.com or via API calls.
This method is the preferred way to import large amounts of data, such as an entire knowledge base or FAQ to be used with Auto Answers.
Fine-tune how and when Auto Answers are presented. For example, when do you want to show Auto Answers to customers? Will they be forced to read answers, or can they bypass them before engaging with an agent?
Result: The Edit Chat Window page is displayed.
Option | Description |
---|---|
When agents are unavailable: Show Auto Answers | When no agents are available, customers are shown Auto Answers. |
When agents are available: Show Auto Answers before chat | When agents are available, customers are always shown Auto Answers before reaching an agent. |
When agents are available: Show only if chat queue reaches % of limit | While the queue size stays below the defined threshold, Auto Answers is not available and customers can initiate live chat in the usual manner. The maximum queue size must be greater than zero. |
When agents are available: Bypass Auto Answers when the initial question yields no results | Customers reach an agent if no Auto Answers match their initial question. |
Option | Description |
---|---|
Optional ? Can bypass Auto Answers and chat anytime |
Customers are free to use Auto Answers or engage in live chat with an agent anytime. |
Mandatory ? Must use Auto Answers before chat is allowed |
Customers must ask questions or click responses a certain number of times before they can initiate live chat with an agent (Chat only after required clicks or questions). |
Adaptive ? When queue limit % reached, must use Auto Answers |
Customers are free to use Auto Answers or engage in live chat with an agent while the customer queue size stays below the defined threshold. When the threshold is exceeded, customers must ask questions or click responses a certain number of times before they can initiate live chat with an agent (Chat only after required clicks or questions). |
Option | Description |
---|---|
Irrelevant answer filter | Leave out results with no Keyword matches, no positive votes, and/or that have received negative votes after the same question. |
Boost by keyword match | Promote answers with terms in their Keyword field that match the customer's question. That is, a match on a Keyword carries more significance than a match on words in the body of the answer. |
Boost by positive ratings | Promote answers that are rated positively by customers. |
Demote by negative ratings | Demote answers that are rated negatively by customers. |
Demote by lack of reading | Demote answers that are regularly ignored by customers. |
Pop-up chat windows open in a new browser window.
You can customize the following interface elements:
You can use key chaining to reuse values for related elements.
A pop-up window has the following variables of individual elements:
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 can be customized per language. See also Provide a chat window in multiple languages.
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
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. |
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.
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.
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. |
Data obfuscation, also known as data masking, is a security feature that allows you to replace potentially sensitive data with generic characters to ensure that sensitive information is safe. You can set data (for example, credit card numbers, social security or personal ID numbers, telephone numbers) to be replaced by generic characters either in real-time or once the chat has ended.
This feature is part of the Chat Window setup, meaning that you cannot use data obfuscation in channels other than chat. A chat window controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button or link.
Option | Description |
---|---|
What to Conceal |
Note: Currently, the following numbers are concealed as they are considered to be credit card numbers:
|
When to Conceal |
|
We recommend enabling data obfuscation. The exact settings to configure depend on the organization; however, our recommendation is to encrypt all numeric strings, but "only upon close". This will allow agents and customers to see all numbers in the chat but will encrypt after the conversation. That being said, certain organizations may not accept credit card numbers over chat so it may make sense to encrypt credit card numbers "immediately, from everyone".
Customers who request a transcript and see encrypted numeric strings will have more confidence that their data is safe with you and your organization, leading to higher customer satisfaction. Stronger security and compliance with PCI and other standards.
Allow an agent to use smart answers and make Digital DX learn how to display better answers over time.
When adaptive answers are enabled, Digital DX automatically searches canned messages based on the real-time conversation occurring between the agent and the website customer. The most appropriate responses appear right where the agent needs them. Depending on certain factors, such as frequency of use, the context and relevance of messages are weighted and learned over time to generate better adaptive responses to a customer's query.
Result: The New/Edit Agent page is displayed.
How does it work in practice? When are "learned" canned messages presented to the agent?
You can adapt the appearance, layout, content, and behavior of chat windows to match your branding.
This feature is part of the chat window setup. A chat window controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button or link.
Result: You are ready to set up your Layered Chat Window or Pop-up Chat Window.
You should not deter customers from engaging with agents and finding answers they are looking for. The easier and seamless the process is, the more higher your customer satisfaction will be.
Advanced customization options provide further flexibility to design and script your chat windows.
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.
Every layered chat window comprise a window and a frame object with different scopes.
When linking to external images, you can use the following HTTP protocol formats:
Configure the customer's chat experience.
A chat window controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button, link, or invitation. Chat windows can be layered, pop-up, or AI-enabled and can be customized in a number of ways.
It is important to understand that "chat window" does not refer to a simple window (as in the actual graphical user interface element a customer sees), but rather a complex group of settings associated with that interface element.
Any chart window can be associated with any chat entry point or invitation:
The direction of the relationship is from button/invitation to window.
A button can only launch one specific chat window, while a chat window can be launched from multiple buttons or invitations.
The chat window controls the following aspects of your customers experience:
As the name suggests, a layered chat window appears as a new element on your page instead of as a new window. Layered windows are optimized for display on mobile devices, but many users prefer them for desktop browsers, as well.
A pop-up chat window opens in a new browser window.
In a Bold360 ai chat window, customers can get chatbot-assisted self-service. If the chatbot cannot provide a relevant answer, the customer has the option to contact a live agent. When an agent joins the conversation, they see AI-provided answers to the customer's questions. For more information, see Bold360 ai setup.
You should not deter customers from engaging with agents and finding answers they are looking for. The easier and seamless the process is, the more higher your customer satisfaction will be.
The Genesys DX (Bold360) platform will end of life on January 31st, 2024. This difficult decision was announced in March, 2023.
Genesys continues to make a strong commitment to Genesys Cloud, while tightening the portfolio to further accelerate feature growth on the platform. Part of that included bringing over key Genesys DX features to Genesys Cloud CX, such as Knowledge Optimizer that focuses on ease-of-use knowledge management. Digital only licenses for Genesys Cloud were also introduced late last year, which are suitable to those who are not looking for voice capabilities or who need agent seats that only feature support for digital channels.
As of January 31st, 2024, access to Genesys DX product interfaces and customer-deployed components stop to function. Users will no longer be able to log into product interfaces, and all of the boldchat/bold360/nanorep domains will become unavailable for use. If you are curious on what the code on your website related to this might look like and how to remove it, we encourage referencing this post on the DX community.
After January 31st, 2024, admins will still be able to get access for an additional 30 days. This period is meant to allow for extracting the necessary data from the platform. Historical data extraction from your account will be available to retrieve by data extraction APIs (Bold360 APIs and Nanorep APIs).
Every year, Genesys® orchestrates billions of remarkable customer experiences for organizations in more than 100 countries. Through the power of our cloud, digital and AI technologies, organizations can realize Experience as a Service℠, our vision for empathetic customer experiences at scale. With Genesys, organizations have the power to deliver proactive, predictive, and hyper personalized experiences to deepen their customer connection across every marketing, sales, and service moment on any channel, while also improving employee productivity and engagement. By transforming back-office technology to a modern revenue velocity engine Genesys enables true intimacy at scale to foster customer trust and loyalty.
Copyright © 2022 Genesys. All rights reserved.
Terms of Use | Privacy Policy | Email Subscription | Accessibility Feedback | Cookie Preferences