Touchpoint Articles

What browsers does the Bold360 AI widget support?

The Bold360 AI widget supports the following browsers to offer customers self-service on the go.

  • Google Chrome on Desktop and Android (Last 20 versions)
  • Mozilla Firefox on Windows (Last 10 versions)
  • Safari on iOS, iPadOS, and macOS (Last 3 versions)
  • Microsoft Edge (Last 5 versions)

Internet Explorer 10 and above is also available to use but it is not a recommended browser as it does not maintain support modern security and web standards.

TLS encryption support

The Bold360 AI platform uses TLS 1.2 encryption. Earlier TLS versions are not supported.

You can enable TLS 1.2 in the Windows Registry.

How do I copy a touchpoint's configuration?

You can export a touchpoint's configuration and then create a URL-based touchpoint with the same settings.

How to export a touchpoint's configuration

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating widget.
  3. Select a knowledge base or URL to see the touchpoint settings.
  4. Click the Export Configuration button to save the configuration to a JSON file.

  5. Save the file.

How to import a touchpoint's configuration

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating widget.
  3. Click Add new URL next to the drop-down list.
  4. Enter the customization URL and select File to copy the configuration from the exported JSON file.
  5. Click Choose File to select the configuration file.
  6. Click Save.
It may take a few minutes to import your touchpoint configuration.

How to display a warning message for long customer questions?

You can display a message when a customer's question is too long and hence it is unlikely to receive a relevant answer.

To define a message, do the following:

  1. In the AI Console, go to Touchpoints > Widgets > Floating widget.
  2. Click Personalize.
  3. Select a knowledge base or URL to customize.
  4. On the Texts & Colors tab, you have the following options:
    • Maximum length of user queries - Defines the maximum length of a customer's question that cannot be exceeded. This value does not have an effect on when the Warning for long queries is displayed.
    • Query length for displaying warning - Defines a threshold for the customer query's length. When this threshold is exceeded, the message defined in the Warning for long queries field is displayed.
    • Warning for long queries - Defines the warning message that is displayed to the customer
  5. Save your changes.

How to use a warning message - an example

Let's say you don't want your customers to have questions with more than 40 characters and when they type 30 characters, you also want to let them know that their question is getting too long.

In this case, you would set the Maximum length of user queries value to 40 as this prevents customers from typing more than 40 characters. At the same time, you would set Query length for displaying warning to 29 so that when this threshold is exceeded (when the customer types the 30th character), a warning is displayed.

Notice that if you want to display a warning exactly when the maximum length is reached, you would have to set the value of the Query length for displaying warning to one character less than the maximum length defined. If you set both values to the same value then the query length threshold will never be exceeded and, therefore, will never be displayed.

Smart Advisor: Chatbot-assisted conversations

When chatting with a customer, Smart Advisor offers agents potential answers to customer questions either based on the content of the chat conversation or by manual search.

These instant answers ultimately provide better user experience and increase agent efficiency: they allow agents to spend less time searching for answers, and improve Average Speed to Answer (ASA) in reporting.

Note: This feature is only available with a Bold360 AI platform account.

Important: You must have the Actions > Chats > Suggest response as Smart Advisor article permission enabled to use this feature.

During a conversation with the chatbot, customers have the option to connect to an available agent, if there are any. When the chat is transferred, the agent can view the full history of the conversation between the customer and the chatbot and continue that thread. The customer and the agent always use the same set of knowledge base articles.

When the customer sends a message to an agent, the chatbot analyzes that message and offers the most relevant answers to the customer's messages. These answers are listed on the Smart Advisor panel, which replaces the Canned Messages panel when the customer chats in a Bold360 ai chat window. Smart Advisor considers only those customer messages that have been sent since the agent's last interaction.

To copy the best answer to the message panel, click that response. You can edit your message before sending.

If your articles have contexts as well, you can select the relevant article variation from Smart Advisor panel.

Search Smart Advisor for help

You can manually search Smart Advisor articles when you are looking for results not listed automatically. To do so, type your question in the Search field. Automatic suggestions are provided as you type. Titles of the relevant articles are listed dynamically as you type your question. To see the content of an article, click its title. All previously displayed results are removed from the Smart Advisor panel.

To get the best search results, consider the following:

  • Grammatically accurate words return more relevant answers
  • Avoid very long phrases and generic statements

How to rate a Smart Advisor response

When Smart Advisor offers you responses, agents can always rate those responses.

  1. Click the arrow on the right of the suggested response to expand the article if not fully visible.
  2. Click Yes or No at the bottom of the article to rate whether the article was helpful.

    When you rate an article as not helpful, you can further categorize the problem with the article and suggest improvements. This rating improves the results that Smart Advisor provides.

How to suggest a response as a Smart Advisor article

When you cannot find a relevant answer to a frequent question, you can suggest your response as a Smart Advisor article. After approval, these articles are immediately available to every agent. To make a suggestion, do the following:

  1. Hover the mouse over one of your previous answers.
  2. Click Suggest as article .

Your answer must first be approved by a Bold360 ai knowledge base content manager before it becomes an article. You will not get any notification when your answer is approved.

Bold360 AI Events API for Slim and Harmony widgets

The Events API allows the customer to hook into various Bold360 AI widget events. For example, you can use this API to push different Bold360 AI events to a 3rd party BI system (for example Universal Analytics) and generate Bold360 AI-related Reports.

You can use Widget Events API on the page where the widget is implemented as follows:

<script>
Nanorep.floatingWidget.on({ // Nanorep.embeddedWidget 
  init : function() { 
    this.setConfigId('916824103'); 
  }, 
  load : function() { 
    this.setContext({ brand: 'Apple' }); 
  }
});
< /script >

You can find the full list of events and methods here: http://my.Nanorep.com/web/doc/v1.html?section=widgets

Example: Sending customized GA events
 
/* API here */ 
Nanorep.embeddedWidget.on({ 
  init : function() { 
    this.setConfigId("1010521062"); 
  }, 
  ask : function(query) {
    ga('send', 'event', { 
      'eventCategory': 'Nanorep Widget', 
      'eventAction': 'Search', 
      'eventLabel': query 
    }); 
  },
  feedback : function( feedbackInfo , answer ) { 
    var f_message; 
    let type = 'Bad '; 
    console.log(feedbackInfo); 
    
    if (feedbackInfo.text) { 
      f_message = feedbackInfo.text; 
  
    } else { 
      switch (feedbackInfo.type) { 
        case 4: 
          f_message = 'Missing or incorrect information'; 
          break; 

        case 8:
          f_message = 'Answer irrelevant to the page'; 
          break; 

        case 1: 
          { 
            type = 'Good '; 
          }; 
          break; 
      }
    }
    ga("send", "event", { 
      'eventCategory': 'Nanorep Widget', 
      'eventAction': type + 'feedback', 
      'eventLabel': f_message, 
      'dimension1': answer // additional custom dimension 
    })
  }, 
  
  escalate : function( channel , answer ) { 
    ga('send', 'event', { 
      'eventCategory': 'Nanorep Widget', 
      'eventAction': 'Escalation ' + '[' + channel + ']', 
      'eventLabel': answer }); },
  
  noResults : function( query ) { 
    ga('send', 'event', { 
      'eventCategory': 'Nanorep Widget', 
      'eventAction': 'No answer', 
      'eventLabel': query 
    }); 
  }
});

How to set up the Smart Advisor touchpoint

Smart Advisor provides agents access to the company?s knowledge base and offers them answers real-time based on what the visitor is asking in the chat.

