Building a Call Deflection App Building a Call Deflection App

Building a Call Deflection App

Daiana Gallardo Daiana Gallardo

This tutorial covers how to build a call deflection app to reroute incoming calls to a self-service experience through the use of multiple channels, including voice, sms and web. This journey will take an incoming call, and if the end user needs to get the status of their order, an SMS message will be sent to the caller with a web link that shows the status of the order on a web page. 

The following are the steps to build out a call deflection app:

Creating the App Object

App Objects allow you to save information in AirData and keep it available in your app. In this example, we are going to create an “Orders” App Object. 

1. Go to Data Builder, click on the '+' sign next to Datastore and select Add App Object.

1.png

2. Click on the '+' sign next to the recently added object and include the fields that you need. In this case, choose a Text type, for the name, order status and ID; and a Phone type for the phone number. 

2.png

3. Double click on the App Object as well as on the fields to rename them. We recommend using lower case. 

3.png

4. Prepopulate the fields to test the application later in Preview.

4.png

5. Finally, save the app for a migration to be run and create the AirData Table where the information will be saved later on.

Setting up the app’s layout

When creating an app, you will first land on Journey Builder in the Studio. This is where the app’s Journey is created by choosing a starting Event to set the stage for the application.

1. Since this app will be triggered by a phone call, select Calls a number.

5.png

2. Then click on the '+' sign and select Start Voice Bot from the Voice & Chat options.

6.png

3. Click on the '+' sign and add a new Voice Bot.

 

reemplazo1page5.png

4. While on the new Voice Bot, go to the Inspector and in the General tab, add an event from Voice Bot Events.

8.png

5. Following this event, click on the '+' sign and select Start Chat Bot from the Voice and Chat options.

replace2page5.png

6. Click on the new '+' sign and add a new Chat Bot.

replace3page6.png

Now the layout of the application is ready for you to start building its parts.

Building the Voice Bot

In Activity Builder, go to Voice Bots. You will find the one you added from Journey Builder with its corresponding Event.

1. Click on the '+' sign next to Voice Bot and add a Decision Menu.

11.png

2. In the box that displays, enter your message. In the second box, click on Add to include the Decision Options.

12NEW.png

Rename the Decision Options by double clicking the decision options in the tree to match the message: Order Status and Agent.

mceclip2.png

3. For the “Order status” option, click on the '+' sign and select DTMF Matcher.

mceclip3.png

Then enter “1” as the matching number for that option.

15NEW.png

4. Repeat the process for the “Agent” option, entering “2” as its DTMF Matcher.

5. Add an additional Decision Menu by clicking the '+' at the Voice Bot level in the tree and rename it to “Order status SMS”. Then add the message the customer will listen to when pressing 1:

16NEW.png

6. Then, go back to the first Decision Menu and select the “Order status SMS” option from the dropdown in the “Order Status” Decision Option.

17.png

7. Add a Forward Call component at the Voice Bot level and rename it to “Forward to Agent”. Then add the message the customer will listen to when pressing 2:

18NEW.png

8. Then, go back to the first Decision Menu and select the “Forward to Agent” option from the dropdown in the “Agent” Decision Option.

19.png

Now the main layout of the Chat Bot is created, so let’s configure each of the Decision Options:

Order status SMS

1. In the Inspector of the Order status SMS Decision Option, go to the Actions tab. Click on the '+' sign to add an action. In this case, we want it to be triggered before the voice prompt.

20.png

2. Select the Run Event action from the Events options.

21.png

3. Choose the Event that you have previously created in Journey Builder.

27.png

This way, when customers press 1, before listening to the prompt, the Event will run and trigger the Chat Bot.

Forward to Agent

1. In the Inspector of the Forward to Agent Decision Option, go to the General tab. Click on Recipients and in PHONE enter the phone number of the Customer Support Agent or Center that will receive the customers’ calls.

23.png

Building the Chat Bot

In Activity Builder, go to Chat Bots to find the Chat Bot you created from Journey Builder.

1. In the Inspector, go to the General tab and click on the '+' sign next to Chat Bot Events to add a new Event.

24.png

2. By clicking on the '+' sign, it gets added automatically. Rename it to Chat Bot Event:

25.png

3. Click on the '+' sign next to Chat Bot and add a Decision Menu. Type the text and click on the WebLink icon to include the link in the prompt.

26.png

4. Then go to the Actions tab and add the newly created Event before sending the chat prompt.

22.png

Next step is to configure this Chat Bot Event so that it triggers a Data Flow.

1. To do so, in Journey Builder, click on the Chat Bot Event and, from the Actions tab, select Run Data Flow from the Data options.

28.png

2. Then click on Add Data Flow.

29.png

Creating the Data Flow

In Connection Builder, you will find the new Data Flow. Rename it to “IVR Data Flow” and start configuring it.

1. In inputs, enter the phone number of the person that’s calling in. So “actor.phone” will be passed in here.

30.png

2. Click on the '+' sign and add an AirData Request from the  Data Request options.

32.png

3. For App Object, select “Orders”, leave QUERY as Payload Type and in Filter copy the following expression which means that the phone variable is equal to the phone number.

{ "phone": { "eq": phone_number } }

33.png

4. Then go to Run results and click on Run to receive the information corresponding to the order:

34.png

5. Following the AirData Request, add a Transform operation by clicking on the  '+' sign and selecting Transform from the Data Processing options.

35.png

6. In Transform Expression, add the following expression:

airData.result[0]

This allows for the first object in AirData, hence [0], to be parsed.

36.png

7. Finally, pass Transform as the Return Value to the End output.

37.png

Creating a Global Variable to store Order information

In Journey Builder, create a Global Variable to store the Transform output in the journey.

1. In the General tab, click on the '+'  sign next to Global Variables and select the “Orders” Object.

38.png

2. Rename the Variable to “orders”.

39.png

3. Click on the Chat Bot Event and go to the Actions tab to display the IVR Data Flow and enter “actor.phone” in Input and “session.orders” in Output Binding.

40.png

4. Then add the Navigate to Web Flow action to this Chat Bot Event by clicking on the '+' sign and selecting Add Web Flow.

41.png

Building the Web Flow

To build the Web Flow you have just added, go to Activity Builder.

1. Click on the '+' sign next to Web Flow and add a Web Page.

42.png

2. Add three labels and rename them from the Text field in Control Properties. Copy and paste each of these values in the box that shows up when clicking on the arrow at the right of the Text field: 

Order ID: {{session.orders.__id}}

Name: {{session.orders.name}}

Order Status: {{session.orders.order_status}}

43b.png

This way, each field gets bound to a Variable.

3. Save the app.

Previewing the app

Once the app is all set, it can be tested in the App Preview.

1. Click on Preview at the right-hand corner of the Studio, which will open a new tab.

43.png

2. Click on the phone icon and then on the dial icon.

44.png

3. You will receive the first voice message prompting you to press“1” or “2”. 

45.png

4. Press “1” to receive the second message and click on the chat icon to see the SMS text:

46.png

5. Finally, click on the link to see the results: Order ID, Name and Order status:

47.png

Further Reading

To learn more about Voice and Chat, read Information Captured from Incoming Calls and SMS

To learn more about Data Operations, go to Data Operation Overview

To go deeper into app building, read KitCloud

 

Was this article helpful?

0 out of 0 found this helpful

Articles in this section