AITouchpoints

How to set up an SSL-secured support center

Support centers that run on Bold360 AI servers can be deployed as HTTPS.

If your site is secured and you have implemented the support center using iframe, then a secure connection must be set up in Bold360 AI including installing the necessary certificates.

SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data sent between the web server and browsers remain private and integral.

Please ask your IT specialist to contact your support representative or Genesys DX support and provide the following information:

Account name, for example: bold360
Designated Certificate URL, for example: https://support.bold360.com
The certificate (CRT or PEM) in a text file
Note: Firewalls may filter other types of files.
The private key in a text file
The certificate expiration date, for example: 21/03/2022 (optional)
Any additional comments (optional)

Important: For security reasons, text files should be password protected. You can create a password-protected ZIP for your text files, or use a protected shared folder when sending your certificate and private key files.

What is Smart Advisor?

Smart Advisor suggests answers to the agents in 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.

Smart Advisor is the intelligent search available in the Agent Workspace that agents can use while chatting with clients. It provides agents with access to the company?s knowledge base and enables collaboration between agents who chat with customers and knowledge base managers who create support and chatbot content. To learn about the difference between Smart Advisor and canned messages that are available in the Bold360 Agent platform, read this article.

Onboarding Cards

Smart Advisor displays onboarding cards by default which enable agents to get up to speed on how to use the Smart Advisor. The content of the onboarding cards reflects the options enabled for Smart Advisor. For example, if comments are enabled, the related onboarding card is displayed.

FAQ

To increase agents? interaction with Smart Advisor, you can display an FAQ in it. This FAQ can include articles that provide answers to hot topics: for example, if there is an outage, knowledge base managers can create an article about it and add it to the FAQ so that that?s the first thing agents see in Smart Advisor.

Context

To control what content is displayed in the Smart Advisor, the touchpoint can be set to take one or more contexts into consideration and only display articles that have the specified context. To learn more about how to set up the touchpoint in Bold360 AI, see this article.

Article Information

Smart Advisor can display information about who updated the article last and when it was last updated. 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.

Labels

Smart Advisor can also display the labels associated with the article so that agents can decide if the content of the article is relevant to their query.

Articles with Links

Smart Advisor supports articles with links. Knowledge base managers can create articles that cover the initial question and detail the specifics in separate articles that readers can get to using links. This way agents can find the answers they're looking for in an interactive way.

Comments

Agents can leave comments on how to improve an existing article. 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.

Article Suggestion

Agents have two options to suggest content:

By choosing the Suggest as article option next to an answer they just entered in the chat
By choosing Suggest Article after their search yields no results

Either way, an article editor is displayed and they can provide a title for the article and enter content in the description field and submit their suggestion. Knowledge managers can find these articles in the Bold360 AI Platform under Knowledge > Suggested articles.

Confidential Content

When Smart Advisor is enabled, knowledge managers can mark parts of an article?s content as confidential. Such parts are displayed differently in Smart Advisor and agents can?t copy them thus reducing the risk of sharing confidential information with people outside the company. For more information see How can I mark parts of an article as confidential?

Support Center Customization

The support center is fully HTML supported and you can change the templates within its HTML code.

Tip: Check out this video to see support center configuration in action.

This video is currently under construction. Thank you for your patience.

Go to Touchpoints > Support Center and click the Page Templates tab.
Result: The HTML Master page set-up is displayed, which you can then customize using placeholders (documented here).

Use the special syntax in the tables below to insert the dynamic content (i.e article body) to your pages.

Table 1. Entity Selector Placeholders
Attributes	Syntax	Description	Name	Type
	< nR:Entity type="label" id="B025" >	Selects the specified label by ID	label	Entity Selector
	< nR:Entity type="article" id="B025" >	Selects the specified article by ID	article	Entity Selector

Table 2. Repeater Placeholders
Attributes	Syntax	Description	Name	Type
labelId = -1 articles with no parent labellabelId = < %Label.ID% > current label ID, maxItems, sort(=faq), days	< nR:Repeater type="article" sort='faq' labelId='1234' > ... < /nR:Repeater >	Repeater's enclosed code for each article in the specified enumeration. For information on sorting articles in your Support Center, see How to change the sorting of support center articles	article	Repeater
labelId, maxItems, sort(=faq), days	< nR:Repeater type="attachment"> ... < /nR:Repeater >	Repeater's enclosed code for each attachment for current article	attachment	Repeater
	< nR:Repeater type="phrasings"> ... < /nR:Repeater >	Repeater's enclosed code for each phrasing for current article	phrasing	Repeater
type='root'/'all'/'nestedUnder/list' maxItems='10' (OPTIONAL)	< nR:Repeater type="label"> ... < /nR:Repeater >	Repeats for each Label	Label	Repeater
	< nR:IF condition="Site.IsMultiKB" > < nR:Repeater type="language" > < a href="< %Lang.URL% >" >< %Lang.Code% >< /a > < /nR:Repeater > < /nR:IF >	Repeats for each separate language KB	Language KB	Repeater

Table 3. Value Placeholders
Attributes	Syntax	Description	Name	Type
	< %Site.Name% >	Configured site name	Site.Name	Value
	< %Site.Domain% >	Configured site domain	Site.Domain	Value
	< %Site.URL% >	Configured site URL (includes http/s)	Site.URL	Value
	< %Site.Account% >	Configured site Account	Site.Account	Value
	< %Site.KBID% >	Current knowledge-base ID	Site.KBID	Value
	< %Label.Name% >	Label name	Label.Name	Value
	< %Label.ID% >	Label ID	Label.ID	Value
	< %Label.Link% >	Link to dedicated label page	Label.Link	Value
	< %Label.Count% >	Amount of elements in label	Label.Count	Value
	< %Label.PositionInPath% >	0 based index of position in current path, -1 returned if label is not in path	Label.PositionInPath	Value
	< %Article.ID% >		Article.ID	Value
	< %Article.Title% >		Article.Title	Value
	< %Article.Body% >		Article.Body	Value
	< %Article.Link% >		Article.Link	Value
	< %Article.AttachmentCount% >		Article.AttachmentCount	Value
	< %Article.Attachment.URL% >		Article.Attachment.URL	Value
	< %Article.Attachment.Name% >		Article.Attachment.Name	Value
	< %Article.MetaDescription% >	Articles Meta-Description	Article.MetaDescription	Value
	< %Article.PhrasingCount% >		Article.PhrasingCount	Value
	< %Article.Phrasing% >		Article.Phrasing	Value
	< %Repeater.Ordinal% >	The ordinal for current repeater loop	Repeater.Ordinal	Value
Use in condition "Page.Type=Home" to check page type:Home/Label/Article	< %Page.Type% >	Determines the current page type	Page.Type	Value
checks if current Label is the current page label	< nR:IF condition= "Article.IsPageArticle" >		Article.IsPageArticle	Value (condition only)
check if the current Article is the current page article	< nR:IF condition= "Label.IsPageLabel" >		Label.IsPageLabel	Value (condition only)
	< %Site.NanorepDomain% >	Places Digital DX AI servers domains	Site.NanorepDomain	Value
	< %Page.Error% >	The error that is displayed

How to configure Digital DX AI after setting up a messaging channel

Once you have set up a WhatsApp or Microsoft Teams messaging channel, complete additional configuration in Digital DX AI to customize the bot's behavior.

Define the answer the bot returns when it can't answer the customer's question.
You can set up multiple messages or create articles that the bot returns when the customer's search yields no results. See How to configure conversational touchpoints to learn more about how to set these up.

Note: You can't use an article for the final message as that prevents the bot from triggering the escalation.

Define channeling policies to cover different scenarios.

Depending on whether you have a bot-only, agent-only or bot and agent messaging channel, you may define different channeling policies. See How do I define a channeling policy? to learn more about how to create a channeling policy.

Agent only

If you want your customers to talk to agents only on the messaging channel, set up a channeling policy with a condition where the number of words is greater than 0. Add a message as an error answer that introduces the escalation option and explains customers that they will be connected to a live agent if it's business hours and agents are available.

Note: To prevent the bot from providing an answer, you must have an empty knowledge base.

Bot only

If you want your customers to talk to the bot only on the messaging channel, make sure you have defined error answers for when the bot can't find an answer to the customer's query.