Important: Smart Advisor is available to agents if Bold360 Agent is integrated with Bold360 AI and it is enabled on both platforms. For more information contact your Customer Success Manager.
  1. In the AI Console, go to Touchpoints > Widgets and choose Personalize for the Smart Advisor widget.
  2. Select a URL or knowledge base to customize.
  3. On the Basics tab, change the configuration based on your business needs.

    You have the following options:

    Name Description
    Display Article Last Update Select this checkbox to display when an article was last updated and who did the last update in the Smart Advisor. This information can be useful to agents: they can see whether the information is up to date and who they can contact about the article.
    Display Article Labels Select this checkbox to display labels associated with an article in the Smart Advisor. Labels can help agents decide if the content of the article is relevant to their query.
    Context info Add the context values to be considered when articles are displayed in Smart Advisor. This controls what content agents can access.
    Auto-complete count Enter the number of suggestions to be displayed in the auto-complete. If you enter 0, auto-complete is disabled. You can display up to 10 articles in the auto-complete.
    Comments Select this checkbox to enable agents to leave comments on existing articles. These comments are visible to all other agents in the Agent Workspace. Knowledge managers can find these comments on the Comments tab in the Article Editor for the relevant article.
  4. On the FAQ tab, set up an FAQ to display in Smart Advisor.
  5. Save your changes.

What is the difference between the widget skins?

The Widget escalation method is different between the widget skins.

In the arcade skin, the escalation configurations are performed through the contact form, while in modern skin all the escalations are made from channeling rules.

In the modern widget, skin escalation configurations will be defined through channeling - learn how to define smart channeling.

To use the modern skin for channeling, all previous channel configurations should be removed.

How to import touchpoint configurations

Copy configuration settings between widgets to jump start the configuration of your new widget.

You can easily copy the configuration settings of a touchpoint from another touchpoint. This allows you to test a touchpoint and then seamlessly migrate it to a widget in a live environment.

  1. In the Bold360 AI platform, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to update.
  3. Select a knowledge base or URL to update.
  4. Click Import Settings above the touchpoint settings.
  5. Select the knowledge base or URL of which settings you want to copy.
  6. Click Import.

Build a successful Acquire campaign

With so many products and services to choose from, website buyers have a hard time determining what is right for them. Therefore, they often leave without making a purchase.

Acquire proactively guides website visitors through the discovery process and remove barriers to checkout with seamless proactive chatbot and human engagements that deliver personalized assistance at the right time.

By setting up an outreach campaign, you can decide how to get in touch with customers already on the website and how to approach them before a chat with the bot or a live agent starts.

For example, you can also differentiate between customers based on cart size. In this case, you can define two separate outreach activities: one for low-value cart size when the bot engages the customer, and another one for high-value cart size when a live agent helps the customer purchase items from your online store. Depending on cart size, the customer has different shopping experience.

You can use combinations of predefined invitations and widgets and essentially perform A/B test on your outreach campaign. To follow the progress of your outreach activities, see the Outreach Activity and Conversion Monitor.

You can define both proactive Acquire and regular (reactive) bots and chat windows for your website: the proactive Acquire deployment would serve as a sales bot, while the regular chat window would provide standard customer support. If you already have a chat window implemented, you can easily extend that window with Acquire capabilities.

Why would you define an outreach campaign

Setting up and running an outreach activity enables you to increase your topline revenue. Whether your intention is to provide information, help customers through a sales process, or promote purchasing your products to your potential customers, Acquire provides the option to proactively engage your potential customers and offers the following additional benefits:

  • Differentiate between customers based on low/high value leads and conversions
  • Assign the best persona. For example, based on hesitation or cart size, either a chatbot or a live agent engages the customer
  • Decide when to run and who to target proactively
  • Reactive and proactive deployments co-exist in harmony
  • Personalized treatments, such as custom JavaScript implementation beside regular bot or agent engagements
  • Provide insight into how to improve customer experience
  • Outreach campaigns can co-exist with regular AI and agent implementations in the website. In other words, having a static entry point (chat button) in the website's code does not affect Acquire's proactive actions.
  • You can extend an existing code snippet with Acquire related entries, such as a new website ID

How to add the Bold360 widget to Google Chrome

As an end-user, before you can use the Bold360 widget in Google Chrome, you must add the widget as an extension to your browser.

  1. In Google Chrome, download the Bold360 extension from the Chrome Web Store.
  2. Click Add to Chrome.

    Result: You can now access the extension from your Chrome browser.

  3. Open the extension and enter the token that you have received from your admin.
You have the following experience when the search widget is active:

Figure 1. End-user's view when the Bold360 search widget is active in Google Chrome

What if the token is invalid?

Ask your admin to verify that the token is the correct one. If it is, your admin must create a new token and share that with you.

Slim Embedded widget customization

For instructions on how to implement these examples see How to customize the Slim widget? guide.

Customize widget header color

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select the knowledge base or URL to customize.
  4. On the Basics tab, select the Primary color of your widget.
  5. Save your changes.

To override the color set, use the following CSS code:

widget-embedded__header { background: red !important; }

Customize widget width and height

Embedded widget width is to be set for widget container div:

#nanorep-embedded-widget { width: 500px; height: 600px ;}

Customize widget title font and colors

.widget-embedded__header { font-family: 'Josefin Sans', sans-serif; 
/* If you use custom font, make sure to link it at parent page */ 
font-size: 20px ; 
font-weight: bold ; /* Bold text */ 
text-decoration: underline ; /* Underlined text */ 
font-style: italic ; /* Italic text */ 
color:green ; /* Font color. You can also use color set in HEX or RGB format */ }

Customize answer title font and colors

.answer-header__title-text-node { font-family: 'Josefin Sans', sans-serif; 
/* If you use custom font, make sure to link it at parent page */ 
font-size: 20px; 
font-weight: bold; /* Bold text */ 
text-decoration: underline; /* Underlined text */ 
font-style: italic; /* Italic text */ 
color: grey; /* Font color. You can also use color set in HEX or RGB format */ }

Customize answer text font and colors

We do not recommend overriding any settings except font-family and text color. All other text style changes are to be done in the Article editor.

.answer-body__html { font-family: 'Josefin Sans', sans-serif; color: grey; }

Customize links

[nr-normalize] a { text-decoration: none ; cursor: pointer ; color: red ; }

How can I customize negative feedback submission?

Once you have set up how visitors give feedback, you can customize how you want to gather negative feedback.

With both feedback input types, you have the following three options to collect feedback after the article receives negative feedback:

  • Open text
  • Multiple choice
  • Multiple choice and open text
To set this up, proceed as follows:
  1. In the AI Console, go to Touchpoints > Widgets.
  2. Under Floating widget or Embedded widget, select Personalize.
  3. Select the knowledge base or URL you want to customize.
  4. From the Feedback submission drop-down, select the desired option.
    • Select Open Text to display an input field to the visitor.

      If you select this option, you can customize the following:

      • Dialog Title: the text that appears above the input field.. You can use this option to specify what kind of feedback you would like to receive. How can we improve this article? is displayed by default.
      • Placeholder Text: the text presented in the input field before the user clicks in it.
      • Disclaimer Text: use this field to provide any kind of disclaimer to visitors who submit the form. This text is displayed under the input field.
      • Submit Button Text: the text that appears on the button that triggers submission. Submit is the default value.
    • Select Multiple Choice to display feedback options to the visitor.

      If you select this option, you can customize the following:

      • Search problem text: text for the first answer option. Missing or incorrect information is displayed by default.
      • Problem with answer text: text for the second answer option. Answer irrelevant to the page is displayed by default.
    • Select Multiple Choice + Open Text to combine the previous two.

      All customization options available for Multiple choice and Open Text are available for this feedback type .

  5. Save your changes.

How do I install the Embedded Widget?

The set up the Embedded Widget, follow these instructions:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Get the Code under Embedded widget.

