Floating Widget Articles

What are fallback messages?

Fallback messages enable the bot to provide a response when there is no result or there are multiple options based on the user's input.

When there is one result based on the user's responses, you set up the final answer presented to the user in the body of the article that uses the entity. There could be multiple possible results or no result based on the user's responses. you define what happens in these cases in the Fallback Messages section of the entity.

No results

You can define a fallback message that is presented when the user's answers match the data in the entity source file, but there is no result in the entity that fits the customer's answers. Using the example in this article, if the customer is asking for an iPhone 7 with a 10 megapixel camera, the no result fallback message is presented as iPhone 7 and 10 megapixels are both part of the entity file, in model and camera pixels respectively, but there is no iPhone 7 with a 10 megapixel camera in the database. If however, the customer is asking for a Sony phone, which is not one of the brands in the file, the bot returns the error message defined in the widget configuration.

The fallback message for no result can be either a statement or an article. A statement is plain text that is displayed to the user.
Note: You can't select an article that contains an entity as a no result fallback message.

For custom entities, the message or article you define here is displayed when the customer provided wrong input more times than the property's error message is set to be displayed. For example, you have a property where detect is set to Email, the bot query is What's your email address? and the error message is Please provide an email address. which is set to be displayed 3 times. When the user fails to provide an email address for the fourth time, the fallback message or article is displayed.

Multiple results

When there is more than one result to present, you can set up the bot to generate a carousel of these results. In the Fallback Messages section of the entity page, set what cards in the carousel should look like: specify the property to be presented as title and subtitle, and if you have images in the data source, you can also provide an image property. Using the example in this article, you could have:

Tip: If you don't want to have a carousel of different results, you can use Quick Options instead. See What are the property options for data source entities? for more information.

API Invalid response (for API-based entities only)

Note: This option is displayed only when you provide a link to an API in the Data Source URL field. When your entity reads data through an API, the API may return an invalid response. For example, if your API receives invalid input from the customer or when the API server is unavailable. For these cases, you can define an error statement that is to be presented to the customer.

How to enable a conversational bot in an account

Before you begin: If this is the first time you are adding a conversational widget to your account, please contact your Customer Experience Manager or Support team to make sure that the knowledge base you are working on is enabled for conversations.

To enable a conversational bot in an account, do the following:

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Under Floating widget, click Personalize.
  3. Select the Knowledge Base or URL that you want to change.
  4. On the Basics tab, make sure that Widget Mode is set to Conversational.
  5. Save your changes.

HTTPS will be enforced across all Bold360ai web application touchpoints going forward and HTTP-only widget configurations will no longer be supported as of December 31, 2021

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

Why is this happening?

Encrypted communication is essential for safe transmission of data between the web server and browsers. Unlike HTTP, HTTPS establishes a secure connection by encrypting data. 
If an application does not use HTTPS, it is vulnerable to information disclosure and MITM attacks which attempt to strip encryption between the server and the client.

Changes in the Bold360ai 

After the change is introduced to the servers, you can only reach the servers through HTTPS. Servers are going to deny ALL HTTP requests.

Required actions

Bold360ai admin site
  • Visit your admin site only through HTTPS
  • Update any HTTP protocol bookmarks  to HTTPS.

  If admins try to reach the site through HTTP, the server denies access.

Deployed widgets
  • Redeploy widgets where the configuration does not enforce HTTPS communication.

 Widgets use the protocol of the site visitor, so if the widget does not enforce HTTPS communication, the widget appears broken to the visitor.

 NoteThe change does not affect widgets with enforced HTTPS configuration.

API endpoint calls
  • Update the address of your servers with the HTTPS protocol, so all API calls use the right address.

API calls where the protocol is HTTP get a deny response from the server.

 

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.

What browsers does the Digital DX AI widget support?

The Digital DX 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 Digital DX AI platform uses TLS 1.2 encryption. Earlier TLS versions are not supported.

You can enable TLS 1.2 in the Windows Registry.

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.

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 can I activate on-the-fly translation?

Digital DX AI offers automatic language translation using multiple language translation engines. It enables you to answer your international visitors and create/respond to tickets in any language - especially if you do not have agents speaking a specific language. The translation engine supports more than 34 languages (using Google translate V2).

Features and Benefits

  • Language is detected automatically.
  • Answer content and widget interface are automatically translated.
  • Once the translation symbol is shown, it enables the user to see the text in the original language by clicking on that symbol.
  • Allows you to answer foreign language tickets in your natural language.
  • Offers comprehensive translation analytics.

To activate the translation capabilities, please contact your Customer Success Manager.

Dedicated language Knowledge Bases

Digital DX AI allows you to have a separate dedicated knowledge base for each language, including Asian languages such as Korean or Chinese, and many more. In this way, you can associate each knowledge base with a different language on your website. When a user asks a question, a native answer from the dedicated knowledge base will be provided (instead of a translated one).

