With the bot builder, you can use many functions available out of the box. Learn more about using functions here. You can also use custom Javascript (JS) functions if you need something more specific that is unavailable as a default function. 


Let's walk you through how this is done with the example of a simple JS function:

<script>
print: function (a, b, c) {        
console.log("print called: a:" + a + " b: " + b + " c: " +c);           
}
</script>
Note: You can write any function as a logic into this script. This is just one example.



Configuration inside the bot builder


The first step is to define the custom JS function to work as part of the APIs in the bot builder. Navigate to Flows > Configure > API Libary > Add new.

  1. Name the API. This is just for your reference.
  2. Choose JS Function for the Method and JSON for the Payload type.
  3. Name the JS Function. This is just for your reference. 
  4. Use the URL / JS function name field, and enter the function's name. This should be the same name you will use to refer to the custom JS function elsewhere, such as the widget embed script. In our example, it is "print". Remember that the function name is case-sensitive.
  5. Enter the argument values you need to pass in the Payload content as single-line JSON values. These argument values can also be dynamic. Use the + button to include dynamic values.
  6. Use the Required response parameters field to pass your success and failure response parameters. 



The bot will pass these inputs to the script after calling the custom JS function. When the function executes, it will expect a response parameter. You can pass these response parameters from the script to the bot based on the action's result. You can set up the bot to collect the values that must be passed in the payload content. Here's what it looks like:


You can call the response value in other parts of the bot flow. For example, suppose you're setting up the customer input as a message or a question. In that case, you can insert content from APIs, or in this case, insert the result of the JS function (success or failure response parameter).


Configuring the dialogs

Now that the function has been defined, we can call the function from anywhere in the bot flow. To call the function, you'll need to set up an action in the dialog for the bot to trigger the function.

  • Navigate to the flow where you want the function to run > new Action > Trigger API > select the API you just configured.
  • This will trigger the bot to run this action, which will call the API, which will trigger the configured JS function.



Configuration in the widget script

  • Open your bot and ensure it's on the latest version > Publish > Navigate to the Deploy menu > select Self-service widget from the dropdown > Save.
  • Copy the widget deployment script from the right and paste this code onto a script editor so that you can include your script inside this code
  • Include your custom JS function after the getClientParams function is defined.
  • Let's take the print function we showed earlier for this example. We shall define it within our widget bot script. Below you can see the bot widget script generated, and we included (and highlighted) the JS code for the print function.



  • Once you define this function in the bot script, you can call it anywhere in the bot flow.


Note: Keep in mind that if you're using a client-side action to call the JS function, you'll have to get the user input as a text field. This is to denote that the function is returning a response.

Some use cases

  • If you have a phone number that your customer needs to call, for example, a toll-free phone number, you can have a button that says "call us", which your customer can tap or click. This can trigger the JS function, which in turn will populate the default phone dialler with your toll-free number. In this case, WebView should have permission to access the dialler for Android devices. The phone dialler permission should be allowed at the manifest file level.
    <script>
    // initiate Freshbots.
    (function (d, w, c) {
      if (!d.getElementById("spd-busns-spt")) {
        var n = d.getElementsByTagName("script")[0],
          s = d.createElement("script");
        var loaded = false;
        s.id = "spd-busns-spt";
        s.async = "async";
        s.setAttribute("data-self-init", "false");
        s.setAttribute("data-init-type", "opt");
        s.src = "https://cdn.freshbots.ai/assets/share/js/freshbots.min.js";
        s.setAttribute("data-client", "xxxxxxxxxx");
        s.setAttribute("data-bot-hash", "xxxxxxxxxxx");
        s.setAttribute("data-env", "prod");
        s.setAttribute("data-region", "us");
        if (c) {
          s.onreadystatechange = s.onload = function () {
            if (!loaded) {
              c();
            }
            loaded = true;
          };
        }
        n.parentNode.insertBefore(s, n);
      }
    })(document, window, function () {
      Freshbots.initiateWidget(
        {
          autoInitChat: false,
          getClientParams: function () {
            return;
          },
          // openPhone JS custom function. pass the number to the function.
          openPhone: function(number){
            document.location.href = "tel:" + number;
            return {
                message: "success"
            }
          },
        },
        function (successResponse) {},
        function (errorResponse) {}
      );
    }); 