If you have more than one knowledge base, you have to set up the widget for each knowledge base separately. If you do not have URL configuration for the page where you want to place the widget then the Master Settings configuration is used. If you want to use existing configuration from different URL or KB, use the corresponding checkboxes and select the required configuration from the drop-down list.

Important: if you have existing API for Modern and Arcade widgets you have to use legacy embedded code since the current widget design does not have backward API compatibility. In this case do the following:

  1. Select Get legacy embedded code and define widget size. The recommended size is: Width: 400, Height: 500.
  2. Copy the code you get and paste it into your website support / contact us page. You can also use the "Preview" box (on the right side) to see how it looks and to give it a try.

How to configure conversational touchpoints

There are several aspects to be defined in the touchpoint UX that are unique for conversational touchpoints, on web, messengers such as Facebook or within the app.

Define the behavior when an answer is not found

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating widget.
  3. Select the knowledge base that you want to change.
  4. In the Error answers field on the Conversation tab, type the answer when an answer is not found. You can define either a text to be presented or an article ID. Your defined responses will be presented sequentially when the bot does not find an answer.

Best practices to consider:

  • On the first attempt, encourage the user to rephrase.
  • If you want to offer channeling only on later attempts, for instance on the second attempt, you can insert an article's ID, which is associated with a channeling rule.

How to use extended search precision in conversational widgets

As a fallback option, you can set your conversational widget to perform a broader search for answers when the widget does not display results. To enable this fallback option, do the following:
  1. In Bold360 AI, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to modify.
  3. Select a knowledge base or URL to customize.
  4. On the Conversation tab, make sure you have selected Restrictive from the Search precision drop-down list.
  5. Select Allow algorithm fallback.
  6. In the Fallback statement field, enter a message that is displayed to the customer before offering additional answers.
  7. Save your changes.

What are the best practices for widget configuration?

Learn how to best configure your chat widget.

Positioning

When thinking about where to place your widget on your webpage, consider the following:

  • Make sure it is in line with other navigational aspects of your page.
  • It's common to put the widget on either the lower right or left hand side of the webpage as web page real-estate is valuable.
  • People tend to read more to the left and click more to the right. The left sidebar is better suited for navigation, the right sidebar is better suited for advertising and other widgets.
  • On mobile, most people scroll with their right thumb so a widget may be easier to see on the left side.

Color scheme

When it comes to choosing a color scheme for your widget, consider the following:

  • Everything about the bot should match your brand image, from the personality of the bot to the colors you choose for the text.
  • Your brand is important, but be mindful to make the widget noticeable. For instance, if your brand colors are blue and white and your web page background is blue, consider using a white icon to align with your branding but doesn't get hidden while also being blue.

What are some ways to increase chat engagement?

To increase traffic going to the bot and with that deflect call volume, keep these guidelines in mind:

  • Draw attention to the chat button by using a hover message, contrasting colors, animation or a bright catchy image.
  • Make sure you don't limit access to live chat by placing the widget in the footer of the page.

How do I show a specific answer when the widget loads?

The following API allows you to specify the question text or ID of an answer to open automatically when widget loads.

// For the floating widgets
 _nRepData['float'] = 
 {
 customValues:
 {
  onloadQuestionId: "1032006 
  onloadQuestion: "How much does it cost?
 }
 }
 // For the embedded widgets
 _nRepData['embed'] =
 {
 customValues:
 {
 onloadQuestionId: "1032006"
 }
 };

Where should the API be placed?

The API should be placed below the /*API HERE*/ comment in the widget script. See example below:

< !--do not modify this script -- > 
< div class='Nanorep_loadingData' id='NanorepProxyContainer' style='position:absolute;top:-500px;left:0px;' >
< /div > 
< script type='text/javascript' >
var _nRepData = _nRepData || []; 
_nRepData['kb'] = '633763325358580000'; 
_nRepData['float'] = {account: 'Nanorep', cdcVersion: 3, cdcFrame: '', scriptVersion: '2.29.3.4'} 
/* API here */; 

_nRepData['float'] = 
{ 
  customValues: 
  { 
    onloadQuestionId: "1032006 
    onloadQuestion: "How much does it cost? 
  } 
} 
(function(){var windowLoadFunc = function(){var _nRepData = window._nRepData || [];
_nRepData['windowLoaded'] = true;if (typeof(_nRepData['windowOnload']) === 'function') _nRepData['windowOnload']();};
if (window.attachEvent)window.attachEvent('onload', windowLoadFunc);
else if (window.addEventListener)window.addEventListener('load', windowLoadFunc, false);
var sc = document.createElement('script');sc.type = 'text/javascript';
sc.async = true;sc.defer = true;
sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'my.Nanorep.com/widget/scripts/float.js';
var _head = document.getElementsByTagName('head')[0];_head.appendChild(sc);})(); < /script >

How to disable auto-translation for search widgets

You can now disable auto-translation for a specific search widget.

Note: Auto-translation is an account-level feature. We support Google Translate and Geofluent as translation providers. Contact your Customer Success Manager to enable it for you.
  1. In the AI Console, go to Touchpoints > Widgets.
  2. Choose Personalize under the widget type you want to change.
  3. Select the knowledge base or URL you want to customize.
  4. On the Advanced tab, select Customize for the Enable auto-translation field.
  5. Clear the checkbox for this option.
  6. Save your changes.

How to make the answer displaying without the scrollbar?(Arcade and Modern widget)

Important: This solution is only applicable to legacy widget code.

To remove the vertical scroll-bar from the embedded widget, set dynamicSize to true in your script as follows:

< !--do not modify this script -- >
< div id='NanorepEmbedContainer' >
< /div >
< script type='text/javascript' >
   var _nRepData = _nRepData || []; 
   _nRepData['kb'] = ' YOUR_KB '; 
   /* API here */; 
   _nRepData['embed'] = 
{
   account:' YOUR_ACCOUNT_NAME ', 
   container: 'NanorepEmbedContainer', 
   width:400, 
   maxHeight:0 , 
   dynamicSize: true , 
   cdcFrame:'', 
   cdcVersion:3, 
   scriptVersion: '2.22.2.31'
};

(function(){
   var windowLoadFunc = 
      function(){
         var _nRepData = window._nRepData || [];
         _nRepData['windowLoaded'] = true;
   
         if (typeof(_nRepData['windowOnload']) === 'function') 
            _nRepData['windowOnload']();};
   
   if (window.attachEvent)
      window.attachEvent('onload', windowLoadFunc);

   else if (window.addEventListener)
      window.addEventListener('load', windowLoadFunc, false);
   
   var sc = document.createElement('script');
   sc.type = 'text/javascript';
   sc.async = true;sc.defer = true;
   sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'my.Nanorep.com/widget/scripts/embed.js?account=ving';
   var _head = document.getElementsByTagName('head')[0];_head.appendChild(sc);
})();< /script >

How can I embed fonts in a Bold360 AI support center or widget?

To use paid font types in your Bold360 AI support center or widget, store them on your server and allow Bold360 AI to access them.

  1. Create a CSS file with font face declarations and store it on a server.
  2. Enable cross-origin resource sharing (CORS) on the server as described here.
  3. Allow access from the following resources:
    1. < name of account >.Nanorep.co. For example, if your account name is acme, allow access to acme.Nanorep.co
    2. For support centers, allow access to the support center sub-domain URL. For example, if your sub-domain is support.acme.com, allow access to this sub-domain.

Digital DX AI supports Floating widgets, Conversational widgets, Support Page widgets, and the Support Center, on a wide range of mobile devices including iPhone, iPad, and Android.

The mobile version of the widgets are completely mobile-responsive, and consistently size-relative to your mobile screen, regardless of zoom ratio.

Once you have the Digital DX AI widget script installed on your website, the mobile widget is implemented automatically, with no further configuration required.

