We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
We assure you that this change will not impact your product experience, and no action is required on your part.
With the bot builder, you can use many functions that are 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 not available as a default function.
TABLE OF CONTENTS
- Configuration in the widget script
- Configuration inside the bot builder
- Configuring the dialogs
- Some use cases
Let's walk you through how this is done with the example of a simple JS function:
print: function (a, b, c) {
console.log("print called: a:" + a + " b: " + b + " c: " +c);
}Configuration in the widget script:
You'll first have to configure the JS code into the widget script. To get the bot widget script
- Navigate to the Deploy menu > make sure that the self-service widget is selected > and copy the widget deployment script from the right.
- Paste this code onto a script editor so that you can include your script inside this code
Note: You can write any function as a logic into this script.
- Include your custom JS function after the getClientParams function is defined.
- For this example, let's take the print function that we showed earlier and 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.
Configuration inside the bot builder:
- Click on Flows > Configure > API Libary > Add new button.
- Provide a (1) Name for the JS Function. This is just for your reference.
- In the (2) URL / JS function name field, enter the function's name. This should be the same name that you defined in the bot widget script. In our example, it is "print". Remember that the function name is case-sensitive.
- Set the method type to (3) JS Function and the (4) Payload type as JSON.
- Enter the argument values you need to pass in the (4) Payload content as JSON single line values. These argument values can also be dynamic. Use the + button to include dynamic values.
In the (6) Add the required response parameters field, you can pass your success and failure response parameters. The bot will pass the input to the script after making the function call. 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 call the response value from here 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 JS function > select the API you just configured.
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, for Android devices, the WebView should have permission to access the dialler. 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>
