Web Chat

From Evo Voice
Jump to: navigation, search

Introduction

Evo Voice supports embedding chat into web sites similar to other online chat services.

Create Web Chat Endpoint

To get started, click on the Endpoints section on the left and click New Endpoint > Web Chat

You can associate the new Web Chat Endpoint with a Customer and give it a Name. The Name is for display purposes only, but will be visible to operators, etc. so make sure you pick something descriptive e.g. "ABC Company Chat"

ClipCapIt-190910-151259.PNG

After saving, you should be taken to the Endpoint Details screen e.g.

ClipCapIt-190910-151340.PNG

The most important field that is displayed is the Direct Chat URL which can be used to start a new chat session.

By default, the chat is completely unstyled, but this can be configured very easily

Web Chat Styling

Currently, Evo Voice supports Bootstrap based themes for Web Chat. We support all of the swatches available here:

https://bootswatch.com

You can change which Bootstrap theme you want to use on the Theme tab, you can also change the Logo and the welcome message. For example:

ClipCapIt-190911-153624.PNG

Testing Web Chat

First let's create a very simple flow, e.g.

ClipCapIt-190910-151640.PNG

And make sure that you assign this Flow to the Web Chat endpoint that you created.

Now, copy the Direct Chat URL value and paste it into your browser's address bar such as:

ClipCapIt-190911-154033.PNG

Go ahead and type something into the input field and then press Send, e.g.

ClipCapIt-190911-154103.PNG

And you will see that the system responds:

ClipCapIt-190911-154117.PNG

Integrating Web Chat into Page

There are two ways that you can integrate web chat into your own site. Both ways need your Direct Chat URL which you can get on the General Tab of the Endpoint screen

ClipCapIt-190911-154442.PNG

Direct Link to URL

The easiest way to embed web chat into your own page is to add a button/hyperlink to the Direct Chat URL with a target="_blank", for example:

<a href="https://dev.evovoice.io/webchat/page/XXXXXXXX" target="_blank">Web Chat</a>

This will open up the chat interface in a new tab/browser window when the user clicks it. You can style the button/hyperlink however you like as long as you use the Direct Chat URL that is on the General Tab of your Web Chat Endpoint

Embed Directly in Site

The second way to integrate Web Chat into your site is by using an iframe. This way is a little bit more complicated, but allows for a more seamless experience.

Complete styling of an iframe is beyond the scope of this article, but in general, you will want to have an iframe created on the page and hidden (perhaps positioned at the bottom right). When the user clicks a Chat button you will set the src of the iframe to the Direct Chat URL and then show the iframe.

The following example uses jQuery and assumes you already have an iframe on your site that is hidden with class "evo-voice-iframe" and a button to trigger web chat with class "evo-voice-chat-button":

<script>
   $(".evo-voice-chat-button").click(function() {
       $(".evo-voice-iframe").attr("src" "https://dev.evovoice.io/webchat/page/XXXXXXXX");
       $(".evo-voice-iframe").show();
   });
</script>

The above script adds a click listener to the chat button that sets the src property of the chat iframe and then shows it.

Conclusion

Like Skype, SMS, Email, Facebook, and Slack, Evo Voice supports all of the standard Chat Channel functionality with Web Chat.

Web Chat can be styled exactly to your specification or you can use one of our predefined styles.