The default settings can be modified. For more information, see How do I set the widget to be mobile-responsive?.

Slim Support Center widget customization

For instructions on how to implement these examples see How to customize the Slim widget? guide.

Customize widget width and height

Since this widget type is basically just a search bar from regular embedded widget its width can be limited by changing container div style directly:

#nanorep-embedded-widget {
width: 500px; 
}

As for the widget height, it is highly dependent on font settings in search bar. If you decide to increase/decrease height of search bar, you need to make sure that all the settings below are also increased/decreased:

.widget-embedded--support-center .query-field__placeholder,
.query-field__input {
    padding: 25px 15px 25px;
    /* padding bottom, padding right, padding top */
    line-height: 20px;
    /* should not be less than font-size value */
    font-size: 25px;
    /* should not be bigger than height value height: 90px; }

Answer title font and colors

.answer-header__title-text-node {
    font-family: 'Josefin Sans', sans-serif;
    /* If you use custom font, make sure to link it at parent page */
    font-size: 20px;
    font-weight: bold;
    /* Bold text */
    text-decoration: underline;
    /* Underlined text */
    font-style: italic;
    /* Italic text */
    color: green;
    /* Font color. You can also use color set in HEX or RGB format */
}

Answer text font and colors

Note that we do not recommend overriding any settings except font-family and text color. All other text style changes are to be done in the Article editor.

.answer-body__html { font-family: 'Josefin Sans', sans-serif; }

Customize links

[nr-normalize] a { text-decoration: none ; cursor: pointer ; color: red ; }

What is the Embedded (Support Page) Widget?

The Support Page Widget is a frame that you embed in your main customer support page for visitors to ask questions and receive answers. This dynamic easy-to-use support center that is connected to your multi-channel articles knowledge base.

Get installation instructions for the embedded widget.

How to set up focus for the embedded widget?

You can focus your webpage on the embedded widget upon loading. To enable this ability, follow these instructions.

  1. In the AI Console, navigate to Touchpoints > Widgets.
  2. Click Personalize under Embedded Widget.
  3. Select the knowledge base or URL that you want to edit.
  4. On the Advanced tab, select Embed grabs focus.
  5. Click Save changes to apply the new settings.

Slim Side widget customization

For instructions on how to implement these examples see How to customize Slim widget.

Change widget header and side opener colors

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select the knowledge base or URL to customize.
  4. On the Basics tab, select the Primary color of your widget.
  5. Save your changes.

If you want to override the color set, use the following CSS code:

.widget-side__header, .core-search__query-field { background: red ; }

To change the side opener background color, override the following classes:

.widget-side__opener-container, .widget-side__opener { background: red ; }

You can also change the Side opener icon:

To do so, on the Basics tab of the widget customization page enter the new HTML code in the Custom Opener field.

To increase the size of the Side opener to match your image size, do it by modifying the following classes:

.widget-side__opener-content, .widget-side__opener { width: 60px ; }

Change widget width

For expanded state:

.widget-side--expanded div.widget-side__wrapper{ width: 500px ; }

Change widget title font and colors

.widget-side__caption { font-family: 'Josefin Sans', sans-serif; /* If you use a custom font type, make sure to link it at parent page */ 
font-size: 20px ; 
font-weight: bold ; /* Bold text */ 
text-decoration: underline ; /* Underlined text */ 
font-style: italic ; /* Italic text */ 
color: white ; /* Font color. You can also use color set in HEX or RGB format */ }

Answer text font and colors

We do not recommend overriding any settings except font-family and text color. All other text style changes are to be done in the Article editor.

.answer-header__title-text-node { font-family: 'Josefin Sans', sans-serif; /* If you use a custom font type, make sure to link it at parent page */ 
font-size: 20px ; 
font-weight: bold ; /* Bold text */ text-decoration: underline ; /* Underlined text */ 
font-style: italic ; /* Italic text */ 
color: green ; /* Font color. You can also use color set in HEX or RGB format */ }
.answer-body__html { font-family: 'Josefin Sans', sans-serif; }

Customize links

[nr-normalize] a { text-decoration: none ; cursor: pointer ; color: red ; }

Custom header and footer

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select the knowledge base or URL to customize.
  4. On the Basics tab, define your custom HTML code in the Custom Header and Custom Footer fields.
  5. Save your changes.

How do I change the position of the floating widget (bottom-left or bottom-right)?

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Under Floating Widget, click Personalize.
  3. Select the Knowledge Base, URL, or domain that you want to change. The Settings page for your Widget is displayed.
  4. Under Basics > Dock Position, select left or right, as required.The change is shown in the display of how your widget will look, in the right-hand section of the page.
  5. Click Save changes that is displayed, and then click OK. The change is made instantly in the widget on your website.

How do I disable the widget for a certain page/domain?

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the Widget that you want to change.
  3. Select the Knowledge Base, URL, or domain that you want to change.
  4. Click the Advanced tab.
  5. In the Widget Enabled field, clear the checkbox to disable your widget.
  6. Click Save changes and then click OK.The change is made instantly on your website.

How do I change the floating widget size?

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Under Floating Widget, select Personalize.
  3. Select the knowledge base or URL you want to customize.
  4. Select Position & Size and make changes to the settings.
    Name Description
    Bottom margin The distance in pixels from the bottom.
    Side margin The distance in pixels from the side. The default is 10.
    Minimized width The widget's width when minimized, before mouse-over.
    Note: This option is only relevant when Minimized widget mode is set to Normal or Normal with minimize.
    Expand on rollover When selected, the widget expands when the mouse hovers over it.
    Note: This option is only relevant when Minimized widget mode is set to Normal or Normal with minimize.
    Important: This option works when a website uses the code available in the touchpoint configuration.
    Expand on page load When selected, the widget expands when the page loads.
    Important: This option works when a website uses the code available in the touchpoint configuration.
    Open on click The widget opens when the visitor selects it.
    Float auto-minimize timeout The amount of time the widget is visible for.
    Minimized widget mode You can select how the widget behaves when minimized.
    Minimized icon This option becomes available for widgets with Harmony skin when Minimized widget mode is set to Minimized. You can upload a custom image for the minimized widget mode.
    Welcome Mode You can now proactively invite your website visitors to chat by displaying a welcome message that could appear above the chat icon in Slim and Harmony widgets.
    Important: This option works when a website uses the code available in the touchpoint configuration.

    Welcome mode welcome message trigger time (in seconds)

    This option becomes available when Welcome Mode is set to Invite. Enter the number of seconds to wait before the welcome message is presented.

How do I change the widget text when minimized?

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget that you want to change.
  3. Select the Knowledge Base, URL, or domain where you want to make this change.
  4. On the Basics tab, type the message in the Title (minimized) field that you want to display in your widget when minimized. The change is shown in the display of how your widget will look, in the right-hand section of the page.
  5. Click Save changes, then click OK.

What are the options for configuring a conversational widget?

Conversational settings per touchpoint

These settings apply to a chosen conversational touchpoint when Skin is set to Slim and Widget Mode is set to Conversational. To adjust these settings, go to Touchpoints > Widgets > Floating widget > Personalize > Conversation.

Option Definition
Persistent menu value

You can add a quickly accessible list of articles to the conversational widget. You can access the persistent menu options on the left side of the chat field. These options can be used either as a persistent FAQ or as channeling by linking a referred article and hence creating a persistent escalation button.

Articles can be added as a comma separated list of [ articleid ] : [Display title] pairs. [Display title] is the title to be presented in the list. If auto-translations are enabled, the content of these lists are also translated. Customers have the following experience when a persistent menu is enabled for a conversational widget:

Require API Key (Floating widget only)

Use only when access to the conversation should be restricted to an API key. Required when your Bold360 AI setup includes conversation via mobile app.

