Integration Widgets

📘

النسخة العربية

لعرض النسخة باللغة العربية اضغط هنا

Service Call

The Service Call widget is used to send or retrieve information from an external system using the chatbot, allowing great flexibility to personalize content for recipients across their customer journey.

A Service Call is similar to an API call in terms of methods and functionality. Supported call types are GET, POST, PATCH, PUT, and DELETE methods for REST and XML APIs. After choosing the call type, provide the URL to the external system. To send dynamic content collected from inside the chatbot, use variables by adding the #variableName# within the URL.

Define the Request Header as needed, as they are optional.
If you select JSON as Content-Type:
Body can be used in two ways: Form or JSON value.
JSON value should be in the following example, starting and ending with { }

{
  "phoneNumber" : "#PhoneNumber#"
}

If you select XML as Content-Type:
Body can be used as XML value.

Responses for your Service Call you can save in variables which can be text or array.

Inside the path, define the location of your variable inside the response.

Depending on where it is stored inside the hierarchy, values should be separated by a dot ".".

The default timeout for Service Call is 60 seconds.

Service Call widget

If you would like to check the status of your API request you can add support for response status, like 200, 404, 400, and 500, which are optional and can be saved in variables. This variable can be used anywhere in the Flow (for example Branch) to route the Flow properly or to troubleshoot integration.
Also, if you would like to check the complete JSON from your API request, you can just save it into a variable with the path result. After that use Send message widget to write what is API response.

API response status

📘

Access to System and Contact Variables

For System Variable: $user.Variable_Name
For Contact Variable: $user.info.Variable_Name

📘

IPs to whitelist

157.175.41.252
15.185.58.186
193.122.66.22

📘

Pay attention on using " " strings

If you use "'string'" values inside Service Call, please ensure you are only using for string value double quotes, as in case we find single quotes added as well, they will be removed.

DialogFlow

Invokes Google Dialogflow’s Natural Language Processing(NLP) engine, and its responses are displayed in the chatbot.

After you connect the DialogFlow you can use Loop, to invoke it every time, or to continue with the bot.

DialogFlow widget

Human Handover

The Human Handover widget gives you great flexibility with native integration with Unifonic Contact Center.
Use this widget in case Chatbot cannot help customers with their requests and transfer the conversation to a Live Agent.

If you would like to offer a truly exceptional experience for your customers, make sure that the Human Handover widget is there, which will allow your Support team to always be there for your customers on their preferred channel.

Human Handover transfers the conversation to available human agents or places it in a queue from which agents can take over.

You can define different messages:

  • When the handover is successfully done
  • When the handover is disabled from the Settings
  • When no Agent is available
Human Handover widget

In case you need to route a conversation to a specific Agent with a specific skill, for example, you have a team that is handling all leads coming from the chatbot and your lead is speaking the Arabic language, you will want an Arabic-speaking Agent to handle this conversation. For this you are able to define:

  • Teams, as mandatory field
  • Skills, as optional field

Before you can choose Team and Skill, you will first have to define them in Contact Center itself, and then you can choose them from the Human Handover widget in the chatbot.

You can find on the following link, details on how to do setup for Teams and Skills.

Teams and Skills in Human Handover

If you would like to define a post-chat interaction with the Chatbot, after your Agents finish with the conversation, you can route the interaction again to the bot and build the desired flow.

The Human Handover widget includes two paths:

A success path: This is the path that the interaction will follow after the agent closes the conversation.
A failure path: This is the path that the interaction will follow under these scenarios:

  • If the Human Handover failed because there were no Agents available
  • If the Human Handover request happened inside the Non-working hours defined in Contact Center
  • If the Human Handover is disabled in the Team Settings in the Contact Center

📘

After the Agent closes a conversation and it is routed back to the Bot, it would remain in the Assigned tab in the Contact Center

JavaScript widget

JavaScript element gives you more flexibility while creating and designing a Flow by creating the possibility to manipulate any variables you have collected inside the Flow.

All this is done by offering a Coding widget powered by JavaScript programming language.

So, let's see how you will use it.

We have the following functions:

  • How to GET variables inside the JavaScript widget
  • How to SET variables to be used in the Chatbot Flow

If you have the following example:

  • You collected birth date into variable birthDate and you want to see how old a person is
  • Inside the JavaScript block you will have something as follows:
var birthDate = "#birthDate#";
var yearDate = birthDate.split("/")[2];
var years = new Date().getFullYear() - yearDate;
setConversationVariables("years", years, "text");
  • To use already collected variables inside the JavaScript widget, you can call it: "#variableName#" or ‘$user.info.contactvar’, just make sure that this is a string value (using single or double quote)
let totalUsers = #totalUsers#; // integer | retrieve conversation variable from the flow - totalUsers
let userName = "$user.info.name"; // string | retrieve contact variable from the flow - userName
let userIDs = #user_list#; // array | retrieve array variable from the flow - userIDs
let userData = #user_data#; // json | retrieve json variable from the flow - userData
let nullVar = #nullVar#; // null | retrieve null variable from the flow - nullVar
let boolVar = #boolVar#; // boolean | retrieve boolean variable from the flow - boolVar
  • Inside the widget, regular JavaScript compilation will be done
  • In case there is a validation error, you will receive Function argument does not contain the required syntax
  • When you are done and you want to SET value for a variable you will use the following function: setConversationVariables("variableName", "valueToSet", "text/Array")
  • First field is to define the name of the variable which will be used inside the Flow (string value)
  • Second field is the variable value you want to assign
  • Third value is specifying the type of variable: "text" for string values and "Array" for array values
  • Time-out value for the widget is 60 seconds and after that, the Chatbot will just continue the Flow

📘

Access to System and Contact Variables in JavaScript

For System Variable: $user.Variable_Name
For Contact Variable: $user.info.Variable_Name

Webhook widget

Webhook allows lightweight, event-driven communication between two application programming interfaces (APIs), acting as a listener.

It is triggered by External API and in case the client would like to implement a use case, like a Payment confirmation or a User Authentication, the Webhook widget can be used to set up a waiting period and route the flow based on the response from API.

How to use it?

  • Method will be POST
  • You can send a message to your end-users to get notified that Chatbot is waiting for a response from an external API
  • Copy the Webhook URL, it is always the same.
  • Change the sessionID. It is unique for each conversation

To be able to route conversation properly save response from API in variable and use the Branch to route the flow based on response.

📘

Note

Waiting time is a maximum of 30 minutes and if you didn’t set anything, it will be a default of 30 minutes

Webhook widget