To activate a dedicated knowledge base, please contact your Customer Success Manager.

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 customize how visitors give feedback?

Set up the widget to gather feedback by displaying thumbs-up and thumb-down icons or yes and no buttons.

Note: Use these settings for customizing feedback. If you have instant feedback enabled, use the settings described in this article.
To set up icons or buttons for feedback collection on a touchpoint, do the following:
  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 input drop-down list, select Icons or Textual.
  5. Optional: Change other related settings.
    • Upload custom images for the positive and negative icons.
    • Enter a custom text in the Feedback question field. The text you enter here is displayed at the end of articles when textual feedback input is selected. Was this article helpful? is displayed by default.
    • Enter a custom text in the Positive text field. This text you enter here is the positive feedback option. Yes is displayed by default.
    • Enter a custom text in the Negative text field. This text you enter here is the negative feedback option. No is displayed by default.
  6. Save your changes.
What's next? Set up how you'd like visitors to provide negative feedback. See How can I customize negative feedback submission? for more information.

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 >

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?.

How do I change the LivePerson agent name color within the chat session?

  1. Log in to the AI Console and go to Touchpoints > Widgets.
  2. Click Personalize in the widget type that you want to change.
  3. If you have more than one Knowledge Base, select the one where you want to make your change.
  4. The settings page of the widget is displayed.
  5. On the Texts & Colors tab, scroll down to the bottom to the Chat Agent name color field.

  6. Click the color picker box to select a different color through hue or by RGB settings.
    Note: You see a preview of your selection in the right-hand of the page.
  7. Click Save changes and then click OK.
The change is made instantly in the widget on your website.

What options are available for gathering user feedback?

Digital DX offers a number of options to gather feedback about answers from website visitors.

You have the following options to make feedback submission easy and get the exact data you need:

What's the visitor experience like?

  • When customers provide positive or negative instant feedback in conversational mode, the feedback option that is not selected disappears from the screen. This prevents customers from accidentally providing additional conflicting feedback.
  • When a customer gives feedback on an article and later the article is displayed again, the originally provided feedback is also displayed below the article.
  • When quick options are available for an article and the customer provides positive feedback to the article, the quick options are presented again.

How to customize how visitors give textual feedback in instant feedback

You can enable your visitors to start typing their textual feedback immediately after they select the negative feedback option.

If instant feedback is enabled for a conversational widget, a Give Feedback button is displayed when the visitor provides negative feedback on an answer. You can make this button disappear and enable your visitors to just type their feedback and send it by hitting enter.

  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.

    Make sure you select a configuration where Widget mode is set to Conversational.

  4. On the Conversation tab, make sure Enable Feedback and Instant Feedback are selected.
  5. Select Simple in the Textual feedback submission flow field.
  6. Save your changes.

How do I customize instant feedback?

Once you've enabled instant feedback, you can customize how the bot asks for feedback.

Make sure you have instant feedback enabled. See How can I enable instant feedback? to learn more.
Note: If you don't have instant feedback enabled, use the settings described in this article to customize feedback.
  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. On the Texts & Colors tab, customize the following settings:
    • Instant Feedback: General Reply on Feedback: The bot's general response when receiving positive or negative feedback. You can overwrite what's displayed upon negative feedback by specifying a response to negative feedback.
    • Instant Feedback: Reply on Negative Feedback: The bot's reply when receiving negative feedback.
    • Instant Feedback: Label of the Inaccurate Button (First button): The label of the button that customers can use to signal that an incorrect answer was provided to them. After clicking this button, the customer can explain why the content is incorrect.
    • Instant Feedback: Label of the Irrelevant Button (Second button): The label of the button that customers can use to signal that the bot didn't understand the question. The bot stores and learns from this type of feedback.
    • Instant Feedback: Request for Textual Feedback: The message that invites the customer to provide textual feedback.
    • Instant Feedback: Label of the Provide Feedback Button: The label of the button that customers can use to give textual feedback on why they gave negative feedback.
    • Instant Feedback: Repeat Request for Textual Feedback: The text to be displayed for additional request for providing textual feedback.
  5. Save your changes.

How can I enable instant feedback?

Use instant feedback to enable customers to provide feedback about each answer they receive in a conversational widget.

When instant feedback is enabled, thumbs-up and thumbs-down buttons are displayed at the bottom of each answer in the conversational widget. To enable instant feedback, do the following:

  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.

    Make sure you select a configuration where Widget mode is set to Conversational.

  4. On the Conversation tab, make sure that Enable Feedback is selected.
  5. Select Instant Feedback.

    Instant feedback is disabled by default and doesn?t replace the feedback mechanism you enable with Enable Feedback option.

  6. Save your changes.
    Tip: You can disable instant feedback for individual articles by adding a <no_feedback/> tag in the article editor. You can add this tag to individual answers in conversational articles too.