Tip: If conversational features are not working, make sure this option is set to No.

Enable Channels

Toggle channeling on to enable channeling policies to be applied to this widget.

Enable Feedback

Prompt users for Yes/No feedback regarding their experience. For a Yes response, users are thanked for their feedback; no other data is stored. For a No response, users are prompted to enter verbatim feedback and the response is reported as negative feedback. Contact Bold360 AI support for assistance customizing the Yes/No options.

Instant feedback

Customers can provide instant feedback on each answer that they receive in a conversational widget. When enabled, thumbs-up and thumbs-down buttons are displayed at the bottom of the answer in conversational mode for the customer to give instant feedback on it.

Time before feedback

After each inquiry, the amount of time in seconds to wait before prompting users for feedback. Reset with each submission. This option is available when Enable Feedback is selected.

Feedback text

This is the message users see when prompted for feedback. The default text is "Was I helpful?" If the user clicks Yes, the bot replies "Thank you." If the customer clicks No, the bot replies "How can I improve?" The user can then type a response, to which the bot replies "Thank you." Contact Bold360 AI support for assistance customizing this text.

Ask an agent

Show users a link that allows them to contact an agent according to your channel setup. The link text is "Ask an agent." If a user clicks the link, the bot becomes unable to provide answers for 30 minutes. Contact Bold360 AI support for assistance customizing the link text.

Show support center link

Show users a link to your support center. The link text is "Open in browser." Contact Bold360 AI support for assistance customizing the link text.

If no support center is associated with the knowledge base, a link to the article is presented.

Enable answers in parts.... For long articles, show part of the answer and a link to expand the article. The link text is "Read More +." For more about the Read more button, see How can I customize message length in widgets?
Context info

Define the context applied to this touchpoint. You must use the same context as set on the Admin Center > KB Setup > Context tab. This allows you to provide a unique answer per touchpoint.

Search precision

Set how widely the bot searches for answers. We suggest using the default value (Restrictive) since other options may result in too many (Normal) or too few (Very Restrictive) results.

Multiple results header The text users see above numbered options when the bot finds multiple articles.
Error Answers Add a statement or article the bot shows in response to questions it cannot answer. The first answer in the list is shown in response to the first question the bot cannot answer. The second is shown in response to the second question it cannot answer. Etc. This is defined per knowledge base, not per touchpoint.

Use Quick options for a conversational article in the Article Editor

For conversational articles, you can define whether you want to use Quick Option buttons for a question directly from the Article Editor. When using quick buttons for a property (that is for a question), the widget displays results to the customer as a list of options to choose from. If you believe that your customers would see too many buttons as options, you can simply disable Quick Options while editing a conversational article, without editing the related entity.

Note: If you disable quick options for a property in the Entities editor, then you cannot enable it in the Article Editor.

How to create a post-chat survey

You can create a post-chat survey for bot conversations using a custom entity that captures the survey questions.

You can configure the conversational widget to present a post-chat survey if the user has been inactive for the specified amount of time. Customer responses collected with such a survey are stored as entities and can be extracted through the reporting API in the form of a table that includes all survey responses.
  1. Create a custom entity that includes the survey questions.
    1. In the AI Console, go to Knowledge Base > Entities.
    2. Choose (Create Entity).
    3. On the New Entity page, Select Custom Entity for Entity Type.
    4. Enter a name and a description for the entity.

      Example: For example, use survey as name and post-chat survey as description.

    5. Select Intent in the Life Cycle field.
    6. Add the survey questions to the Properties Table.

      Example:

      Table 1. Example questions for post-chat survey
      Name Detect Bot Query Error Message Life Cycle
      NPS Number On a scale of 1 to 10, how would you rate your experience? Please enter a number. Intent
      Comment Text What can I do to improve? You've entered a wrong format. (Default message) Intent
      Note: If you set up the entity as it is in this example, you can use the API configuration in this article with minimal adjustments.
  2. Create an article that uses the custom entity you just created.
    1. In the AI Console, go to Knowledge Base > Articles.
    2. Choose (Create Article).
    3. Enter an intent for the article.

      Example: For example, Post-chat survey.

    4. On the Content tab, choose Add Entity and select the entity you created.
    5. In the text field of the Content tab, enter the text you want to present to the user once they completed the survey.

      Example: For example, you could add Thank you for your feedback.

    6. Publish the article.
    7. Open the article you just created and copy its ID.
  3. Set your conversational widget to present the chat survey after the visitor has been inactive for a specified amount of time.
    Note: Besides presenting the survey article after the visitor has been inactive for some time, you can also set the survey article as a persistent menu value or add it to specific articles using a quick action button.
    1. In the AI Console, go to Touchpoints > Widgets.
    2. Select Personalize under the type of widget you want to present the post-chat survey.
    3. Select the knowledge base or URL to customize.
      Note: Make sure the widget you select is a conversational one.
    4. On the Conversation tab, enter the ID of the article you created for the chatbot survey in the Customer Inactivity Message field.

      Result: The Customer Inactivity Timeout field appears.

    5. In the Customer Inactivity Timeout field, specify the time in seconds that should pass before the survey is presented.
    6. Save your changes.

Slim Floating widget customization

For instructions on how to implement these examples, see How to customize the Slim widget

Note: This guide is applicable only for Slim Float widget.

Set widget header color

Header color can be changed directly in the Widget settings:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select the knowledge base or URL to customize.
  4. On the Basics tab, select the Primary color of your widget.
  5. Save your changes.

To override the color set, use the following CSS code:

.widget-floating__header {
    background: red !important;
}

Set widget width and height

For both expanded and minimized states:

.widget-floating__wrapper {
    width:600px;
}

Only for expanded state: 

.widget-floating--state-2 > .widget-floating__wrapper  {
    width: 600px;
    height: 720px;
}

Only for minimized state:

.widget-floating--state-0 > .widget-floating__wrapper , .widget-floating--state-1 > .widget-floating__wrapper {
    width: 650px;
    height: 200px;
}

Bottom and side margins

For both expanded and minimized states:

widget-floating__wrapper {
margin-left: 100px;
margin-bottom: 100px;
}

Only for expanded state:

.widget-floating--state-2 > .widget-floating__wrapper  {
margin-left: 100px;
margin-bottom: 100px;
}

Only for minimized state:

.widget-floating--state-0 > .widget-floating__wrapper , .widget-floating--state-1 > .widget-floating__wrapper {
margin-left: 100px;
margin-bottom: 100px;
}

Widget title font and colors

.widget-floating__title {
    font-family: 'Josefin Sans', sans-serif;
    /* If you use custom font, make sure to link it at parent page */
    font-size: 20px;
    font-weight: bold;
    /* Bold text */
    text-decoration: underline;
    /* Underlined text */
    font-style: italic;
    /* Italic text */
    color: grey;
    /* Font color. You can also use color set in HEX or RGB format */
}

Answer title font and colors

.answer-header__title-text-node {
    font-family: 'Josefin Sans', sans-serif;
    /* If you use custom font, make sure to link it at parent page */
    font-size: 20px;
    font-weight: bold;
    /* Bold text */
    text-decoration: underline;
    /* Underlined text */
    font-style: italic;
    /* Italic text */
    color: grey;
    /* Font color. You can also use color set in HEX or RGB format */
}

Answer text font and colors

Note that we do not recommend overriding any settings except font-family and text color. All other text style changes are to be done in the Article Editor.

.answer-body__html { font-family: 'Josefin Sans', sans-serif; color: grey; }

Customize links

[nr-normalize] a { text-decoration: none; cursor: pointer; color: red; }

Display warning message for long customer questions

You can display a message when a customer's question is too long and hence it is unlikely to receive a relevant answer.