Agent and bot experience

If you want customers to talk to the bot first and outside business hours but have the option to talk to an agent, you might want to:

Define a Day and time condition for the channeling policy that is used to escalate chats to agents
Use labels on articles for which you want to provide agent support and define an Article label condition for the channeling policy

What's Next?

See What are the best practices for managing a knowledge base? to learn about how you can optimize the bot's content.

How to define welcome messages for chat invitations

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.

To invite visitors to chat, do the following:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a knowledge base or URL to customize.
On the Basics tab, make sure you have an Auto Question selected.
On the Position & Size tab, click Customize next to Welcome Mode and select the Invite option.
Optionally, define a delay to display the welcome message in the Welcome mode welcome message trigger time (in seconds) field.
Save your changes.

Define context-sensitive welcome messages

You can use article variations of a selected welcome message to personalize customer experience based on context. Context must be defined in the widget code.

To select a context-specific welcome message, do the following:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a knowledge base or URL to customize.
On the Basics tab, make sure you have an Auto Question selected.
Select the Context-sensitive Auto Question option.

Note: When you select an article for welcome message that has variations and do not select the Context-sensitive Auto Question option, then you must select a variation to be displayed for customers as welcome message.

What are messaging applications in Digital DX AI?

Messaging applications in Digital DX AI enable you to communicate with your customers over popular messaging apps, such as WhatsApp and Microsoft Teams.

Note: Messaging applications are in beta. Contact your Customer Success Manager to learn more.

When you set up a messaging channel, you have the following options depending on your support needs:

Provide bot-only support if you do not have human agents
Provide agent-only support if you want your customers to always talk to a human agent
Use the combination of bot and agent support, if you want the bot to cover out of hours support and help your agents during business hours

Note: You need access to the AI Console if you want to use a bot only on your messaging application. For an agent-only and a bot and agent experience you need to have access to both the Agent Workspace and the AI Console.

Customers can interact with agents on their favorite messaging application in their own pace. The connection between the customer and the agent is permanent from the customer's perspective. Customers can start and stop the conversation in the messaging application anytime without losing connection to the agent.

To learn more about what the experience is like for customers and agents, see these articles:

How to configure messaging channels

Once you created a messaging channel for WhatsApp or Microsoft Teams, you can change the default status messages, define a context, or set up to auto-end conversations.

Make sure you have created a messaging channel.

In the AI Console, go to Touchpoints > Widgets.
Under Conversation configuration, select Messaging applications.
Choose (Configure) next to the channel that you want to configure.

Adjust the options as necessary.

Status messages	You can change the default messages for the following cases: The conversation is escalated or closed There is a network issue and the customer's message cannot be delivered There are multiple answers for a customer question
Contexts	If you use context to have article variations for the WhatsApp or Microsoft Teams channel, you can specify the context here to let the bot know which variations it can display to customers. See How do I define an article's context? to learn more.
Auto-end configurations	Bold360 can automatically end conversations after the specified time measured from the last customer-sent message. You can define an interval between 30 minutes and 24 hours. You can also define a message for customers when their conversation automatically ends.
Nanorep Entities	When users ask questions on Microsoft Teams, now they can receive personalized answers . For example, if Bold360 is integrated with a third-party ticketing system and the agent asks How many open tickets do I have?, Bold360 can deliver a response that is specific to the user. To enable personalized answers, select the Enable Nanorep Entities option for the Microsoft Teams channel you configured under Touchpoints > Widgets > Messaging applications. Then create articles with personalized answers using entities.

Save your changes.

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.

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.

Click the arrow on the right of the suggested response to expand the article if not fully visible.
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:

Hover the mouse over one of your previous answers.
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.

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 the Agent Workspace is integrated with Digital DX AI and it is enabled on both platforms. For more information contact your Customer Success Manager.

In the AI Console, go to Touchpoints > Widgets and choose Personalize for the Smart Advisor widget.
Select a URL or knowledge base to customize.

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.

On the FAQ tab, set up an FAQ to display in Smart Advisor.
Save your changes.

How to set the bot to remain active in channeled conversations?

When a conversation is channeled to a live agent, the bot remains active and offers auto-complete suggestions for customer questions. The live agent can also contribute to the conversation. This option is disabled by default.

To enable hybrid conversation, do the following:

In the AI Console, go to Touchpoints > Widgets and click Personalize on the Floating widget pane.
Select the Knowledge Base or URL for your conversational widget.
On the Advanced tab, select Bot suggestions remain active after channeling.
Save your changes.

How to enable hybrid (bot and agent) conversations?

When a conversation is channeled to a live agent, the bot may remain active and offer auto-complete suggestions for customer questions. The live agent can also contribute to the conversation. This option is disabled by default.

To enable hybrid conversation, do the following:

In the AI Console, go to Touchpoints > Widgets and click Personalize on the Floating widget pane.
Select the Knowledge Base or URL for your conversational widget.
On the Advanced tab, select Bot suggestions remain active after channeling.
Save your changes.

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:

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

What is a conversational bot and why do I need it?

Bold360 AI platform delivers a conversational bot solution that leverages our Contextual-Answers technology together with our proprietary Natural Language Processing solution.

The conversational platform provides a messaging-based user experience in which the Bold360 AI engine gathers information from the customer similarly to how a human agent would do in a regular conversation. Based on customer input and the engine's search capabilities, the conversational bot provides the customer relevant information.

Like other Bold360 AI widgets, the conversational bot can be deployed across multiple touchpoints. Bold360 AI allows for dynamic selection of parameters that can be based either on integration with your API or on dynamic lists that you provide to retrieve information. Here's what makes the conversational bot unique:

Continuous conversation
Conversational prompts
Dynamic content and personalization
Buttons and selection options
Image Galleries

Continuous conversations

You can customize the bot's "memory" and define the context in which the bot will remember pieces of the conversation. The bot's ability to remember context enables the conversation. In the following example, the bot remembers that the context is currency exchange:

Conversational prompts

Just as with live agents engaging in real conversations, you can teach the bot to ask follow-up questions to gather the information it needs to answer the customer's question. In essence, the bot identifies the customer's intent and prompts for further information.

The following is an example with multiple prompts:

Dynamic content and personalization

You can define one article (one answer) that would answer a question based on dynamic information that comes from either an API or a dynamic table. The integration with your API can drive personalization in the bot and can answer questions like "What is the status of my claim?" or "How many miles are available for me to redeem?"

You can also use a dynamic table to retrieve information based on context as shown in the following example, where a single article is used to retrieve parameter-based information.

Example

Buttons and selection options

Buttons allow you to add structure to the bot conversation and offer article-specific and follow-up actions. These buttons can either point to other articles/content, open a URL, or offer click-to-call.

Example (Buttons leading to articles/options):

Example (Buttons leading website or click to call)

Image Galleries

Image galleries help bring life and color into the bot conversation. You can use multiple images that the customer can scroll through and take action. You can also use them for product pictures and offers and have the user select between different products.

Example

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.

Create a CSS file with font face declarations and store it on a server.
Enable cross-origin resource sharing (CORS) on the server as described here.
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.

How to prevent access to a support center's inner URL

Every article has an inner and an outer URL.

So, for example, you have:

URL # 1: https://support.mysite.com/Contact-us/864734431/Contact-us.htm

An internal iframe URL such as: https://support.mysite.com/Contact-us/864734431/Contact-us.htm
An outer URL (where the iframe is inserted): https://www.mysite.com/en/support#/path/Contact-us/864734431/Contact-us.htm

There are two ways to proceed from here:

Change the contact us page address from the internal URL to the outer URL
Ask your Bold360 AI Customer Success Manager to leverage the option that prevents the opening of a support center iframe as a standalone. Instead, if we detect that the page doesn't have a parent, we automatically redirect to the outer URL. In this option you don't have to change the addresses.

Please get back to us on which option you would rather use.

How do I create support center structure with labels?

Use labels to give structure to your support center home page.

Note: You can only use user-created labels for this purpose. There are built-in labels that are used to indicate the availability of an article, like Offline or Hide from Support Center and the status of an article, if content management workflow is enabled, like Draft and Never Published, etc.

