Visual IVR

Version 0.4 of the TalkdeskSDK introduces a new, more flexible way to render dynamic screens using native UI elements. Screens are now configured by composing visual elements (text, buttons, inputs) as desired. This section outlines their types and gives some examples of how they can be used.

Types of elements

The VisualViewController is a subclass of UITableViewController and renders its elements as cells. Below is a description of how these are rendered by default.

Plain types

Plain types do not maintain any data after they are rendered. These can be of 3 types:

Text

This will render a cell with a UILabel. This label will be styled according to the subtype property, getting the system’s preferred font for the corresponding type (title, subhead, body, etc.).

This will render a cell that is similar to a Text item with a .body subtype, only it will typically have a different color and an associated URL and tap action.

Submit

This will render a cell with a UIButton. There are 3 different styles available so that different types of screens can be composed: Default, Plain, and Menu.

Button styles

Input types

Input types have associated data that is managed by a storage in the View Controller. Any values that are filled are sent to Talkdesk as a default behaviour of the Submit action, so they behave like forms.

The Submit action is blocked if a given field is marked as required and has not been filled. Currently, this is the only type of validation supported by input fields.

Text Input

This will render a cell with a text input field.

Phone Number Input

This will render a cell with a Country selector and a text input field.

Usage examples

In this section we describe how common interactions can be designed using the elements listed above.

Callback Form

Here is an example of how we would configure a simple Callback form:

  • Text element (subtype: title, text: Your contact info)
  • Text input element (label: Name, placeholder: Your name)
  • Phone number input element (label: Phone Number, placeholder: 555 867 5309)
  • Submit button (subtype: default action, title: Request Callback)

The image below shows how this list of items is rendered.

Callback form

Self-servicing an issue through a Knowledge-Base

It’s also possible to create a knowledge-base to aid the customer to self-service an issue in a real estate app. In this use case the SDK can display a list of clickable links that can be opened externally from the app in Mobile Safari.

The animation below shows such a case and interaction:

Knowledge base

Here is how we can use these components to create a navigatable visual IVR for a taxi app:

  • Text element (subtype: title, text: Support)
  • Submit button (subtype: menu, title: Report an issue with a trip)

And the second screen:

  • Text element (subtype: title, text: Report an issue)
  • Submit button (subtype: menu, title: I would like a refund)
  • Submit button (subtype: menu, title: I lost an item)
  • Submit button (subtype: menu, title: My driver was unprofessional)
  • Submit button (subtype: menu, title: My vehicle wasn’t what I expected)
  • Submit button (subtype: menu, title: I can’t request a ride)

By configuring this flow on Talkdesk, your app only needs to know that it wants to start a support interaction and it will render a full-fledged self-service support section!

Self-service Support