To define a message, do the following:

  1. In the AI Console, go to Touchpoints > Widgets > Floating widget.
  2. Click Personalize.
  3. Select a knowledge base or URL to customize.
  4. On the Texts & Colors tab, you have the following options:
    • Maximum length of user queries - Defines the maximum length of a customer's question
    • Query length for displaying warning - Defines the threshold of the customer query's length. When this threshold is exceeded, the message defined in the Warning for long queries field is displayed.
    • Warning for long queries - Defines the warning message that is displayed to the customer
  5. Save your changes.

How to use the Harmony widget skin?

To provide smoother experience for your customers using the bot and a live agent in Conversational mode, you can now choose the Harmony widget skin. The Harmony skin offers the following benefits:

  • Smooth animations on selecting quick options and persistent options
  • Simplified look: customer icon has been removed
  • Clear visual separation between bot and live agent
  • Animated transition when is chat is transferred from the bot to a live agent
  • Pre-chat form is now inline
  • Added agent typing indicator animation
  • The End Chat button is now an icon
  • Removed the Email transcript to me button

The customer has the following experience when using the Harmony widget skin:

To select the new widget design, do the following:
  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to modify.
  3. Select a knowledge base or URL to customize.
  4. On the Basics tab, select Harmony from the Skin drop-down list. Contact your Customer Success manager if this option is not available.
  5. Save your changes.

Check out our sample video on the new Harmony skin.

How do I set the widget to be mobile-responsive?

The web page on which the widget is installed must be a native mobile-responsive website. If it is not a mobile-responsive website, the mobile widget will be displayed in normal mode. In normal mode the widget is opened in a separate window when clicked.
  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type you want to change.
  3. Select the URL or knowledge base where you want to make your change.
  4. On the Advanced tab, select the following options:
    • Mobile widget enabled
    • Mobile - responsive behavior enabled
  5. Save your changes.

How to gracefully minimize widget after live chat ends

For Slim and Harmony widgets in Conversational mode, you can now define a closing salutation before the widget closes automatically at the end of a live chat. This way, you can let customers close the chat widget themselves. To do so,
  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select a knowledge base or URL to customize.
  4. On the Basics tab, make sure you have a Slim or Harmony selected for Widget Mode.
  5. On the Advanced tab, select Display goodbye message before closing the widget.

    This option is disabled by default.

  6. Save your changes.

Customers have the following experience when ending live chat:

How can I customize message length in widgets?

How to customize the "Read more" character count

You can set the maximum length of bot answers that are presented in a conversational widget. When a bot answer exceeds this character limit, it is truncated and a Read more button is displayed, which opens the article in full length.

When set to 0, articles are displayed in full length.

To define when the Read more button is displayed, do the following:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select a knowledge base or URL to customize.
  4. On the Basics tab, make sure you have Conversational selected for Widget Mode.
  5. In the Maximum Length Before Answer is Truncated field, click Customize.
  6. Type the number of characters to display without truncating the article.
  7. Save your changes.

How to override "Read more" character count at article level

You can manually change when the Read more button is displayed for a specific article.

Note: This setting only applies to conversational web widgets.
  1. In the AI Console, go to Knowledge > Articles.
  2. Select an article that you want to modify.

In the menu bar, click the Read More button.

The Read more separator is displayed.

  • In the article, hover your mouse over the Read more separator. Click and drag the multi-arrow icon on the left to move the separator.
  • Save your changes.

When the widget displays the article, the Read more button is now displayed at the revised place in the article.

Message length customization with the API in conversational widgets

You can define the length of messages before they are truncated and the Read more button is displayed in conversational web widgets. For example, to set visible message length to 400 characters, you can use the setReadMoreLimit Widget API method as follows:

nanorep.floatingWidget.api.conversation.setReadMoreLimit(400);

By default, the first 320 characters of a message are displayed.

Message length customization with the API in mobile widgets

You can define the length of messages before they are truncated and the Read more button is displayed in conversational mobile widgets. You can set the visible message length between 320 and 640 characters in the mobile application.

How to customize the widget header icon

For Harmony widgets in Conversational mode, you can display an image in the widget header on the left side.

You can add a custom logo to the header of the Harmony widget.
  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type you want to change.
  3. Select the URL or knowledge base where you want to make your change.
  4. On the Basics tab, make sure you have Harmony selected for Skin.
  5. In the Title Icon field, click Customize.
  6. Click Upload Image and select the logo you want to display in the widget header.
  7. Save your changes.

Your customers will have the following experience:

Floating widget customization (Arcade and Modern widget)

Customizing the Look & Feel

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. Select a knowledge base or URL to customize.
  4. On the Basics tab, you have the following options:
    • Widget color customization: click on the colored box next to Primary color and select the color you want.
    • Expanded widget title text customization (the widget after mouse over): change the text shown in the Title field.
    • Minimized widget title text (the widget before mouse over): change the text ("Have a Question?") shown next to the Title (minimized) field.
    • For dock position (Where the widget is placed on the page): click Customize next to the Dock Position field. Default docking is left positioning; you can change it to be poisoned right.
    • For Custom CSS: to modify the CSS for the widget insert the CSS code in the Custom CSS box.
    • Decoration image:
      • Decoration image: select an image from library or add an image URL.
      • Image position: define the position of the back image.
      • Widget back image question on click: Auto question which appears if clicking on the decoration image.
      • Widget back image timeout (milliseconds): Time to show widget. Set in milliseconds and removes the image when the time is up. If the time is 0, the image will not disappear.

Customizing Default Text

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. Select a knowledge base or URL to customize.
  4. On the Texts & Colors tab, you have the following options:
    • Search box initial text: change the text in the Search box initial text field.
    • 'No results' text customization: change the text in the No Results message field.

Customizing Fonts & Colors

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. Select a knowledge base or URL to customize.
  4. On the Texts & Colors tab, you can change the fonts and colors of the following widget elements:
    • title
    • answer text
    • answer title
    • links (colors only)

Customizing Position & Size

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. Select a knowledge base or URL to customize.
  4. On the Position & Size tab, you have the following options:
    • Bottom margin: fill in the distance in px from the bottom of the window
    • Side margin: fill in the distance in px from the side of the window (default is 10px)
    • Minimized width: adjust the widget's width when minimized (before mouse over)
    • Expand on rollover: select to make the widget expand when the customer moves the mouse over the widget. If not selected, the widget expands only on click.
    • Float auto-minimize timeout: enter the time the widget is expanded from page load until it becomes minimized. If the time is not 0 then mark the next field as well.
    • Expand on page load: select to make the widget expand when the page loads. If not selected, the widget expands when the page loads.

Advanced Customization

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. Select a knowledge base or URL to customize.
  4. On the Advanced tab, you have the following options:
    • Auto-Label tickets (IDs) first, choose the relevant URL in the URL combo box. Then, select the label to be attached to a ticket from the URL.
    • Append footer to answers add text below the answers. Suitable for campaigns or notifications you want to promote to your customers. The text can include a "HTML" as well.
    • Append once after results: when more than one answer is suggested, the text will only be added below the last suggestion.
    • Widget enabled: mark / unmark it to show or hide the widget.
    • Mobile widget enabled: Check / uncheck it to show or hide the floating widget on mobile phones.

How to customize the Minimized icon in conversational widgets

You can display any image for the minimized mode button of a conversational widget. This helps you align the appearance of the chat bubble to your brand, directly from Bold360 AI.
  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type you want to change.
  3. Select the URL or knowledge base where you want to make your change.
  4. On the Basics tab, make sure you have Conversational selected for Widget Mode and Harmony is selected for Skin.
  5. On the Position & Size tab, make sure you have Minimized selected for Minimized widget mode.
  6. In the Minimized icon field, click Customize.
  7. Select Upload Image and choose the image you want to display.
  8. Save your changes.

