Conversational UI and Integrating Artificial Intelligence into Websites

By Stephen Garside on 2/27/2017

I have recently written a B2C and B2B Google Home voice app for my 360Jungle virtual tours website using the excellent www.api.ai artificial intelligence framework. I have since re-used the artificial intelligence (AI) package and surfaced it as a live chat and Facebook bot to handle B2B and B2C enquiries.

After reading several articles about conversational ui and watching videos of how Google are integrating their assistant into the Pixel phone, I set about  brainstorming how to make my 360Jungle website more interactive through the use of AI.  From my research, conversational ui's are in their infancy, with many being just that - conversational as opposed to the Google Pixel / Assistant approach of mixing conversation with rich media (see video at about 3 mins onward).

Many traditional eCommerce websites have large cumbersome menu systems, often supported by search boxes with little if any intelligence behind them. They also tend to have separate, Live Chat functions that are in no way linked to the site's content and assets, making many customer interactions a disjointed and time consuming experience.

After using my recently purchased Google Home device and realising the potential for this technology in the home, I set about thinking how I could build this level of interaction into my website, but with the addition of rich media. I wanted the ability to talk to a website and view content interactively rather than using a mouse and navigating around in the traditional way.  

When you visit a physical store to make a purchase, you often speak with a sales person to ask questions, understand usp's and address concerns before making a purchase - I bet if you ask the Sales Assistant they will say that no two customer enquiries are ever the same - we should be able to handle this situation on a website.

I started to think about the goals and objectives of my website, and the use cases of my site visitors. Interactive conversations with my website should help visitors find the information they are looking for quickly, and then allow them to ask further questions should extra clarification be needed.

From a business perspective I wanted the opportunity to discuss and encourage visitors into my conversion funnels through visual call to actions (CTA's) but also through conversational CTA's too.

At this point I think it is worthwhile pointing out that the larger your website footprint is, the more your visitors will benefit from integrating artificial intelligence into your website utilising a conversational ui.  My 360Jungle website only has a small footprint, so what I can achieve is limited, but hopefully when you try it you will get the idea and see the potential.

The 360Jungle website is written using Microsoft MVC, which actually helps when building a website that can provide rich media at a granular level. The more you break your MVC views down into Partial Views, the easier it becomes to set up an endpoint to serve just that bit of content.  

API.AI allow you to set up a webhook to respond to your visitors questions.  Each response from the webhook can include custom JSON, which I have utilised to pass back a rich media url to support the answer being provided by the webhook. If the response includes a rich media url then this is retrieved via a second ajax call and injected into my 'Interact' webpage. Some types of content are better served in a scroll-able pop-up rather than being injected into a page stream, so each piece of rich content has a 'destination' that is either the 'stream' or a 'popup'. Some interactions require the visitor to be re-directed to another page in the website (e.g Sign Up), so this is also handled within the conversational responses.

As I wanted to aim for a conversational, interactive approach on my website, I also incorporated a Speech Recognition and Text to Speech facility if the browser supports it. This really brings the experience to life and shows how interactions with websites can be much different to what they are currently.

All interactions with my conversational ui take place in a Stream with my virtual assistant / AI bot called Roxanne:-

You can either type in your question, or where available , click the microphone icon and speak your question. Example questions you can ask might be:-

  • What camera do you recommend for 360 photos?
  • Tell me about your enterprise package.
  • Whats the latest news?
  • How can I use virtual tours to promote my estate agent business?
  • I want to sign up
  • Show me a demo
  • What can i use vr tours for?

 

Responses are added to the stream, these can be verbal (notice the Call To Action that redirects the user to the sign up page):-

 

Responses can also be in the form of rich media:-

Visitors can then click on a news link and view the article in a pop-up. After viewing extra content in a pop-up, users have the ability to navigate to that particular piece of rich media in the website by clicking on the 'breakout' icon:-

 

Anyway, thats enough conversation! Why not give it a go for real by trying out my integrated artificial intelligence conversational ui on 360Jungle and let me know what you think I would recommend you use the Chrome browser for the best experience.