Table of Contents


Overview


Yellow.ai offers a wide range of options to customise features for its web widget. But sometimes our clients need even more flexibility in crafting the widget’s design, and functionality unique to their use cases. Thankfully, we do have certain tricks up our sleeve that you can use to customise your web widget to suit your needs. This document will guide you with different ways to customise your chat widget’s look & feel, functionality, and capture bot events.

Functions


If our bot’s default customisation settings do not match your brand guidelines or if you do not want to display the bot right after the page load, you can use the following steps to set up the bot in a way so that it is displayed only when you want it to!

Setup


First you will have to insert the default script given to you by yellow.ai at the <footer> of your website. Below is a sample script for reference:

<script type="text/javascript">
  window.ymConfig = {
    bot: 'x1601234512345',
    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>

Note: host depends on the region where the bot is deployed. If this is not deployed region-wise, the host will be https://cloud.yellow.ai