Chat widget FAQs
Setup page related FAQs
Chatbot is auto-scrolling upwards after navigating to a different tab by clicking the URL from the chatbot. How to resolve this issue?
You need to enable the "Scroll the chat window to the bottom" option in the Chat widget's Settings tab. Navigate to the Channels > Chat widget > Settings.
How to enable chat history conversation?
For cloud.yellow.ai platform, ensure that Show history of the conversation is enabled.
For "app.yellowmessenger.com" or "app.yellow.ai" platform, ensure that Reset Context for every load checkbox is unchecked in the dashboard settings.
Note: If you want to maintain a history across devices or browsers, you can create an authentication token, which is a unique token, and pass it in the given format, as shown below:
For "app.yellowmessenger.com" or "app.yellow.ai" platform, ensure that Reset Context for every load checkbox is unchecked in the dashboard settings.
Note: If you want to maintain a history across devices or browsers, you can create an authentication token, which is a unique token, and pass it in the given format, as shown below:
if (userIsAuthenticated) {
// replace this with your own auth logic and reload the bot with new info.
window.YellowMessengerPlugin.init({
ymAuthenticationToken: 'Your_Unique_token'
});
window.YellowMessengerPlugin.show(); // display the bot icon
}
Is it possible to change the chat widget background colour for bot and agent messages?
No, the background colour can be changed only for user messages. This can be done by updating the complimentary color in the chat widget settings.
How to change the font size in the widget?
To change the font size in the widget, follow these steps :
1.Navigate to Channels > Chat widget > Widget panel.
)
2. Expand Font drop-down and select your preffered font size and click Save changes.
)
1.Navigate to Channels > Chat widget > Widget panel.
2. Expand Font drop-down and select your preffered font size and click Save changes.
Can we change the color scheme of the chat header gradient from top to bottom?
The gradient is intentionally applied from left to right for readability reasons. Applying the gradient from top to bottom might make it challenging to read the text (title & description) due to multiple colors. This design decision ensures optimal visibility and a better user experience.
Is it possible to block the users from uploading specific attachment formats?
Yes, you can control which file formats users are allowed to upload for documents, images, and other files. To manage this, navigate to Chat Widget > Settings > Validate attachments
Chat widget related FAQs
How to resolve a website performance issue after installing the bot?
Ensure that the chatbot script is placed within the <body> tag of the host website rather than the <head>. This will ensure that the bot loads only when the website is fully loaded without affecting its performance.
Why is the bot not displaying or loading any of the configured messages?
Make sure you have configured Welcome message in the Automation. Login to cloud.yellow.ai platform. Navigate to Studio -> Welcome Message -> Add welcome message. To know more, click here.
Is it possible to deploy two bots on a single website?
No, you cannot deploy 2 bots on a single website.
How to set the position of the bot dynamically?
The bot's position is set to right by default. On the Chat widget settings page, you can change it to left. To dynamically set the position of the bot on a website, set the position to right on the Settings page and pass `alignLeft:true` inside ymConfig of the chatbot script on the respective webpage.
Does the Chat widget or PWA contain a pop-up component?
No, the pop-up component appears only when an error message such as "device not connected to network" or "file upload limit exceeded" is displayed.
Is drop-down option supported in the Chat widget?
Currently, drop-down is not supported for the Chat widget bot.
Is it possible to integrate the Yellow AI chatbot with a NextJS website?
Yes, you can add the script to any NextJS page, to do so:
* Create a file called static/yellowai.js and paste our script. Note: You need to remove the tags.
* You can now load this file on page (page name). (jsx|tsx) file
* Create a file called static/yellowai.js and paste our script. Note: You need to remove the tags.
* You can now load this file on page (page name). (jsx|tsx) file
import Head from 'next/head';
import MyComponent from '../components/mycomponent';
export default () => (
<div>
<Head>
<script type="text/javascript" src="/static/yellowai.js"></script>
</Head>
<MyComponent />
</div>
)
Is the React SDK supported for the web widget?
React SDK is not supported for web widget. However, you can include our script at the end of the body tag in your index.html file.
Is it possible to change the language of the weekdays displayed on the Chat Widget
Yes, the platform supports 10+ languages for placeholder texts such as timestamps, and text fields. The bot user can choose their preferred language to see text in that language.
How to disable the like and dislike buttons shown under the chats in the chat widget (PWA)?
By disabling message feedback in the chat widget, the "like" and "dislike" buttons are disabled.
Is it possible to remove the user's button selection from the list or quick replies in chatbot?
No. Every message exchanged between a bot, users, and agents needs to be tracked/recorded so that the users are aware of the message sent/selection made. Following are the reasons:
• Providing feedback: When a user selects an option/sends a message, they expect feedback in response. By displaying the messages, users will know that their message has been received.
• Transparency: When a user message is displayed, it builds trust between the user and the chatbot.
• Clarification: At times, the bot may not understand the context of the user's message. Displaying the message in such instances will be essential.
• Providing feedback: When a user selects an option/sends a message, they expect feedback in response. By displaying the messages, users will know that their message has been received.
• Transparency: When a user message is displayed, it builds trust between the user and the chatbot.
• Clarification: At times, the bot may not understand the context of the user's message. Displaying the message in such instances will be essential.
Why does a blank space appear when scrolling in the widget?
This happens only for bots migrated from V1 ("app.yellowmessenger.com" or "app.yellow.ai" platform) to V2 (cloud.yellow.ai platform). On the "app.yellowmessenger.com" or "app.yellow.ai" platform, you need to disable "Voice First" for the V2 widget as it is not supported. To disable "Voice First" option, click Configuration > Channels > Chat Widget > General > Voice First.
Is it possible to hide the chat widget icon on the website?
Yes, use "window.YellowMessengerPlugin.hide()" function to hide the icon of the chat widget on the website.
Can we pass data to the widget for every page of the website?
Yes, you can pass the data to the widget on its respective page of the website. For more information, see payload.
Is it possible to configure the position of the bot to be on right when the user selects Arabic and to the left when the user selects English?
Yes, in ymConfig, you must set "alignLeft:true".
How can we change the font color in the bot name and description?
The bot name and description text color is set automatically based on the background color to ensure readability, with a contrast ratio of 4.5+. For example, white text on bright red background is hard to read, so text color is set to black. Slightly darker red shades can be tested to find a readable color combination.
Does the chat widget support HTML tags?
No, the chat widget does not support HTML tags. In order to maintain security and prevent web attacks, HTML tags are blocked within the widget. Any content containing HTML tags will be converted into plain text for display.
)
Does the chat widget automatically aligns the text based on the selected language?
Yes, the widget automatically aligns the text based on the selected language. For example, English, Hindi, Spanish, and so on are aligned from left to right. Languages like Arabic and Dhivehi are aligned from right to left.
Note: If a text message contains both languages, the text will be aligned based on the language set in the bot at the respective step.
Note: If a text message contains both languages, the text will be aligned based on the language set in the bot at the respective step.
Does the chat widget support auto-complete feature?
Yes, the chat widget supports auto-complete. To set up auto-complete, follow these steps:
• You need to enable auto complete in [Yellow.ai Platform](https://cloud.yellow.ai) > Channels > Chat widget > Settings > enable Auto complete > click Save changes. For more information, click here
)
• Navigate to Automation > select a flow > click on the respective node > click Make prompt smarter. For more information, click here.
• You need to enable auto complete in [Yellow.ai Platform](https://cloud.yellow.ai) > Channels > Chat widget > Settings > enable Auto complete > click Save changes. For more information, click here
• Navigate to Automation > select a flow > click on the respective node > click Make prompt smarter. For more information, click here.
How to disable Message feedback?
By default, message feedback is enabled for all bots. This helps to gather feedback on how helpful bot responses have been to the end user. It is recommended not to disable Message feedback. However, you can disable message feedback from Channels > Chat widget > disable Message feedback > click Save changes.
)
How to restrict users from clicking on carousel card buttons repeatedly?
Go to Automation > Select the flow > Click on Carousel node > Click Settings icon > Enable Disable action after click
)
How to deploy a website bot on sites.google.com?
To deploy a website bot on sites.google.com, follow these steps:
Navigate to the admin portal of your Google site > Add an Embed block > Select Embed code > Paste the bot script > Click Next.)
The bot will be deployed on sites.google.com.
)
Navigate to the admin portal of your Google site > Add an Embed block > Select Embed code > Paste the bot script > Click Next.
The bot will be deployed on sites.google.com.
Is it possible to deploy a bot in multiple locations on a website or Mobile SDK?
For web bots, it is not possible to have two bots on the same window simultaneously. However, you can load a default bot initially, and then when a user selects a specific order in which the bot needs to be deployed, you can trigger a new bot using the following code.
window.YellowMessengerPlugin.init({bot: '<botId>'})
Note that, this will replace the previously loaded bot. On Mobile SDK, if you want to maintain a separate session and history for each order, you need to pass the ymAuthToken parameter. Ensure that these approaches allow you to manage different instances of the bot, but only one bot can be active at a time.
How long will the session be active in the chat widget?
The session in the chat widget will remain active for 24 hours by default. However, if needed, you have the flexibility to customize the session duration from the backend. The session duration can be adjusted within a range of 1 minute to 1440 minutes, which is equivalent to 24 hours.
By configuring the session duration according to your specific requirements, you can ensure that users have an adequate amount of time to interact with the chat widget before the session expires.
If you have any additional questions or need further assistance, contact our support team
By configuring the session duration according to your specific requirements, you can ensure that users have an adequate amount of time to interact with the chat widget before the session expires.
If you have any additional questions or need further assistance, contact our support team
When you receive new messages from a bot or agent, how do you enable scroll behaviour for the chat widget?
Follow the below steps to enable the scroll behaviour.
Navigate Channels > Chat widget > Settings > expand General settings > Scroll behaviour.)
Under Scroll behavior, choose your preferred option:
• Bottom: Select this option to scroll the widget automatically to the bottom of the new message.
• Top: Select this option to scroll the widget automatically to the top of the new message.
• Off: Select this option to disable scrolling, the widget will remain at the same message when a new message is received.
Navigate Channels > Chat widget > Settings > expand General settings > Scroll behaviour.
Under Scroll behavior, choose your preferred option:
• Bottom: Select this option to scroll the widget automatically to the bottom of the new message.
• Top: Select this option to scroll the widget automatically to the top of the new message.
• Off: Select this option to disable scrolling, the widget will remain at the same message when a new message is received.
Is it possible to drag the chatbot icon and place it anywhere on the website?
Yes, you need to add floatingIcon: true in the following chat bot script to drag the chatbot icon.
<script type="text/javascript">
window.ymConfig = {"bot":"x1657623696077","host":"https://cloud.yellow.ai", "floatingIcon":true};
(function() {
var w = window,
ic = w.YellowMessenger;
if ("function" === typeof ic) ic("reattach_activator"), ic("update", ymConfig);
else {
var d = document,
i = function() {
i.c(arguments)
};
function l() {
var e = d.createElement("script");
e.type = "text/javascript", e.async = !0, e.src = "https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";
var t = d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(e, t)
}
i.q = [], i.c = function(e) {
i.q.push(e)
}, w.YellowMessenger = i, w.attachEvent ? w.attachEvent("onload", l) : w.addEventListener("load", l, !1)}
})();
</script>
Is it possible to minimise the callout banner?
Yes, you can minimize it using the icon highlighted in the following:
How to load the callout banner dynamically in the middle of a chat?
A callout banner allows you to add a banner to chatbot's conversation. Before starting a chat with the user, the callout banner is shown at the top of the chat window with a description of the chatbot’s purpose. To know more, click here
Banners can used to alert the users about new products, services, special offers, and promotions.
If the V1 bot consists of a banner and you want to move to V2 dynamically in the middle of th chat conversation, then you need to add a function to display the same banner in V2.
While migrating from V1 to V2 use the following function code to copy the banner from V1 to V2:
return new Promise(async (resolve, reject) => {
try {
app.log(app.profile,"in profile");
if (app.profile && app.profile.payload && app.profile.payload.widgetVersion && app.profile.payload.widgetVersion=="v2"){
await app.sendEvent({
code: "ui-event-update-promotion",
data:[{
title: app.renderMessage('indiatour', {}, ''),
options: [
{
title: app.renderMessage('activate_now', {}, 'Activate Now'),
text: `activate channel`
}
]
},
{
title: app.renderMessage('promotion_2', {}, ''),
options: [
{
title: app.renderMessage('download_now', {}, 'Download Now'),
url: `https://watcho.onelink.me/eyNf/4plou2wu`
},
]
},
{
title: app.renderMessage('promotion_3', {}, ''),
options: [
{
title: app.renderMessage('subscribe', {}, 'Subscribe'),
text: 'Subscribe'
}
]
},
]
})
}
else{
await app.sendEvent({
code: "ui-event-update-promotion",
data: {
quickReplies: [
{
title: app.renderMessage('indiatour', {}, ''),
options: [
{
title: app.renderMessage('activate_now', {}, 'Activate Now'),
text: `activate channel`
},
]
},
{
title: app.renderMessage('promotion_2', {}, ''),
options: [
{
title: app.renderMessage('download_now', {}, 'Download Now'),
url: `https://watcho.onelink.me/eyNf/4plou2wu`
},
]
},
{
title: app.renderMessage('promotion_3', {}, ''),
options: [
{
title: app.renderMessage('subscribe', {}, 'Subscribe'),
text: 'Subscribe'
}
]
},
],
"autoPlay": true,
"autoPlaySpeed": "4000",
hide: true,
showPromotionMessage: 'Hi! I am Dia, your <strong>d</strong>2h <strong>I</strong>ntelligent <strong>A</strong>ssistant.',
displayShowPromotionBar: true
}
});
}
return resolve();
} catch (e) {
app.log(e, 'error in showPromotion');
return resolve();
}
});
How to hide the home and input buttons when the user opens the chatbot for first time?
To hide the home and input buttons when the user opens the chatbot, add the setDisableActionsTimeout property inside the window.ymConfig object.
Is it possible to prevent the bot icon from overlapping with CTAs on mobile screens?
The following are the two options to prevent the bot icon from overlapping:
1.Write a custom script to override the position.
2. Hide the default icon and create a custom entry point or button on the site. Use the window.YellowMessengerPlugin.openBot() function to open the bot when a user clicks on the custom button. For more information, click here.
Note that the chat bubble and notification icon will not be displayed if a custom icon is deployed.
1.Write a custom script to override the position.
2. Hide the default icon and create a custom entry point or button on the site. Use the window.YellowMessengerPlugin.openBot() function to open the bot when a user clicks on the custom button. For more information, click here.
Note that the chat bubble and notification icon will not be displayed if a custom icon is deployed.
Can the Bot title, description and logo can be changed dynamically based on website?
Yes, you can configure different themes for different websites. Set a default theme in Channels > Chat Widget > Widget Panel/Bot icon. Then, based on the user, you can override it on the web and mobile SDK. For the web, you need to pass the following values inside window.ymConfig in the bot script:
`theme: {
botName: "", // Text up to 50 characters
botDesc: "", // Text up to 50 characters
primaryColor: "", // RGB or HEX value
secondaryColor: "", // RGB or HEX value
botIcon: "", // CDN link
botClickIcon: "" // CDN link
}
For the mobile SDK, you need to send the values as mentioned below:
let theme = YMTheme()
theme.botName = ""
theme.botDesc = ""
theme.primaryColor = ""
theme.secondaryColor = ""
theme.botIcon = ""
config.theme = theme
Note: botClickIcon is not applicable for Mobile SDKs since the entry point will be set within the app. On the website, botClickIcon refers to the floating icon displayed when the bot is minimized.
PWA related FAQs
Is it possible to change the short cut icon for PWA bot?
Yes, you can change the PWA bot's shortcut icon via bot mapping. Note that the icons are supported with the following resolutions:
* Mobile: 192*192
* Desktop: 512*512.
* Mobile: 192*192
* Desktop: 512*512.
Is it possible to customise the URL of the PWA bot?
No, you cannot customise the URL of the PWA bot.
Is it possible to pass the data from the URL to a widget?
Yes, using payload, you can pass the data.
Is it possible to integrate the Yellow AI chatbot with a NextJS website?
Yes, you can add the script to any NextJS page, to do so:
* Create a file called static/yellowai.js and paste our script. Note: You need to remove the tags.
* You can now load this file on page (page name). (jsx|tsx) file
* Create a file called static/yellowai.js and paste our script. Note: You need to remove the tags.
* You can now load this file on page (page name). (jsx|tsx) file
import Head from 'next/head';
import MyComponent from '../components/mycomponent';
export default () => (
<div>
<Head>
<script type="text/javascript" src="/static/yellowai.js"></script>
</Head>
<MyComponent />
</div>
)
It is possible to automatically open PWA chatbot using chat widget functions?
No, by default PWA bot will be opened automatically.
Chat history related FAQs
Is it possible to auto-delete conversations between the user and the bot after 48 hours?
There is no option to delete/hide conversation history after 48 hours. It will be accessible only for 30 days.
Is it possible to share the same chat session history across PWA and mobile SDK if a script is used to integrate the chatbot?
On PWA, you can use the same ymAuthenticationToken that you used on the mobile SDK. You can add the same ymAuthenticationToken at the end of the PWA URL to get the same chat session history.
https://cloud.yellow.ai/pwa/v2/live/<your_bot_id>?ymAuthenticationToken=<your_user_token>
If a script is used to integrate the chatbot, you need to pass the token inside `window.ymConfig` in the script.
window.ymConfig = {
ymAuthenticationToken: "your_unique_token"
}
How do we add ymAuthenticationToken to the PWA script so that we can see the same chat history in the PWA and mobile SDK?
You need to pass the ymAuthenticationToken in the URL as a query parameter.
https://cloud.yellow.ai/pwa/v2/live/<your_bot_id>?ymAuthenticationToken=<your_user_token>
General FAQs
How to trigger the closeBot() function when a specific flow ends or when you reach a specific node?
You must initiate an event at the end of the specific flow and will receive a callback in onEventFromBot(_ response: YMBotEventResponse) function of YMChatDelegate, where you can add the closeBot.
Is it possible to change the bot title and description when the bot switches from parent bot to child bot?
In orchestrator setup, you cannot interact with the child bot directly, and the UI loaded will be that of the parent bot. Therefore, there cannot be a separate Title, Description, or Icon for the child bot.
What to do if buttons are not loading on the parent website?
This happens when a website blocks CDNs (Content Delivery Network). You need to whitelist these by updating content security policy:
* cdn.jsdelivr.net (to load the font)
* https://cdn.yellowmessenger.com (to load buttons)
* cdn.jsdelivr.net (to load the font)
* https://cdn.yellowmessenger.com (to load buttons)
Is speech-to-text (STT) feature supported in the chat widget?
Yes, STT feature is supported for the chat widget.
Is it possible to implement the callout banner for child bots and view them when the parent bot switches to child bots in the app?
Yes, to view the callout banner for child bots, send an event with "ui-event-close-promotion" to close the banner. In this way, you can control when to show or turn off the banner, in this case only for child bots.
Is it possible to remove the user's button selection from the list or quick replies in chatbot?
No. Every message exchanged between a bot, users, and agents needs to be tracked/recorded so that the users are aware of the message sent/selection made. Following are the reasons:
• Providing feedback: When a user selects an option/sends a message, they expect feedback in response. By displaying the messages, users will know that their message has been received.
• Transparency: When a user message is displayed, it builds trust between the user and the chatbot.
• Clarification: At times, the bot may not understand the context of the user's message. Displaying the message in such instances will be essential.
• Providing feedback: When a user selects an option/sends a message, they expect feedback in response. By displaying the messages, users will know that their message has been received.
• Transparency: When a user message is displayed, it builds trust between the user and the chatbot.
• Clarification: At times, the bot may not understand the context of the user's message. Displaying the message in such instances will be essential.
Can we have custom fonts for V2 web bots?
Currently, v2 web bots do not support custom fonts as we need to validate legibility on the chat interface, ensure the availability of appropriate font weights, and then support respective languages. If you need to add a new font, reach out to the support.
Is possible to display image and text in a single node?
Yes, you can make use of Generic card, and don not include any options in it. You need to include image, and description. Store the function response in var of type array and connect it to a message carousel node.
)
Is it possible to configure customized icons for carousel (card) buttons?
Icons are supported only in quick replies. whereas for buttons inside cards, you can use emojis.
Is it possible to update the token without refreshing the webpage?
No, the token and payload are only fetched during page load. Hence, you cannot update the token automatically.
Even though the agent is not connected to the bot, the app.yellowmessenger.com chatbot displays a green round circle, indicating that the agent is online. Is it possible to change the settings of the bot on the app platform?
Yes, on "app.yellowmessenger.com" or "app.yellow.ai" platform you can disable it in Configuration > Channels > Chat Widget > General > Show Dot Status in Title.
Is it possible to change the language of the bot whenever the user switches from one language to another on the website?
Yes, the language of the bot is changed when a user switches from one language to another on the website. You have to update the bot's language and reinitialize the bot. Note that the language of the chat history cannot be updated, as those messages were already delivered, stored, and fetched from the backend in the respective language.
What are the minimum compatible versions of the browsers supported by the web widget?
• Chrome 89 and later
• Edge 89 and later
• Firefox 70 and later
• Safari 10.1 and later
• Edge 89 and later
• Firefox 70 and later
• Safari 10.1 and later
How to add the image in Quick Replies node?
In the quick reply node, add the image link under the Prefix image. Click here for more information.
When an agent is connected to the bot, it is possible to close the conversation and trigger a journey?
When an agent is connected to the bot, the bot will not trigger any flow. To trigger a particular flow and close the conversation, you need to add the "talk to bot" button in the Callout banner. You can add the button either from the UI or using the function.
Add talk to bot button using the function
The following is the sample function:Add Talk to bot button using Automation's Conversation settings
To add the banner text for the talk to bot button, follow these steps:
1. Navigate to Studio > Conversation settings > Callout banner.
2. Enter the title and button name. Click Update.
• The callout banner will be updated accordingly.
Add talk to bot button using the function
The following is the sample function:
array = [{
title: 'Wish to end your chat with our Live Agent',
options: [
{
title: 'End Chat', text: "talk to bot"
}
]
}]
event : ui-event-update-promotion
To add the banner text for the talk to bot button, follow these steps:
1. Navigate to Studio > Conversation settings > Callout banner.
2. Enter the title and button name. Click Update.
• The callout banner will be updated accordingly.
Is it possible to block users from copying bot them and pasting messages in the text field?
Yes, it is possible to block users from copying bot messages. To implement this, you need to pass disableCopyPaste: true inside the the window.ymConfig chatbot script.
window.ymConfig = {"bot":"x1657623696077","host":"https://cloud.yellow.ai", "disableCopyPaste": true};
How to disable users from clicking on images in the carousel node?
To disable users from clicking on images in the carousel node, include disableCardImageClick: true inside the the window.ymConfig chatbot script.
window.ymConfig = {"bot":"x1657623696077","host":"https://cloud.yellow.ai", "disableCardImageClick": true};
Can I hide the chat separator when an agent is connected to the bot?
To hide the chat separator when an agent is connected to the bot, include hideTransferEvent: true inside the the window.ymConfig chatbot script.
window.ymConfig = {"bot":"x1657623696077","host":"https://cloud.yellow.ai", "hideTransferEvent": true };
How to retrieve the sender ID on a website if Yellow Messenger authentication is not passed?
To retrieve the sender ID, go to live bot page, right click and select Inspect > Network > Payload search for update API, you can find the userId within the payload.