How to make the widget open automatically in full screen

For customers on mobile devices, the Slim and Harmony widgets are optimized for mobile experience: when the customer clicks the chat button, the chat widget is displayed in full screen. In a Harmony widget, customers on mobile devices have the exact same experience as customers on the web.

To enable this feature for customers on mobile, do the following:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type you want to change.
  3. Select a knowledge base or URL to customize.
  4. On the Basics tab, make sure you have a Slim or Harmony selected for Widget Mode.
  5. On the Advanced tab, select Enable Full Screen Mobile Widget.

    This option is disabled by default.

  6. Save your changes.

Customers have the following experience on their mobile devices:

.

How to change the number of articles displayed in FAQs in Floating widgets

  1. In the AI Console, go to Touchpoints > Widgets > Floating widget.
  2. Click Personalize.
  3. Select a knowledge base or URL to customize.
  4. On the FAQ tab, enter the number of answers you want to show from a selected knowledge base.
  5. Save your changes.

I have just installed the widget and there are no Q&A shown, why?

You probably forgot to associated the domain to the Knowledge Base.

To associate the domain to the Knowledge Base, do the following:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize in the version of the Widget for which you want to make the change.
  3. Select the URL or domain that you change.The Settings page for your Widget is displayed.
  4. Underthe Basic tab, Choose the knowledge base from the drop-down list.

How to show notifications to customers

Display an unread message count on minimized widgets

The number of unread agent messages can be displayed on the conversational widget in Normal with minimized option mode.

Note: You can change the Minimized widget mode on the Position and Size tab of the widget settings.

To enable this feature for customers, do the following:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select a Knowledge Base or a URL and go to the Advanced tab.
  4. Select Display unread message count on minimized widget and save your change.

The number of agent messages will be displayed on the minimized widget.

This feature is disabled by default.

Display agent message notifications on the browser tab

A browser tab message notifies the end user about an incoming message. This is displayed when the customer receives a message from a live agent while navigating away from the browser tab where the chat widget is displayed. The browser tab title periodically changes to the notification message for a few seconds.

To enable this feature, do the following:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select a Knowledge Base or a URL and go to the Advanced tab.
  4. Type your message to the Browser tab notification text field. To add the name of the agent who's chatting with the customer type [AGENT]. For example, Message from [AGENT]...

  5. Save your changes.

How do I expand the Floating Widget?

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. Select the knowledge base or URL that you want to change.
  4. On the Position & Size tab, click Customize next to Minimized widget mode and select how the widget is displayed when minimized. Hover your mouse over the Widget Preview pane to see how the individual options influence widget behavior.
  5. Click Save changes and then click OK.

    Result: The change is made instantly in the widget on your website.

How to implement a floating widget on your site

Tip: Check out this training module for videos about touchpoint configuration.

The floating widget is an interactive window, which allows your customers to ask customer service questions and get instant answers, wherever they are on your website.

The widget is displayed constantly on your site, enabling customers to engage at any time. The widget is positioned at the bottom-left or right corner and shows answers that correspond to the question and how it is worded, immediately as a customer begins to type a question. The answers come from your Knowledge Base and guide the customers through the sales funnel, or other processes, according to the nature of the question asked.

The widget can be completely customized to reflect your brand colors and messaging.

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Under Floating Widget, click GET THE CODE and select the appropriate options:
    • Enforce HTTPS - Enforce secure communication of widgets on unsecure web pages
    • Enforce widget configuration - Enforce the script to use a specific configuration base on the Domain API ID (By choosing this option the widget will ignore the widget URL and Knowledge Base)
    • Enforce KB - Set a specific Knowledge Base for the widget
    • Set initial context - Set a context Type and context Value for the widget
    • Get the legacy embedded code - To use the Arcade or Modern skins - please mark this option (legacy code)
  3. Copy the code and paste it in the selected pages on your site.

How to change the look and feel of the floating widget

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under Floating Widget.
  3. If you have more than one Knowledge Base, select for which Knowledge Base you are making this change.
  4. The Settings page for your Widget is displayed. The Settings page is comprised of several tabs, within each of which you can configure your Widget and personalize the look and feel. Below is a table detailing what you can do in each tab.
    Tab Description
    Basic

    The main fields in which you can alter or modify the look and feel of your widget.

    Texts and Colors

    Various fields in which you can change the widget's color and texts, for example, the automatic question, the title and chat and email button texts.

    Position & Size

    Enables you to specify the size of the widget as displayed on your site, and specify its exact position. You can also configure how much it should expand, as well as when and for how long.

    Chat

    Various fields which allow you to completely customize all your chat settings.

    Advanced

    Enables you specify more advanced settings, such as adding a customized footer to all answers, using HTML coding and specifying an action to take place if an answer is escalated.

    FAQ

    You can specify the nature of the FAQs and how they are selected and displayed. You also have to option to add a separate and customized FAQ list to your Knowledge Base.

    Contact Form

    The contact forms allow your users to escalate their questions to your agents.

  5. Click the Save changes button that is displayed, and then click OK. The change is immediately shown in the widget on your website.
  6. Any changes you make are shown in the display of how your widget will look, in the right-hand section of the page. You always need to save your changes for them to take effect, but they will usually do so instantaneously.

How to display FAQs in the floating widget as first interaction

In the floating widget, it is possible to display a list of articles or FAQ when the user clicks on the widget

To make the widget display an FAQ upon click, do the following:

  1. In the AI Console, go to Touchpoints > Widgets .
  2. Click on the Personalize button under floating widget, and choose the URL or knowledge base.
  3. Go to the Position & Size tab, and select Open on click.
  4. Go to the FAQ tab, and click Add FAQ List.
  5. Click More and make sure Display upon widget load is selected.
  6. Optional: Change the order in which the articles are presented.

    You have the following options:

    • Most Frequently Asked Questions, which orders articles based on popularity
    • Title Ascending, which puts articles in alphabetical order
    • Title Descending, which puts articles in reverse alphabetical order
    • Most Recently Updated, which orders articles based on last modified date and the most recently modified article is listed first

    By default, articles in your FAQ are sorted by popularity.

  7. Click Save Changes on the widget preview section to save the settings.

Can I make the floating widget expand only for a certain amount of time?

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Choose the Knowledge Base, URL, or domain that you want to change.
  4. Go to the Position & Size tab.
  5. In the Float Auto Minimize Timeout field, define how long you want the widget to be expanded in seconds. The default value is 0.
  6. Click Save changes, and then click OK.
The change is made instantly in the widget on your website.

How to deploy a Digital DX widget via GTM? (Arcade and Modern widget)

Note: If you use Slim widget or newer, see How to deploy the Digital DX widget via GTM?.

To implement the widgets via GTM, you must use the following widget script in your GTM:

< script type = 'text/javascript' >
    var nanoProxyContainer = document.createElement("div");
nanoProxyContainer.id = 'NanorepProxyContainer';
nanoProxyContainer.setAttribute("aria-live", "polite");
nanoProxyContainer.style.position = "absolute";
nanoProxyContainer.style.top = "-500px";
nanoProxyContainer.left = "0px";
document.body.appendChild(nanoProxyContainer);
var _nRepData = _nRepData || [];
_nRepData['kb'] = '19583554';
_nRepData['float'] = {
    account: 'Nanorep',
    cdcVersion: 3,
    cdcFrame: '',
    scriptVersion: '3.6.1.13'
} /* API here */ ;
(function() {
    var windowLoadFunc = function() {
        var _nRepData = window._nRepData || [];
        _nRepData['windowLoaded'] = true;
        if (typeof(_nRepData['windowOnload']) === 'function') _nRepData['windowOnload']();
    };
    if (window.attachEvent) window.attachEvent('onload', windowLoadFunc);
    else if (window.addEventListener) window.addEventListener('load', windowLoadFunc, false);
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.async = true;
    sc.defer = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'my.Nanorep.com/widget/scripts/float.js';
    var _head = document.getElementsByTagName('head')[0];
    _head.appendChild(sc);
})(); < /script>