In the AI Console, go to Touchpoints > Support Center.
On the Settings tab, go to the Content section.
Under Navigation Labels, select categories to display as navigation options in your support center, for example, along the left side of the page.
You can change how and where these labels are displayed by adjusting the support page templates.
Under Homepage Labels, select categories to display on your home page, for example, in the main body of your site.
You can change how and where these labels are displayed by adjusting the support page templates.

Example:
Save your changes.

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.

In the AI Console, go to Touchpoints > Support Center.
Select the support center and on the Settings tab, go to the Content section.
Select Manage labels.
On the Content labels dialog, choose the label you want to edit or create a new one.
Choose for Main Icon and upload an image.
Example:
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 do I order labels and sub-labels in the support center?

Set the order of labels and sub-labels shown in your support center.

In the AI Console, go to Touchpoints > Support Center > Settings.
Scroll down to the Content section and select Manage Labels.
Result: A list of labels is displayed.
Under Manage All, drag and drop to set the order of the labels.
In the Edit section, you can customize how a label is displayed.
You can also set an active and a hover icon for each label.
Save your changes.

Example:

How to redirect an iframe URL in support center

If your address for the support center is www.myaccount.com/helpcenter then all the rest of the address is being populated into the iframe's URL.

This means that www.myaccount.com/helpcenter/label would become help.myaccount.com/label.

To setup redirection, do the following:

