Dialogic Blog

Implementing the Visual Customer Experience With a VIVR

by Thomas Schroer

Jul 13, 2017 8:07:00 AM


“Before beginning, plan carefully,” quoted Cicero, a Roman lawyer and toga aficionado from a couple thousand years ago. While he may not have been thinking about Visual IVR development when he coined that phrase, he was still spot on.

When implementing a Visual IVR, it’s all about planning. For the first step, it’s helpful to build a flowchart to map out the customer’s journey both visually and audibly as they go through the VIVR options. You’ll want to consider what information to display to the consumer and then the associated text for that page.

I asked Peter Chan, a software engineer for Dialogic’s PowerVille Applications, about the importance of the planning step. He indicated that customers should think about the experience they want to provide to callers like associating a number with a subscriber to personalize the experience; or inspecting the country code of the calling number to select the appropriate language to use. You can also provide a personalized message or info on recent transactions to the caller after they have authenticated themselves. The key, he said, was to map out these possibilities into the overall visual and audio flow with the user experience in mind.

You’ll also want to record any specific prompts you want read or use text-to-speech converters to provide a readout to the user. The more advanced IVRs will also come with prerecorded prompts for the normal utterances like numbers, dates, currency amounts and so forth in different languages that can be used to provide audio cues in a VIVR session.


Once you have the audio and visual page flows mapped out, you can then start building the HTML5-based web pages that will be synced up with the IVR call flows.

To make the user experience more app-like, you can try using a development framework like Ionic. Ionic is an HTML5 mobile app development framework that can be used for building mobile apps. It provides a front-end UI framework that handles all the look and feel interactions like buttons, slider bars, map frames, video frames, checkboxes, toggle switches etc. to provide slick animation and cool design.

There’s also an Ionic Creator that incorporates simple drag-and-drop actions for building an application complete with the various widgets needed. It can be used to help reduce the time and skills needed to take your VIVR concept from an idea to a working app with just the drag of a mouse.

Louis Subrina, Web Development expert for Dialogic who put together the HTML5 pages for our VIVR demos, stressed how vital it is to have a proper wireframe established and know the components that you want to integrate as you build out the application. He also pointed out that there are Ionic compatible troubleshooting tools like Sentry.io to help look for errors during development as well as monitor the application in production environments.

As you create the app, you then establish the hooks to the IVR to synchronize the call flows, audio, and video with what gets presented to the customer.

vivr-blog2-screenshot-new.png (click image to enlarge)

After that, all there is to do is start engaging customers!

A VIVR provides an app like front end which allows subscribers to access personal information securely from a data repository directly or through the associated IVR’s SQL integration capabilities. A VIVR also allows the user to establish a connection with a live agent if necessary to provide additional support to the customer. 

In addition, it opens the door to integration with 3rd party and cloud based platforms to basically mash up end-to-end capabilities. In a demo we’ve put together, we’ve integrated the MarketCloud ecommerce platform into a VIVR application that allows customers to view, select, and purchase island adventure tours. The MarketCloud integration provides enterprises a way to establish a complete backoffice in the cloud to manage inventory, customers, fulfilment, and orders and provide analytics with an easy-to-use administration dashboard.


What’s also compelling is that service providers can either utilize these third party apps or they can tie a customized VIVR offering into their own ecommerce platform to provide additional enterprise stickiness as well as a channel for that service. So you can see how you can really provide a comprehensive solution for enterprises, entrepreneurs and microbusinesses using this visual approach to customer engagement.

If you want to view our VIVR demos, contact me at Thomas.Schroer@Dialogic.com and we’ll set you up. You can tweet us your comments at @Dialogic.

Liked this post? Get more content like this right to your inbox. Subscribe to  the blog.

Topics: Communications Application Development