Widget Functions and Events

The web widget can be customized in various ways using functions and events to match any use-case. In this doc, we'll take a deep dive into:-

  1. What is a bot script
  2. How to pass values from the client to the bot
  3. Functions
  4. Events
  5. Authentication
  6. Chrome Extension
  7. Mobile

Bot Script#

All of our bots on follow the same web widget script. To know more on how to configure the colors and font of your bot, you can check out our docs on web widget styling

Paste your script at the end of the </body> tag

Sample script

<script type="text/javascript">
window.ymConfig = {
"bot":"x1655954196162",
"host":"https://cloud.yellow.ai"};
(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>

Here, Host depends on the region in which your bot is deployed in

Bot Regions#

Region CodeRegionHost
R1https://r1.cloud.yellow.ai
R2https://r2.cloud.yellow.ai
R3https://r3.cloud.yellow.ai
R4https://r4.cloud.yellow.ai
R5https://r5.cloud.yellow.ai
GlobalGlobalhttps://cloud.yellow.ai

How to pass values from the web client to the bot#

To pass values from your parent interface to the bot, you can make use of our payload data which needs to be configured in the bot script itself.

<script type="text/javascript">
window.ymConfig =
{
"bot":"ENTER_YOUR_BOT_ID_HERE",
"host":"https://cloud.yellow.ai",
"payload":
{
"name": name, // Add payload data here
"email": email // The values can be dynamic
},
"partiallyOpen":false,"alignLeft":"right"
};
.
.
. //Rest of the chatbot script
.
</script>

Our bot undergoes initialization on page load. Once the boat loads in, we can assign these values to variables using our Variables node.

Variable format is {{profile.payload.Your_Field_Name}}

Functions#

You can make use of these out of the box functions to play around with our bot based on your specific use-case.

FunctionFunctionality
window.YellowMessengerPlugin.hide()Hides bot icon
window.YellowMessengerPlugin.show()Unhides/Shows bot icon
window.YellowMessengerPlugin.openBot()Opens chat widget
window.YellowMessengerPlugin.closeBot()Closes chat widget
window.YellowMessengerPlugin.toggleChat()Toggles chat widget to opposite state i.e., Open chat widget if already closed. Closes chat widget if already open.

Events#

To send events to the bot

window.YellowMessengerPlugin.sendEvent(eventName, true)
const eventName = {
code: "Event name",
data: Event Data
}

To listen to events thrown by the bot

<script type="text/javascript">
window.addEventListener('message', function(eventData) {
// make sure to verify origin to prevent XSS attacks.
// https://blog.yeswehack.com/yeswerhackers/introduction-postmessage-vulnerabilities/
// if (event.origin !== <your_origin>) throw new Error('Message not allowed");
console.log(eventData,"eventData");
})
</script>

List of events we track

EventFunctionality
ym-bot-openedBot opened
ym-bot-closedBot closed
ym_event_quick_replyQuick Reply clicked
ym_event_image_clickedImage opened in preview
ym_event_card_actionCard action button clicked
ym-bot-loaded-on-page-reloadWhen the refresh context is false, the bot will receive events as soon as the page reloads
ym_homeHome button clicked
page-url-based-triggerWhenever a notification is sent in the bot (for electron apps)

Authentication#

Authentication is done with the help of a unique token generated for each user that logs into your platform.

Once this token is generated you can conditionally check if a user has been authenticated with the following script.

# Recommended approach for Chatbot authentication
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
}

----- OR -----

if(userIsAuthenticated) {
// replace this with your own auth logic.
window.YellowMessengerPlugin.init({
payload: {
member_id: '1231basd' // you can pass any info you want to be associated with the user based on your use case here. Note that this can be read by the bot using the {{profile.payload.member_id}} variable.
}
});
window.YellowMessengerPlugin.show(); // display the bot icon
}

Chrome Extension#

The chrome extension allows you to paste the script of your bot on any webpage to test your development bot's payload and authentication locally on your device without having to publish changes to Live.

Link to our chrome extension

Mobile#

If you've integrated the bot with Android, refer the docs here.

If you've integrated the bot with iOS, refer the docs here.

  • Bot Script
  • How to pass values from the web client to the bot
  • Functions
  • Events
  • Authentication
  • Chrome Extension
  • Mobile