What's next?

See How do I customize instant feedback? to set up the messages the bot uses to communicate.

You can also select how visitors can give textual feedback after selecting the negative feedback option. See How to customize how visitors give textual feedback in instant feedback for more information.

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.

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.

How to check chat availability before auto-channeling

When you have a channeling policy defined, you can automatically channel customers to a live agent. To do so, on the Options tab of the Article Editor, you have to set the channel value of an article to High value + push chat. After the bot displayed the article, the customer was automatically channeled to an agent. For information on channel value, see Can I offer a special response to a high-value question?

As an additional option, you can check the availability of live agents before channeling the chat.

Important:
  • To use this feature, you must define Bold360 as your chat provider in your channeling policy.
  • When you want your customers to send emails to your agents, you should disable this feature.

To set up chat availability verification, 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. On the Advanced tab, select Check chat availability before auto-channeling.
  6. Save your changes.

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>

Announcements

Join the DX Community!

Meet fellow DX pros, ask questions, and learn best practices.

Join the DX Community

Featured

Set up an email account

Set up an email account

Configure Digital DX to receive, track, and manage emails.

  1. Create or edit an email account, as follows:
    1. In the Web Admin Center, go to Channels > Email > Email Accounts. The Email Accounts window is displayed.
      Note: To verify that an email account is set up properly, click Test next to an account.
    2. Select an existing account or click Create New. The New/Edit Email Account page is displayed.
  2. Select Enable email to activate the email account.
  3. Enter basic account settings on the General tab:
    Option Description
    Configuration Name Name the account for internal reference.
    Sender Email Address To use when sending email.
    Friendly Sender Name Used as the From Email Name when sending emails via this account. For example: Support Team, Jane Doe.
    Email client

    Select the email client you are using: MS Office 365 / Gmail / Other.

    The MS Office 365 and Gmail options don't only support the recommended OAuth 2.0 authentication, the Other option supports any client with basic authentication.

  4. Select the email client that you use to communicate over email.
    Note: In the Digital DX Desktop Client, you cannot select email client.
  5. Depending on your email client, you have the following options:
    Option Description
    User Name User name of the email server. For example, in the email address support@acme.com, the user name is support.
    Password The password associated with the user name for the POP3 server. Only available when you select Other for email client type.
    Server/Port Enter the host name or IP address and port of your mail server. If your email address is support@acme.com, then your mail server host name is normally mail.acme.com or just acme.com. All inbound emails are retrieved from this POP3 server.
    Secure Connection (SSL) To use a secure connection to your mail server, check Secure Connection (SSL) and enter the Port to be used for the connection. Check with your service provider as required.
    Type Choose your server type: POP3 or IMAP.
    Note: POP3 is unavailable for Microsoft Office 365 users.
    Leave copy of messages on server Store copies of emails on your POP3 server to facilitate download to Outlook or any other mail client.
    Folder Click Refresh folder list and then select the folder in your email account that you want to use for email communication with your customers.
    Tenant ID You Microsoft Tenant ID that you can find in the Azure AD admin center. (in the Directory ID field on the Properties page). Only available for Microsoft Office 365 users.
    Client ID
    • Microsoft Office 365 users find it in the Overview page of the Azure AD admin center
    • Gmail users find it on the APIs & Services > Credentials page Google Cloud Platform
    Client Secret Your client secret that you can find right next to your client ID. Only available for Microsoft Office 365 and Gmail users.
    Outgoing server Select SMTP server to set up an SMTP server for outgoing email.
  6. Optional: (Optional) Enter additional settings on the Distribution - Organization tab:
    Option Description
    Department Associate a Department with the email account. The Department can be used to override account-level automatic distribution settings and to determine which agents can be assigned emails by the automatic distribution system.
    Maintain email thread ownership on new mails Preserve the Owner (agent) field of each email thread.
    Append email thread ID to subject Append the Email Thread ID to the subject of replies. This make it easier to keep track of conversations with customers.
    Append email thread ID to subject Append the Email Thread ID to the subject of replies. This make it easier to keep track of conversations with customers.
    Auto-bcc Specify an email address that is included in the BCC field of all outbound emails from the agent.
  7. Optional: (Optional) Enter additional settings on the Format and content tab:
    Option Description
    Encoding Encoding for outgoing and incoming messages.
    Format Choose to show incoming email as either plain text or HTML.
    Canned messages for emails Select canned message folders that agents can use with email.
    Email Footer Enable and design a footer that is appended to all emails sent from this email account.
  8. Save your changes.
  9. For Gmail and MS O365 integrations, go to the recently added email account on the Email Account view and select the Authorize option.

    Complete the steps in the dialog that appears. Once the authentication is complete, the status of the email channel changes to Ready.