Figure 1. Floating Widget Script
<script>
    var NanorepEmbedContainer = document.createElement("div");
NanorepEmbedContainer.id = 'NanorepEmbedContainer';
NanorepEmbedContainer.setAttribute("aria-live", "polite");
[TARGET - ELEMENT].appendChild(NanorepEmbedContainer);
var _nRepData = _nRepData || [];
_nRepData['kb'] = '19583554'; /* API here */ ;
_nRepData['embed'] = {
    account: 'Nanorep',
    container: 'NanorepEmbedContainer',
    width: 400,
    maxHeight: 500,
    dynamicSize: true,
    cdcFrame: '',
    cdcVersion: 3,
    scriptVersion: '3.6.1.13'
};
(function() {
    var windowLoadFunc = function() {
        var _nRepData = window._nRepData || [];
        _nRepData['windowLoaded'] = true;
        if (typeof(_nRepData['windowOnload']) === 'function') _nRepData['windowOnload']();
    };
    if (window.attachEvent) window.attachEvent('onload', windowLoadFunc);
    else if (window.addEventListener) window.addEventListener('load', windowLoadFunc, false);
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.async = true;
    sc.defer = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'my.Nanorep.com/widget/scripts/embed.js?account=nanorep';
    var _head = document.getElementsByTagName('head')[0];
    _head.appendChild(sc);
})(); </script>

Figure 2. Embedded Widget Script
Note: Replace the sections in bold with the relevant values.

Sample conversation with Harmony skin applied to the widget

The following is a sample conversation between a customer and a bot, which is then escalated to a live agent.

How to remove the widget shadow?

In order to remove the box shadow around the modern support center embedded widget, add the following script to the onload page script in the widget advanced settings:

(function() {
 var css = 'iframe[id^="Nanorep"] {box-shadow: none;}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
 if (style.styleSheet) {
 style.styleSheet.cssText = css;
 } 
else {
style.appendChild(document.createTextNode(css));
}
 head.appendChild(style);
})();

Conversational widget settings

You can customize conversational bot behavior in two ways:

  • By defining conversational flows per each article
  • By adjusting general settings of conversational widget

You can access conversational widget settings in Touchpoints > Widgets = > Conversation configuration section (note that Widget mode should be set to "Conversational" one in Basics tab for this tab to appear). Once there, you can find a number of options which can be changed:

Require API key

Enable Channels

Enabled by default, this option will add your existing escalation options for conversational widget

Enable Feedback

This option allows you to enable feedback feature on conversational widget experience.

Note that "Feedback text" should also be enabled and not empty to have feedback question shown.

Time before feedback

By default, feedback question will appear in 30 seconds after last interaction if no new questions were asked by user. Use this settings to increase or decrease this time period.

Feedback text

Mandatory field which contains text shown during feedback dialog. Empty by default so make sure to fill it with question if you want feedback option to be enabled.

  • Ask an agent
  • Show support center link
  • Enable answers in parts
  • Context info
  • Search precision

Multiple results header

This is a title of section which appear when question is not definitive enough and could possibly lead to multiple results so widget will ask user to select the one which he needs.

Once the desired options selected do not forget to press on "Save Changes" button in the top right corner of preview section:

How do I add the Bold360 AI Widget to the LivePerson Agent Console?

To integrate the Bold360 AI widget into the Live Person Agent console, you must set up Bold360 AI and the Live Person console as well.

Bold360 AI setup:

For information on setting up the integration in Bold360 AI, read this article. If you need more help with setting up Bold360 AI, contact your Customer Success Manager.

LivePerson setup:

  1. Login to your Liveperson admin console.
  2. Go to Rules > Visitor Rules > Rule Types and click When chat is established.
  3. Click New Rule.
  4. Fill in the name and description fields. You can enter Bold360 ai integration into both fields.
  5. Add Action as follows:
    • Type: "Operator Alerts"
    • Description: "Show Bold360 AI widget"
    • HTML: Paste the following HTML code to the HTML field and replace youraccountname with the name of your Bold360 AI account:
      <html>
            <!--openNewTab="Bold360 AI" keepBrowser="true"-->
            <SCRIPT>document.location='http://www.Nanorep.com/integrations/liveperson/lp.html?
             account=youraccountname';</SCRIPT>
            </html>

How can I add icons to labels in the support center?

You can add three icons to your support center labels: main, hover and active.

By default, if a label has a main icon only, it is used as the hover and active icon as well.

  1. In the AI Console, go to Touchpoints > Support Center.
  2. Select the support center and on the Settings tab, go to the Content section.
  3. Select Manage labels.
  4. On the Content labels dialog, choose the label you want to edit or create a new one.
  5. Choose for Main Icon and upload an image.

    Example:

  6. Optional: If you'd like to show different icons for active or hover, unselect Use main icon and upload an icon.

    Example:

Note: For these fields to affect the support center, PSO work is needed (for new customers this will work automatically).

How to copy support center settings between knowledge bases

When you already have a support center, you can copy the settings of the support center from one knowledge base to another so that you don't have to start from scratch.

  1. In the AI Console, go to Touchpoints > Support Center.
  2. At the top of the page, choose Copy Support Center.

    Result: The wizard is displayed.

  3. In the Select Target Support Center step, select the knowledge base where you want to replicate the existing support center in the Target KB field.
  4. In the Target Support Center, choose the support center in the target knowledge base into which you want to copy the settings.
  5. Select Next.
  6. In the Select Templates to be copied step, choose the support center templates that you want to copy to the new knowledge base.

    These are the templates that you can find on the Page Templates tab of the Touchpoints > Support Center page.

  7. Select Next.
  8. In the Select Support Center Settings to be copied step, choose the settings you want to copy to the new support center.
  9. Select Next.
  10. In the Summary and Confirmation step, choose Apply and when prompted, confirm that you want to overwrite the existing support center configuration in the target knowledge base.
    Important: Once you overwrite a support center configuration, you can't revert it to an earlier version.

What is the Support Center referrer?

The SC Referrer is a field in reporting. This field enables you to view which page in SC the user opened before reaching an article (Whether it was from FAQ in homepage, Label page or link from another article).

In the report the Values will be displayed as a URL (of the SC page). If the referrer is not in the support center (for example, an external link), the value will be displayed as empty.

To create this report, go to Analytics > Reports. Create a report according to your needs. Below is an example of how to create a report:

The results will be displayed as follows:


Featured

Bold360 21.10 Release Notes

Bold360 21.10 release notes

Bold360 version 21.10 contains the following new enhancements:

Enforcing HTTPS and removing HTTP across widget scripts

Going forward, there will no longer be an option to choose (non-secure) HTTP-only connections when generating widget touchpoint scripts. HTTPS will be enforced across all touchpoints going forward and HTTP-only widget configurations will no longer be supported as of December 31, 2021. Any widget script using HTTP only will need to be changed by this date in order to continue uninterrupted

Access to the Genesys DX AI management (*.nanorep.co) will only be accessible through HTTPs

In-product announcements will be present to raise awareness of this change

Important: Any widget script using HTTP only will need to be changed by this date in order to continue uninterrupted.

In-Product Rebranding

As part of the transformation to Genesys DX, the product interfaces are now rebranded to reflect this change. Logos, product names, and company links are now updated to Genesys branding and is present within each of the product interfaces.

getEstimatedWaitTime API call

Using the "getEstimatedWaitTime" API call will provide the estimated wait time that the visitor would spend waiting before starting a live chat with an agent.

Details on using this API can be located in this article.