In the AI Console, go to Touchpoints > Support Center.
Choose the support center that you want to modify.
On the Redirect URLs tab, select Add Value.
In the URL From field, enter the source URL.
Tip: To redirect an article URL, use the following syntax in the source URL: */articleID/*.
In the URL To field, enter the URL you would like to be displayed.
Choose Save Changes.

The URL in the URL From field will return a 301 (redirect) as HTTP response when the page is visited.

How to set the context in an iframe support center

In order to set the context, add a js function to your hosting page:

<script>
function setContextNanorepSupportPage(){
  return "< context Type >=< context Value >"
}
< /script >

Important: Remove the context from the iframe src if it was set there. For example:

<script>
function setContextNanorepSupportPage(){
  return "Device=Mobile"
}
< /script >

How to set up a support center in the AI Console

Digital DX AI offers a built-in, SEO-enabled, fully HTML-customizable and mobile-optimized support center.

While the out-of-the-box look of the support center template is basic, you have the option to completely tailor the external appearance to reflect your brand. The HTML customization incorporates editable HTML pages, the automatic creation of metadata and SEO-optimized links for articles and related topics.

To set up a support center, proceed as follows:

Create labels and add them to articles.
Use labels to organize content in the knowledge base and to structure content in the support center. Labels are categories that can be assigned to articles in order to make organization of your support center content easier and more efficient. Labels can be organized into hierarchies which is reflected in the support center and they can also be used to search for specific topics and related answers. This ensures that your agents can easily access answers and thus provide the highest levels of customer service.

Tip: If an article is relevant for more than one category, you can categorize the article with multiple labels and display it in several categories simultaneously.
Add a support center in the AI Console.
Create a support center structure using labels.
Optional: Change the look and feel of your support center by adjusting the support center page templates.
You can easily change the fonts, colors or other elements that make up the look and feel of your support center using simple HTML customization. To change the page templates, go to Touchpoints > Support Page > Page Templates.

How to add a new support center in the AI Console

With a single Digital DX account you can offer multiple support centers across different parts of your website that offer answers to different user groups or device types.

To get the score for activities on the support page, allocate a subdomain to the support center from your main website's domain. Specify a CNAME record to point from the support center domain to < < account name > >.nanorep.co so that the subdomain can use the Digital DX server.

Tip: You can create multiple support centers per knowledge base.

In the AI Console, go to Touchpoints > Support Center.
Select Add Support Center.
When prompted, enter the name of the support center and choose Save.
Result: You are taken to the Support Center: Settings page.
Under General Settings, enter the main URL of your website in the Main Site URL field.
This field contains your website main URL when you use the Support Center in an iframe. If this is the subdomain you want to use, your Main Site URL can be the same as the Support center domain.
Under Site Settings, fill the Support center domain field.
This field contains the subdomain used to access this support center. You will also need to create a CNAME record for this subdomain which you can typically do at your domain DNS provider side.

Note: CNAME changes don't take effect instantly because of the DNS propagation, you will have to wait for some time before it is updated.
Save your changes.

Create a support center structure using labels

Technical Preparations to implement a support center

If you have initial content that can be imported, it is a matter of two to three weeks until you can get Bold360 AI up and running.

Setting up a subdomain with a CNAME

The support center runs on Bold360 AI servers. In order for you to get the score for activities in the support page, you will need to allocate a subdomain out of your main website's domain. In order for your subdomain to use the Bold360 AI server, please specify a CNAME record to point from the support domain to < < account name > >.Nanorep.co.

Once the CNAME is set up, please contact your Customer Success Manager and inform them about this new subdomain URL. The next step would be to update this new URL in the support center settings in the Support center domain field.

Secured (SSL) Setup: If your site is secured, and you've chosen the iframe solution, then we need to set up a secured connection in Bold360 AI and exchange certificates. For more information see this article.

Setting up a parent page for an iframe solution

In order to set up the support center as a part of your existing page (in iframe) you need to add the following code there:

<!-- embedded support center code start -->
<div id="nanorep-support-center"></div>
<script>
! function(t, e, o, n, c) {
    var s = this.nanorep = this.nanorep || {};
    s = s[e] = s[e] || {}, s.host = c, s.path = n, s.domain = t, s.protocol = "https:" === location.protocol ? "https:" : "http:", s.on = s.on || function() { s._calls = s._calls || [], s._calls.push([].slice.call(arguments)) };
    var a = document.createElement("script");
    a.async = a.defer = !0, a.setAttribute("src", s.protocol + "//" + c + n + o), document.getElementsByTagName("head")[0].appendChild(a)
}("your_support_center_domain", "supportCenter", "support-center.js", "/web/", "your_account_name.nanorep.co");
</script>
<!-- embedded support center code end -->

(Replace the highlighted sections with your actual account settings)

If you need to set some predefined context values, place them after the support center domain as query parameters, for example:

("your_support_center_domain/?Brand=Apple","supportCenter","support-center.js","/web/", "your_account_name.nanorep.co")

Advanced configuration

Embed code will insert embedded support center with default settings, but there's a way to set override the settings inside the "Master Page" template like this:

<script src="//<%Site.nanoRepDomain%>/web/support-center.js"></script>
<script>
nanorep.supportCenter.init({  
            noDirectDomainAccess: false, // use "true" to disable direct access to support center     
            supportCenterDomain: '<%Site.nanoRepDomain%>', // Support center subdomain     
            mainSiteURL: '<%Site.MainSiteUrl%>', // Parent page URL     urlPrefix: '#/path' //prefix path for URL hash   });
</script>

How to implement a child support center

If you have several support centers pulling the data from different knowledge bases but have the same support center domain, it is also possible to load them by specifying a unique URL path after the URL Prefix part in the parent page URL. For example, let's say you have 2 knowledge bases:

1) English KB - main support center ( support.your_company.com )

2) Dutch KB - child support center ( support.your_company.com/ dutch )

In order to load the main support center you can just access the parent page URL located and it will be loaded automatically as a default option.

In order to load Dutch child Support center you should specify its unique URL part after URL prefix: http://your_company.com/#path/dutch

where:

your_company.com - parent page URL

#path - default URL prefix

dutch - unique URL part of child support center

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 ; }

How to change the sorting of support center articles

By default, articles in your Support Center are sorted by popularity. You can also sort articles by alphabetical order or last updated time.

In the AI Console, go to Touchopints > Support Center.
Select Page Templates and choose the support center you want to change.
On the Label Page tab, find the following entry, which drives article sorting:
```
<nR:Repeater type='article' sort='faq' labelId='<%Label.ID%>'>
```
Change the value of the sort attribute as follows:
- Faq - articles are sorted by popularity (number of hits). This is the default value.
- TitleAsc - articles are sorted by alphabetical order from A to Z.
- TitleDesc - articles are sorted by reverse alphabetical order from Z to A.
- LastUpdated - articles are sorted by last updated time, where the most recently modified one is listed first.
Save your support center template.

What are my options for implementing a support center?

You can implement a support center as a standalone or you can use iframe.

What are the benefits of an iframe implementation?

By using an iframe, you can deliver your support center as an integral part of your website while leaving your site's functionality in place:

You get full control of the page wrap including the site's header and footer, cart support, logged in users and any other cross-website functionality.
Digital DX AI offers a smart iframe that will
- Automatically change its size depending on the amount of content inside the iframe
- Change the hosting parent page URL to reflect the changes in the iframe. For example, if the user navigates to a specific article, the article URL will be reflected in the parent URL. This behavior can be disabled if not desired.
The iframe solution fully supports search engine optimization (SEO) including redirect to the parent hosting page if the iframe is opened directly from Google.

What is the standalone solution like?

You can deliver your support center as a standalone, external page with a subdomain address. A standalone support center can't present your site's header and footer and doesn't include other site-specific functionality from your main page either, like user-secured login, cart management or site search.

The benefits of using a standalone support page:

Changes in your site are minimal, you just have to add a link to your new page.
The page is easy to implement.
There is no risk of conflicting code between your site's JavaScript and the Digital DX AI's JavaScript.

How to set up a protected support center

To increase the level of security, Bold360 AI provides cross-origin resource sharing (CORS) policies on its APIs.

CORS enables you to restrict your widgets and support centers to a single URL domain or a list of domains. If a malicious intruder copies your HTML code snippet and adds it to any other site, the widget or support center on that site will not work.

To set up a secure support center, do the following:

On the Touchpoints > Support Center > Settings page, copy your support center URL from the Main Site URL field.
Go to the Admin Center > Preferences page.
In the Allowed Origins field, paste the support center URL you just copied from the Main Site URL field.
Add the URL of your main customer website to the list.
Save your changes.

How can SEO be improved for support centers?

Bold360 AI offers multiple designs for SEO-friendly support pages which include both free search capability and dynamic navigational FAQ hierarchy.

Google can crawl iframes on a website and is indexing the URLs of the iframe itself, not the parent URL. The same applies to the links inside the iframe. The iframe URL and the URL of the links within the iframe point to a subdomain. You can read more about the effect of using a sub-domain on your Google ranking here.

The challenge when setting up a support center is to avoid Google opening the iframe page instead of the support center page.

Bold360 AI solution

In the Bold360 AI solution for a support center, the iframe URL address is a CNAME provided by the customer, for example, support.acmeCorp.com. This iframe is hosted in a page that is defined by the customer as part of the site and will probably have a URL such as acmeCorp.com/support.

In the iframe, navigation links and articles are presented. These include a link to the support page, home page, label pages and article pages. All these links have the following structure: <CNAME URL>/Label1/Label2/Article-ID/Article-Title. For example, support.acmeCorp.com/General/How-to-Contact/12345/our-branches-opening-hours.html.

Search engine flow

The search engines crawl the hosting page and into the iframe. In the iframe, it crawls deeper and collects the information for all the articles and label pages. All of this content is part of the sub-domain assets. The score and links are, therefore, related to the subdomain.

When you want to find an article using Google, you search for the text that is in one of the articles. Google finds the article page and redirects to a page, which has the subdomain URL.

When the user selects an article, the subdomain URL opens. Bold360 AI redirects all these links to the parent page while maintaining the direct path to the relevant article. Eventually, the parent hosting page has a URL like acmeCorp.com/support?path=/General/How-to-Contact/12345/our-branches-opening-hours.html while the iframe inside maintains the URL received by Google support.acmeCorp.com/General/How-to-Contact/12345/our-branches-opening-hours.html.

How does the subdomain structure affect your SEO ranking compared to a subfolder structure?

In late October, 2012, Matt Cutts of Google's Webspam team clarified the subdomain/subdirectory situation as far as Google was concerned. He said "The historical reasons why you might have wanted to go for a subdomain don't really apply as much, and that leaves you with, okay both are on the same domain, overall, and so it's really a question of which one is easier for you." Therefore, your entire site benefits from the effects of search engine optimization.

How can I track subdomain analytics and include it with my main site analytics?

See the multidomain tracking guide for Google Analytics here.

How do I promote my internal support center?

A few tips on how to promote your internal support center and bot.

In case you recently set up an internal support center or a bot for your agents, here are a few tips on how you could promote their use among your agents:

Naming competition: ask agents to name the support center or bot and announce the winner.
Most questions competition: highlight agents or teams who ask the most questions.
Easter eggs: hide articles about off-topic questions in the knowledge base and ask agents to find them, announce the winner.
Ask agents for feedback: make sure your team has the option to provide feedback about the support center or the bot. Also ensure that their imporvements are made based on their feedback.

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:

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.

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

Result: The wizard is displayed.
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.
In the Target Support Center, choose the support center in the target knowledge base into which you want to copy the settings.
Select Next.
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.
Select Next.
In the Select Support Center Settings to be copied step, choose the settings you want to copy to the new support center.
Select Next.
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.

Automatic Language Translation using Google Translate API

Bold360 AI offers automatic language translation using multiple language translation engines. The translation engine supports more than 34 languages.

Features and Benefits

Language is detected automatically.
Answers and widget interfaces are automatically translated.
Once the translation symbol is shown, customers can see the text in the original language by clicking on the symbol.

How to activate the translation

You do not need an existing Google account to use Google Translate, but you must have the Google Translate Auto-Translation for Search feature enabled for your Bold360 AI account. Contact your Customer Success Manager for more information.

Translation Analytics

Bold360 AI offers comprehensive translation analytics at Analytics > Translations.

The analytics show the most popular languages, the most recent translated questions, and the number of questions that were asked, answered, and escalated via translation.

Which languages does Bold360 AI support?

Depending on which feature of Bold360 AI you use, the following languages are supported:

In Conversational widgets

Dutch	English	French
German	Hebrew	Hindi
Norwegian	Spanish	Turkish

In Search widgets

Arabic	Azerbaijani	Bulgarian	Chinese	Croatian	Czech
Danish	Dutch	English	Estonian	Finnish	French
German	Greek	Hebrew	Hindi	Hungarian	Icelandic
Indonesian	Italian	Japanese	Korean	Latvian	Lithuanian
Malay	Maltese	Norwegian	Polish	Portuguese	Romanian
Russian	Serbian	Slovak	Slovenian	Spanish	Swedish
Thai	Turkish	Vietnamese

In the customer chat window

Afrikaans*	Arabic*	Bengali*	Bulgarian*	Chinese (Simplified)*	Chinese (Traditional)*
Croatian*	Czech*	Danish*	Dutch	English (UK)*	Finnish*
French	French (Canadian)*	German	Greek*	Hebrew*	Hindi*
Hungarian*	Icelandic*	Indonesian*	Irish*	Italian	Japanese
Korean	Malay*	Norwegian (Bokmal)*	Norwegian (Nyorsk)*	Polish*	Portuguese*
Portuguese (Brazilian)*	Punjabi*	Romanian*	Russian*	Slovak*	Spanish
Swedish*	Thai*	Turkish*	Ukrainian*	Vietnamese*

* You need to translate the branding of the chat windows.

In the Bold360 Agent Workspace

Dutch	English	French	French (Canadian)	German	Hungarian
Italian	Japanese	Korean	Portuguese (Brazilian)	Spanish

You can set up the support center as an integral part of your existing website using iframe.

To set up the support center as a part of your existing page in iframe, add the following code to the website:

Note: Remember to change the highlighted parts to your actual account settings.

<!-- embedded support center code start -->
<div id="nanorep-support-center"></div>
<script>
! function(t, e, o, n, c) {
    var s = this.nanorep = this.nanorep || {};
    s = s[e] = s[e] || {}, s.host = c, s.path = n, s.domain = t, s.protocol = "https:" === location.protocol ? "https:" : "http:", s.on = s.on || function() { s._calls = s._calls || [], s._calls.push([].slice.call(arguments)) };
    var a = document.createElement("script");
    a.async = a.defer = !0, a.setAttribute("src", s.protocol + "//" + c + n + o), document.getElementsByTagName("head")[0].appendChild(a)
}("your_support_center_domain", "supportCenter", "support-center.js", "/web/", "your_account_name.nanorep.co");
</script>
<!-- embedded support center code end -->

Optional: To set predefined context values, place them after the support center domain as query parameters.
Example: For example, the following code sets the Brand context category to be Apple:
```
("your_support_center_domain/?Brand=Apple","supportCenter","support-center.js","/web/", "your_account_name.nanorep.co") 
```

Optional: The embed code in step 1 inserts the embedded support center with default settings. Override the settings in the Master Page template using the following code:

<script src="//<%Site.nanoRepDomain%>/web/support-center.js"></script>
<script>
nanorep.supportCenter.init({  
            noDirectDomainAccess: false, // use "true" to disable direct access to support center     
            supportCenterDomain: '<%Site.nanoRepDomain%>', // Support center subdomain     
            mainSiteURL: '<%Site.MainSiteUrl%>', // Parent page URL     urlPrefix: '#/path' //prefix path for URL hash   });
</script>

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.

Create a custom entity that includes the survey questions.

In the AI Console, go to Knowledge Base > Entities.
Choose (Create Entity).
On the New Entity page, Select Custom Entity for Entity Type.
Enter a name and a description for the entity.
Example: For example, use survey as name and post-chat survey as description.
Select Intent in the Life Cycle field.

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.

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.
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's next?

Get the feedback data using the reporting API.

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 can I test responses without adding them to my search history?

Use the preview tool to test responses, without affecting your analytics and the search history.

In the AI Console, go to Touchpoints > Widgets.
Under Floating widget, click Preview. The preview widget is affected by the master settings, every change in these settings will effect the preview widget.

Google Analytics Integration overview

Bold360 AI allows you to track your visitor's behavior and activity using the Google Analytics platform.

Note: If you are using Google Analytics 4, you'll need to implement custom code on your website to send data. For more information contact your Customer Success Manager.

There are two ways to implement Google Analytics snippet: synchronous and asynchronous. Currently, we only support the asynchronous snippets.

Google Analytics integration is enabled by your Customer Success Manager and you will be able to see the results in your GA Dashboard within 24 hours of activation.

Our goal is to allow maximum transparency and usability of the Bold360 AI framework to drive a better customer experience and, ultimately, value: BI, conversion increase and cost-reduction.

Custom events

If you want to send additional/customizable events, you can use our events API to trigger custom functions, including Google Analytics sending sequences. See our Events API documentation below:

Bold360 ai Events API (Arcade and Modern)

Bold360 ai Events API (Slim)

If you use our Support Center, it is also possible to add custom events for visitor's interaction there. For example, you can track click events on navigation, escalations, articles feedback and so on.

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

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

How to import a touchpoint's configuration

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under Floating widget.
Click Add new URL next to the drop-down list.
Enter the customization URL and select File to copy the configuration from the exported JSON file.
Click Choose File to select the configuration file.
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:

In the AI Console, go to Touchpoints > Widgets > Floating widget.
Click Personalize.
Select a knowledge base or URL to customize.
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
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.

How do I make pages noindex?

In the AI Console you can set noindex for the entire support center or for individual articles.

How do I set noindex for the entire support center?

Go to Touchpoints > Support Center.
Select the support center and go to the Page Templates tab.

In the master page template, add the line in bold inside the head tag:

<html>
  <head>
    <title>...</title> 
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> 
  </head>

Save your changes.

How do I set noindex for an article?

Go to Knowledge > Articles > .
Find the article you want to make noindex and open it for editing.
On the Visibility tab, select the Do not index this article option.
Result: The article is added to the robots.txt file.
Publish the article.

Bold360 AI Events API for Arcade and Modern widgets

Events API

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 (e.g. Universal Analytics) and generate Bold360 AI related Reports.

Note: This API is valid for Arcade and Modern styles only. Please see this guide if you are using a Slim widget.

Supported Events:

load: Fires when the widget is fully loaded
userStartedTyping: Fires when User starts typing into the search box
query: Fires after the user finishes typing and the query is sent to the server
incomingSearchResults: Fires when the search results arrive at the widget
- hasResults(bool) - indicates if results were given to the query.
- isAutoQuestion(bool) - indicates if the query was an auto question.
- query(string) - the query asked.
- results(Json Array) - the results to the query. Each item in the array is a json object: { answerId(string), title(string), body(string) }
escalation: Fires when the user performed an escalation (e.g email, chat)
like: Fires when the user clicked 'Like' on a search result

// For floating widgets _nRepData["float"] = { //.... // events: { eventName: function(parameters) {} } 
//.... // } 
// For the embedded widgets _nRepData["embed"] = { //.... // events: { eventName: function(parameters) {} } 
//.... // } 
// For both widgets _nRepData[" events "] = { eventName: function(parameters) {} };

Usage Examples:

// Widget loaded: load: function(){alert("widget loaded!");} 
// User started typing: userStartedTyping: 
function(){alert("user started typing");} 
// User asked a question: query: 
function(query, isAutoQuestion){alert("user asked: " + query + ". is auto ? : " + isAutoQuestion);} 
// Incoming search results: incomingSearchResults: 
function(hasResults){alert("incoming search results. has results: " + hasResults);} 
// User performed escalation: escalation: 
function(type, query){alert("Escalation occurred. type: " + type + ". user query: " + query);} 
// User clicked 'Like': like : 
function(query, answer){alert("User liked the answer: " + answer + " for the query: " + query);}

Floating widget script example:

< !--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'] = '24218399';
 _nRepData['float'] = {account: 'nisim', cdcVersion: 3, cdcFrame: '', 
scriptVersion: '2.19.2.2', events: { userStartedTyping: function(){alert("user started typing");}} }
 /* 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 >

Why doesn't my widget come up?

When the widget is not available on the site or sites it was added to, here are a few things you can do:

Check the widget script.
Make sure that the script was not changed and still has the original form from the script generator. To learn more about how to get the widget code, see What widgets do you provide and how can I add them to my website?.
Review the widget settings.
Open the widget configuration, go to the Advanced tab and make sure that the Widget Enabled checkbox is selected.
Review the cross-origin resource sharing (CORS) policy settings of your account.
Go to Admin Center > Preferences and check the content of the Allowed Origins field. The widget is supposed to be visible on the URL domains listed in this field. If the Allowed Origins field contains an asterisk (*), the widget is not tied to specific domains, that is, it is supposed to be visible on any website the widget code is added to.
Make sure access to the widget is not limited to specific IP addresses.
Contact your Customer Success Manager to have them check this for you.
A customer journey with a control group of larger than 0 is configured. In such a case, users who are in the control group don't see a button or widget.
Go to Analytics > Tracking - completion indication > Edit a journey to see journey settings.

Still having issues? Please select Open Ticket below this article to contact Customer Care.

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 
    }); 
  }
});

What's the customer experience like in WhatsApp?

Learn how articles created in Bold360 AI are displayed in WhatsApp.

The way articles are displayed in WhatsApp differs from how they are displayed in widgets because WhatsApp is a text-based messaging app. When creating articles that are to be presented in WhatsApp, keep the following in mind:

WhatsAppcandisplay text, but it doesn?t present inline bulleted and numbered lists, tables, or carousels.
It supports simple URL links but can?t handle links to email addresses or to other articles in the knowledge base.
It automatically removes embedded videos and advanced text formatting from articles.
Conversational flows and entities are supported except for persistent and quick buttons. Persistent and quick buttons are presented as texts and the user can enter the number of the option or the name of the option to continue the flow.
When the bot finds multiple answers to the user's query, the bot lists options as a numbered list and suggests the user to enter the number of an option. Should customers change their mind, they can still select a different option:
Agent escalation works by setting up channeling policies in Bold360 AI. Once the conversation is channeled, the bot stops responding and lets the agent continue the conversation. Customers see a message when the conversation is escalated to an agent and when it ends. Customers however don't have an option to end the conversation with the agent.

How to add and customize the Bold360 search widget in Microsoft Teams

As an administrator of your company, you must install the Bold360 app in Teams just as any other app.

What's the customer experience like in Microsoft Teams?

Learn how articles created in Bold360 AI are displayed in Microsoft Teams.

The way articles are displayed in Microsoft Teams differs from how they are displayed in widgets. When creating articles that are to be presented in Microsoft Teams, keep the following in mind:

Microsoft Teams can display text, lists, tables, but it can't present carousels.
It supports URL links, links to email addresses and to other articles in the knowledge base.
It can display embedded videos and advanced text formatting in articles.
Conversational flows and entities are supported except for persistent buttons. Persistent buttons work the same way as quick buttons: once the user selects an option, the buttons disappear.
When the bot finds multiple answers to the user's query, the bot presents the options as buttons.
Agent escalation works by setting up channeling policies in Bold360 AI. Once the conversation is channeled, the bot stops responding and lets the agent continue the conversation. Customers see a message when the conversation is escalated to an agent and when it ends. Customers however don't have an option to end the conversation with the agent.

How to set up a WhatsApp messaging channel

To use WhatsApp for communicating with your customers, you need to create a messaging channel in Bold360 AI.

Make sure the following steps have been completed:

You purchased a WhatsApp Business Account and your Customer Success Manager has completed the necessary configuration settings to enable WhatsApp integration.
You have created an API key in Bold360 AI that meets the following criteria:
- It is set up to have access to the knowledge base you selected in the previous step
- It has all permissions set to write
- Its allowed IP ranges are set to 0.0.0.0-255-255.255.255
  Go to Admin Center > API Keys in Bold360 AI to see a list of already existing API keys or to create one. See How to create an API key in Bold360 AI to learn more.
If you want to use live agents too, make sure you have integrated Bold360 AI with Bold360 Agent.

In the AI Console, go to Touchpoints > Widgets.
Under Conversation configuration, select Messaging applications.
On the Channels tab, choose the plus icon to create a new channel.
Result: You are taken to the Create Channel page.
On the Create Channel page, enter a name and a description for the channel.
Select the knowledge base that the bot should use to serve your customers.
Enter the knowledge base API key.
You need to provide an API key here that meets the following criteria:
- It is set up to have access to the knowledge base you selected in the previous step
- It has all permissions set to write
- Its Allowed IP ranges are set to 0.0.0.0-255-255.255.255
  Go to Admin Center > API Keys in Bold360 AI to see a list of already existing API keys or to create one. See How to create an API key in Bold360 AI to learn more.
Select Bold360ai for Escalation Provider Type.
- Make sure you have the correct Bold360 integration URL.
  Your integration is either in the US or EU region. For an EU-based integration, add -eu into the integrations field. Otherwise, leave it empty.
- In the API Key filed, enter your Bold360 Agent API key.
  To get this API key, log in to the Bold360 Admin Center and go to Integrations > API Access Keys and create a new key. Make sure you select the correct chat window.
- Select the Smart Advisor Knowledge Base that will offer potential responses to your human agents during chat.
Select WhatsApp for Provider.
In the DeploymentID field, enter your WhatsApp deployment ID.
To get the DeploymentID, go to the WhatsApp Deployments tab of messaging applications.

Note: The WhatsApp deployment was created beforehand with the help of your Customer Success Manager and should be active.
Save your channel settings.

What's Next?

Read this article to learn how to configure your messaging channel further.
See this article to complete additional configuration in Bold360 AI.
Read this article for additional configuration steps in Bold360 Agent.

How to set up a Microsoft Teams messaging channel

To use Microsoft Teams for communicating with your customers, you need to create a messaging channel in Bold360 AI.

Make sure the following steps have been completed:

You have created an API key in Bold360 AI that meets the following criteria:
- It is set up to have access to the knowledge base you selected in the previous step
- It has all permissions set to write
- Its allowed IP ranges are set to 0.0.0.0-255-255.255.255
  Go to Admin Center > API Keys in Bold360 AI to see a list of already existing API keys or to create one. See How to create an API key in Bold360 AI to learn more.
If you want to use live agents too, make sure you have integrated Bold360 AI with Bold360 Agent.

In the AI Console, go to Touchpoints > Widgets.
Under Conversation configuration, select Messaging applications.
On the Channels tab, choose the plus icon to create a new channel.
Result: You are taken to the Create Channel page.
On the Create Channel page, enter a name and a description for the channel.
Select the knowledge base that the bot should use to serve your customers.
Enter the knowledge base API key.
You need to provide an API key here that meets the following criteria:
- It is set up to have access to the knowledge base you selected in the previous step
- It has all permissions set to write
- Its Allowed IP ranges are set to 0.0.0.0-255-255.255.255
  Go to Admin Center > API Keys in Bold360 AI to see a list of already existing API keys or to create one. See How to create an API key in Bold360 AI to learn more.
Select Bold360ai for Escalation Provider Type.
- Make sure you have the correct Bold360 integration URL.
  Your integration is either in the US or EU region. For an EU-based integration, add -eu into the integrations field. Otherwise, leave it empty.
- In the API Key filed, enter your Bold360 Agent API key.
  To get this API key, log in to the Bold360 Admin Center and go to Integrations > API Access Keys and create a new key. Make sure you select the correct chat window.
- Select the Smart Advisor Knowledge Base that will offer potential responses to your human agents during chat.
Select Microsoft Teams for Provider.
In the Channelid field, enter your Microsoft Office tenant ID.
To get your tenant ID, in Microsoft Teams, right-click a team and select Get link to team. Ask your administrator if you need help.
Save your channel settings.

What's next?

Make sure Allow sideloading of external apps and Allow external apps in Microsoft Teams are enabled and use the .zip file attached to this article to add the Bold360 app to Microsoft Teams. For more information refer to Microsoft?s documentation.
Read this article to learn how to configure your messaging channel further.
See this article to complete additional configuration in Bold360 AI.
Read this article for additional configuration steps in Bold360 Agent.

What are the best practices for FAQs?

Follow these guidelines to make the most of Digital DX AI's FAQ capabilites.

Remember the following guidelines when adding and FAQ to your widget:

Provide the FAQ in the widget upon opening?
Include three to six articles that represent your top use cases
When you start using the bot for the first time, specify the articles to be displayed in the FAQ using labels to avoid initial questions skewing your results
Review static FAQs every 30 days to see if they should be changed
If the FAQ is changed to dynamically present articles from the knowledge base later, make sure to exclude any negative articles from the FAQ like How do I get a refund?

Set welcome mode for customers on mobile devices

From now on, the web widget is displayed for customers using mobile web browsers, who are presented with a welcome message. Once they start typing into the chat field, the full-width web widget replaces the mobile widget, similarly to using the widget on a desktop computer.

Customers have the following experience in the widget:

To configure a welcome message,

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a knowledge base or URL to customize.
On the Position & Size tab, select Invite for Welcome Mode.
Save your changes.

On which digital channels can Digital DX be installed?

Digital DX is designed to provide excellent self-service experience in multiple digital channels.

In addition to a website, the Digital DX Q&A widget can be deployed on the following digital channels:

Mobile devices, such as iPhone, iPad, and Android devices. You can read more here.
Internal portal (such as your intranet)

Regardless of the type of the channel, the deployment process is quick and easy, and in most cases takes from minutes to a few hours.

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 to display message time stamps?

Configure your widget to display the time the message was sent under messages sent by the customer and the bot.

In conversational widgets, you can display the time when the bot, customers, and agents send messages.

To display time stamps, do the following:

In the Bold360 AI platform, go to Touchpoints > Widgets and click Personalize on the Floating widget pane.
Select the Knowledge Base or URL for your conversational widget.
On the Advanced tab, select Display message time stamps.
Save your changes.

How to configure the number of autocomplete results

Define the number of autocomplete results the widget shows while the customer is entering their question.

You can define the maximum number of intents that auto-complete displays in a widget.

Note: This setting only applies to web widgets.

In the Bold360 AI platform, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a knowledge base or URL to customize.
On the Basics tab, in the Auto-complete count field, choose Customize.
Enter the number of auto-complete options to display.
You can select any number between 1 and 10. The default value is 3.

Tip: If you select 0, no auto-complete results will be displayed.
Save your changes.

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.

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

Bold360 Advise widgets for internal support

Improve your employees' productivity by providing integrated, easy access to your company's knowledge base.

Bold360 offers search widgets that end-users can use to receive self-service information from their company?s internal knowledge base. The widget can also be used for knowledge sharing as end-users can suggest a response to a question as a new article. In Bold360 Advise, the end-user of the widget is the customer-facing employee of your company who may need information from a knowledge base that you do not want to make publicly available.

Bold360 Advise offers the following widget types:

Google Chrome extension: After adding the Bold360 Advise search widget to your Google Chrome browser as an extension, it is available in the browser on any website. The end-user can either open the extension or use the website?s context menu the receive help. End-users can also suggest an article as response to a search that did not return any result.
Salesforce widget: Available from a Salesforce account only. After the company?s admin installs the widget, it automatically becomes available for every employee when looking at a case in Salesforce.

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.

In Google Chrome, download the Bold360 extension from the Chrome Web Store.
Click Add to Chrome.
Result: You can now access the extension from your Chrome browser.
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.

How to configure Advise touchpoints

Improve your employees' productivity by providing integrated, easy access to your company's knowledge base.

To provide the best customer experience, you can configure Advise touchpoints for customer-facing employees similarly to embedded widgets. To configure an Advise touchpoint, go to Touchpoints > Widgets and click Personalize under Advise widgets.

For the best result, experiment with widget skins in the Basics tab of the configuration page. Use the Widget Preview on the right to see how your changes effect the widget.

Note: The Enable Advise Touchpoints feature must be enabled for your account. Contact your Customer Success Manager to enable it for you.

For more information on using the Chrome extension and the Salesforce widget, see Receive internal support in Google Chrome and Receive internal support in Salesforce.

How to generate Advise widget tokens

An Advise widget token is used to identify the knowledge base and context settings that identify the content available in Advise touchpoints.

Important: You must have the Enable Advise Touchpoints feature enabled on your account. Contact your Customer Success Manager to enable it for you.

To add a new token,

Go to Admin Center > Advise Widget Tokens and click Add New Token in the top-right corner of the page.
Name your widget token and fill in its details:
- Select a Knowledge Base that you want to use to display articles in your widget
- Optionally, select contexts that you want the bot to display
- Select whether you want to restrict the widget to be accessible from specific IP ranges
Click Generate Widget Token.
Add this token when you set up your Advise widget extension in Google Chrome or Salesforce.

Report on Bold360 Advise Token usage

You can run a report on Bold360 Advise token usage, which lists Advise tokens by name that were used to display articles to end-users.

Important: You must have the Enable Advise Touchpoints feature enabled on your account. Contact your Customer Success Manager to enable it for you.

To run a report on Advise token usage, do the following:

In the AI Console, go to Analytics > Reports.
On the Fields tab under Source, select Advise Token.
Select any other field that you want to see in your report.
Click Run.

Display article metadata in the Advise widget

In Advice widgets, you can display metadata of an article so that customers gain more insights. Displayable metadata includes the following:

Article creation date
Last updated date
Most recent person who updated the article
Labels

To enable this feature, do the following:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a knowledge base or URL to customize.
On the Basics tab, select Display Article Metadata.
Save your changes.

Receive internal support in Salesforce

When you open a case in Salesforce, you have a widget for searching your company?s internal knowledge base. The widget recognizes the Salesforce case ID and automatically searches the knowledge base based on that ID. When you find a suitable answer to a case, you can copy and paste it as an answer to your customer.

To further improve the results of the widget, you can like and dislike an article by clicking the respective button at the bottom of the article. Once you dislike an answer, it is less likely to be displayed when you search for the same customer query again.

You have the following experience when the search widget is active:

Figure 1. Customer-facing employee's view when the Bold360 search widget is active in Salesforce

How to comment on an article

When commenting is enabled for the Advise widget, customers can comment on the article without providing positive or negative feedback. To enable this feature, do the following:

In the AI Console, go to Touchpoints > Widgets.
Under Advise Widgets, click Personalize.
Select the knowledge base that you want to modify.
On the Basics tab, select Comments.
If you also want end-users to see the comments of other end-users, select Comments visible in the Widget as well.
Save your changes.

The end-user has the following experience after searching in the widget:

In the AI Console, you can find comments on the Comments tab of the Article Editor.

Receive internal support in Google Chrome

With the Bold360 widget in Google Chrome, you can either search for answers or, when your search does not display any results, you can also suggest an answer.

You have the following options to search:

Open the Bold360 extension in Chrome and type your question into the search widget
Right-click highlighted text on a website and select Bold360 > Search

Search results are displayed in the widget.

How to suggest an answer as a new article

When your search returns no results, you can suggest an answer that may help others find the relevant answer to the same question. You have the following options to suggest an answer:

Open the article suggestion form in the widget:
- From context menu
  1. Highlight text on a website that provides the best answer to your question.
  2. Right-click the highlighted text and click Bold360 > Suggest article.
  From the search widget
  
  When there are no results displayed, click Suggest article in the widget.
Fill in the form:
- Add a title to your answer. This helps the content manager of your company phrase questions in a way that helps end-users find your answer.
- Type your name.
- Enter the answer in the Topic field. If you highlighted your answer on a web site, then this field is automatically filled in.
Click Send.

A content manager receives your suggestion and decides the best way to add it to the knowledge base.

How to comment on an article

When commenting is enabled for the Advise widget, customers can comment on the article without providing positive or negative feedback. To enable this feature, do the following:

In the AI Console, go to Touchpoints > Widgets.
Under Advise Widgets, click Personalize.
Select the knowledge base that you want to modify.
On the Basics tab, select Comments.
If you also want end-users to see the comments of other end-users, select Comments visible in the Widget as well.
Save your changes.

The end-user has the following experience after searching in the widget:

In the AI Console, you can find comments on the Comments tab of the Article Editor.

Receive internal support in Microsoft Teams

To get internal support from the bot, search for Bold360 in the search field of Teams. When the app opens, you have the following options:

Get instant self-service support: Type your question at the bottom of the app to get an immediate answer for the bot. If the bot does not provide any answer, try to rephrase your question.
Escalate chat to a live agent: When the answer that the bot provides is insufficient, you can escalate the chat to a human agent. Send a message to the bot with the word escalate and wait for an agent to join the chat.
Add Bold360 to your Teams apps: During a conversation, you can add Bold360 to your Teams apps so that you can find it easier later on. To do so, click Add at the top of the app. You can open Bold360 from your Teams apps.

How to add the Bold360 Advise widget as a Salesforce app

As a Salesforce administrator, you must first obtain the following from your Account Manager or Customer Success representative:

a Bold360 search widget token
the Bold360 search widget app
an installation key

How to install the Bold360 AI widget

Download the Bold360 Advise widget app from Salesforce AppExchange.
Click Get It Now.
Click Install in Production.
Accept terms and conditions and click Confirm and Install.
Select who can use the search widget in Salesforce:
- Select Install for All Users to allow all Salesforce users to access the app
- Select Install for Specific Profiles and set up a group policy to allow only specific users to access the app.
Click Install.
On the Installation Complete page, enter the token you've obtained earlier and click Done.
Result: The Bold360 AI widget is now installed to Salesforce.

How to configure the Bold360 AI widget

Set up your Salesforce CORS policy:
1. In Salesforce Setup, go to Security > CORS.
2. Click New to create a Whitelisted Origins rule with your Bold360 company host name. For example, https://mycomany.nanorep.co
3. Create another rule for https://*.bold360.com
Add the Bold360 AI widget to your Case Page:
1. Go to Setup > Object Manager > Case > Case Page Layouts
2. Edit your Case Page Layout.
3. From the layout components at the top, drag and drop Visualforce Pages > Assistant Touchpoints Case Page to your Case Page Layout.
4. Save your Case Layout.

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 >

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 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 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:

In the AI Console, go to Touchpoints > Widgets.
Under Floating widget or Embedded widget, select Personalize.
Select the knowledge base or URL you want to customize.
Make sure you select a configuration where Widget mode is set to Conversational.
On the Conversation tab, make sure that Enable Feedback is selected.
Select Instant Feedback.
Instant feedback is disabled by default and doesn?t replace the feedback mechanism you enable with Enable Feedback option.
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.

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.

In the AI Console, go to Touchpoints > Widgets.
Under Floating widget or Embedded widget, select Personalize.
Select the knowledge base or URL you want to customize.
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.
Save your changes.

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.

In the AI Console, go to Touchpoints > Widgets.
Under Floating widget or Embedded widget, select Personalize.
Select the knowledge base or URL you want to customize.
Make sure you select a configuration where Widget mode is set to Conversational.
On the Conversation tab, make sure Enable Feedback and Instant Feedback are selected.
Select Simple in the Textual feedback submission flow field.
Save your changes.

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:

You can use thumbs-up and thumbs-down icons or Yes and No buttons at the end of articles. See How do I customize how visitors give feedback? for more info.
You can ask visitors to provide negative feedback in an open text field or offer them multiple options they can choose from or you can combine the two. See How can I customize negative feedback submission? to learn more.
You have the option to collect feedback about every answer in a conversational flow. See How can I enable instant feedback? for more information.

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 do I change the LivePerson agent name color within the chat session?

Log in to the AI Console and go to Touchpoints > Widgets.
Click Personalize in the widget type that you want to change.
If you have more than one Knowledge Base, select the one where you want to make your change.
The settings page of the widget is displayed.
On the Texts & Colors tab, scroll down to the bottom to the Chat Agent name color field.
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.
Click Save changes and then click OK.

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

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

In the AI Console, go to Touchpoints > Widgets.
Choose Personalize under the widget type you want to change.
Select the knowledge base or URL you want to customize.
On the Advanced tab, select Customize for the Enable auto-translation field.
Clear the checkbox for this option.
Save your changes.

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:

In the AI Console, go to Touchpoints > Widgets.
Under Floating widget or Embedded widget, select Personalize.
Select the knowledge base or URL you want to customize.
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 .
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:

In the AI Console, go to Touchpoints > Widgets.
Under Floating widget or Embedded widget, select Personalize.
Select the knowledge base or URL you want to customize.
From the Feedback input drop-down list, select Icons or Textual.
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.
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

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under Floating widget.
Select the knowledge base that you want to change.
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:

In Bold360 AI, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to modify.
Select a knowledge base or URL to customize.
On the Conversation tab, make sure you have selected Restrictive from the Search precision drop-down list.
Select Allow algorithm fallback.
In the Fallback statement field, enter a message that is displayed to the customer before offering additional answers.
Save your changes.

Slim Embedded widget customization

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

Customize widget header color

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select the knowledge base or URL to customize.
On the Basics tab, select the Primary color of your widget.
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 do I install the Embedded Widget?

The set up the Embedded Widget, follow these instructions:

In the AI Console, go to Touchpoints > Widgets.
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:

Select Get legacy embedded code and define widget size. The recommended size is: Width: 400, Height: 500.
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.

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.

In the AI Console, navigate to Touchpoints > Widgets.
Click Personalize under Embedded Widget.
Select the knowledge base or URL that you want to edit.
On the Advanced tab, select Embed grabs focus.
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

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select the knowledge base or URL to customize.
On the Basics tab, select the Primary color of your widget.
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

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

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

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

How do I change the floating widget size?

In the AI Console, go to Touchpoints > Widgets.
Under Floating Widget, select Personalize.
Select the knowledge base or URL you want to customize.

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?

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget that you want to change.
Select the Knowledge Base, URL, or domain where you want to make this change.
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.
Click Save changes, then click OK.

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

In the AI Console, go to Touchpoints > Widgets.
Under Floating Widget, click Personalize.
Select the Knowledge Base, URL, or domain that you want to change. The Settings page for your Widget is displayed.
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.
Click Save changes that is displayed, and then click OK. The change is made instantly in the widget on your website.

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

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type you want to change.
Select the URL or knowledge base where you want to make your change.
On the Basics tab, make sure you have Conversational selected for Widget Mode and Harmony is selected for Skin.
On the Position & Size tab, make sure you have Minimized selected for Minimized widget mode.
In the Minimized icon field, click Customize.
Select Upload Image and choose the image you want to display.
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:

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

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

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

Floating widget customization (Arcade and Modern widget)

Customizing the Look & Feel

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under Floating Widget.
Select a knowledge base or URL to customize.
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

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under Floating Widget.
Select a knowledge base or URL to customize.
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

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under Floating Widget.
Select a knowledge base or URL to customize.
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

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under Floating Widget.
Select a knowledge base or URL to customize.
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

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under Floating Widget.
Select a knowledge base or URL to customize.
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 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:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a Knowledge Base or a URL and go to the Advanced tab.
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:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a Knowledge Base or a URL and go to the Advanced tab.
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]...
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:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type you want to change.
Select a knowledge base or URL to customize.
On the Basics tab, make sure you have a Slim or Harmony selected for Widget Mode.
On the Advanced tab, select Enable Full Screen Mobile Widget.
This option is disabled by default.
Save your changes.

Customers have the following experience on their mobile devices:

.

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.

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type you want to change.
Select the URL or knowledge base where you want to make your change.
On the Advanced tab, select the following options:
- Mobile widget enabled
- Mobile - responsive behavior enabled
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,

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a knowledge base or URL to customize.
On the Basics tab, make sure you have a Slim or Harmony selected for Widget Mode.
On the Advanced tab, select Display goodbye message before closing the widget.
This option is disabled by default.
Save your changes.

Customers have the following experience when ending live chat:

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.

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type you want to change.
Select the URL or knowledge base where you want to make your change.
On the Basics tab, make sure you have Harmony selected for Skin.
In the Title Icon field, click Customize.
Click Upload Image and select the logo you want to display in the widget header.
Save your changes.

Your customers will have the following experience:

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:

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

Check out our sample video on the new Harmony skin.

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:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select a knowledge base or URL to customize.
On the Basics tab, make sure you have Conversational selected for Widget Mode.
In the Maximum Length Before Answer is Truncated field, click Customize.
Type the number of characters to display without truncating the article.
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.

In the AI Console, go to Knowledge > Articles.
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.

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:

In the AI Console, go to Touchpoints > Widgets.
Click Personalize under the widget type that you want to change.
Select the knowledge base or URL to customize.
On the Basics tab, select the Primary color of your widget.
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:

In the AI Console, go to Touchpoints > Widgets > Floating widget.
Click Personalize.
Select a knowledge base or URL to customize.
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
Save your changes.

AITouchpoints Articles

How to set up an SSL-secured support center

How to set up an SSL-secured support center

What is Smart Advisor?

What is Smart Advisor?

Onboarding Cards

FAQ

Context

Article Information

Labels

Articles with Links

Comments

Article Suggestion

Confidential Content

Support Center Customization

Support Center Customization

How to configure Digital DX AI after setting up a messaging channel

How to configure Digital DX AI after setting up a messaging channel

How to define welcome messages for chat invitations

How to define welcome messages for chat invitations

Define context-sensitive welcome messages

What are messaging applications in Digital DX AI?

What are messaging applications in Digital DX AI?

How to configure messaging channels

How to configure messaging channels

What are fallback messages?

What are fallback messages?

No results

Multiple results

API Invalid response (for API-based entities only)

Smart Advisor: Chatbot-assisted conversations

Smart Advisor: Chatbot-assisted conversations

Search Smart Advisor for help

How to rate a Smart Advisor response

How to suggest a response as a Smart Advisor article

How to set up the Smart Advisor touchpoint

How to set up the Smart Advisor touchpoint

How to set the bot to remain active in channeled conversations?

How to set the bot to remain active in channeled conversations?

How to enable hybrid (bot and agent) conversations?

How to enable hybrid (bot and agent) conversations?

How to enable a conversational bot in an account

How to enable a conversational bot in an account

What is a conversational bot and why do I need it?

What is a conversational bot and why do I need it?

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

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

How to prevent access to a support center's inner URL

How to prevent access to a support center's inner URL

How do I create support center structure with labels?

How do I create support center structure with labels?

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

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

How do I order labels and sub-labels in the support center?

How do I order labels and sub-labels in the support center?

How to redirect an iframe URL in support center

How to redirect an iframe URL in support center

How to set the context in an iframe support center

How to set the context in an iframe support center

How to set up a support center in the AI Console

How to set up a support center in the AI Console

How to add a new support center in the AI Console

How to add a new support center in the AI Console

Technical Preparations to implement a support center

Technical Preparations to implement a support center

Setting up a subdomain with a CNAME

Setting up a parent page for an iframe solution

Advanced configuration

How to implement a child support center

Slim Support Center widget customization

Slim Support Center widget customization

Customize widget width and height

Answer title font and colors

Answer text font and colors

Customize links

How to change the sorting of support center articles

How to change the sorting of support center articles

What are my options for implementing a support center?

What are my options for implementing a support center?

What are the benefits of an iframe implementation?