</script>


  • If you've deployed the bot on your mobile app and want to take your customer to a specific page on your app, you can do so using a deep link in the app.
    <script>
    function getMobileOperatingSystem() {
          var userAgent = navigator.userAgent || navigator.vendor || window.opera;
          if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
          {
             return 'iOS';
          }
          else if( userAgent.match( /Android/i ) )
          {
             return 'Android';
          }
          else
          {
             return 'unknown';
          }
       }
     (function (d, w, c) {
       if (!d.getElementById("spd-busns-spt")) {
         var n = d.getElementsByTagName("script")[0],
           s = d.createElement("script");
         var loaded = false;
         s.id = "spd-busns-spt";
         s.async = "async";
         s.setAttribute("data-self-init", "false");
         s.setAttribute("data-init-type", "opt");
         s.src = "https://cdn.freshbots.ai/assets/share/js/freshbots.min.js";
         s.setAttribute("data-client", "xxxxxx");
         s.setAttribute("data-bot-hash", "xxxxxxx");
         s.setAttribute("data-env", "prod");
         s.setAttribute("data-region", "us");
         if (c) {
           s.onreadystatechange = s.onload = function () {
             if (!loaded) {
               c();
             }
             loaded = true;
           };
         }
         n.parentNode.insertBefore(s, n);
       }
     })(document, window, function () {
       Freshbots.initiateWidget(
         {
           autoInitChat: false,
           getClientParams: function () {
             return;
           },
           // load the apps based on the username and platform sent to this app.
           loadDeepLink: function(userName, platform){
               const deepLinkInstagramDomain = "instagram://";
               const deepLinkTwitterDomain = "twitter://";
               const deepLinkFacebookDomain = "facebook://";
               var urls = {
                   instagram: `http://www.instagram.com/${userName}`,
                   twitter: `http://www.twitter.com/${userName}`,
                   facebook: `http://www.facebook.com/${userName}`
               }
               switch(getMobileOperatingSystem()){
               case 'Android':
               case 'iOS':
                       urls["instagram"] = `${deepLinkInstagramDomain}user?username=${userName}`;
                       urls["twitter"] = `${deepLinkTwitterDomain}user?username=${userName}`;
                       urls["facebook"] = `${deepLinkFacebookDomain}user?username=${userName}`;
                       break;
               default:
                       break;
               }
               document.location.href = urls[platform]
               return {
                   message: "success"
               }
           }
         },
         function (successResponse) {},
         function (errorResponse) {}
       );
     });
   </script>


  • Let's say your business is location-based, so you want to display the nearest store to your customers or you want to check if you deliver to their location, you can get the location based on their browser data to personalize the customer experience.
    <script>
    // get location during page load.
    var lat = 0;
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
      function showPosition(position) {
        long = position.coords.longitude;
        lat = position.coords.latitude;
      }
    }
    // initiate Freshbots.
    (function (d, w, c) {
      if (!d.getElementById("spd-busns-spt")) {
        var n = d.getElementsByTagName("script")[0],
          s = d.createElement("script");
        var loaded = false;
        s.id = "spd-busns-spt";
        s.async = "async";
        s.setAttribute("data-self-init", "false");
        s.setAttribute("data-init-type", "opt");
        s.src = "https://cdn.freshbots.ai/assets/share/js/freshbots.min.js";
        s.setAttribute("data-client", "xxxxxxxxxx");
        s.setAttribute("data-bot-hash", "xxxxxxxxxxx");
        s.setAttribute("data-env", "prod");
        s.setAttribute("data-region", "us");
        if (c) {
          s.onreadystatechange = s.onload = function () {
            if (!loaded) {
              c();
            }
            loaded = true;
          };
        }
        n.parentNode.insertBefore(s, n);
      }
    })(document, window, function () {
      Freshbots.initiateWidget(
        {
          autoInitChat: false,
          getClientParams: function () {
            return;
          },
          // getLocation JS custom function.
          getLocation: function () {
            if (navigator.geolocation) {
              return { message: "success", lat: lat, long: long };
            } else {
              return { message: "not supported", lat: "NA", long: "NA" };
            }
          },
        },
        function (successResponse) {},
        function (errorResponse) {}
      );
    }); 
</script>