Webchat

Setting up Webchat

In order to embed our webchat widget you will need to setup the webchat widget configuration and grab the widget code snippet. To do this go to the Portal and open the Channels page and find the Webchat section shown below (highlighted in green)

Choosing your widgets look

Colors

On the Webchat section click the Colors button and you will see the following:

Here you can configure the look and feel of the webchat widget, which will automatically change on your website without the need to change code. Setup the widgets look to match your website and select Save.

Choosing a theme

On the Webchat section click the Theme button and you will see the following:

You can choose whether your chat widget will be animated for new visitors, returning visitors or both. The animation can help your users noticed that they can webchat with you without the need to use a welcome message. A common configuration is to have an animation for new users but not returning users. Choose your theme preferences and click Save.

Choosing authentication mode

On the Webchat section click the Code button and you will see the following:

The code required to embed the Webchat widget in your website is shown on the left in the code box; the only option to make now is whether to use anonymous mode or auth callback mode.

Anonymous mode

As a default anonymous mode is set. In this mode any visitor to the website will be automatically allocated a unique anonymous profile id e.g. anon_9511b13d-eff5-4f7c-952b-a9a78f655b35

This profile id will stay the same on subsequent visits for the same user, and your chat agents can add details about the user as they chat to them and discover details.

📘

This is the easiest option

This is the default and simplest option to use.

Auth callback mode

This mode is to allow you to integrate the Webchat widget to your existing authentication system, so the profiles created in the system use the correct user id for the logged in user.

If you switch on the Auth Callback switch on the widget setup page then the code snippet will change to include an authorisation callback. The authorisation callback code must return a JWT (JSON Web Token) for the logged in user, ensuring it has the claim containing your logged in users id. By default the user id will be taken from the sub claim, but this can be changed in the App Messaging setup page if required.

It is completely up to you how you create / obtain a JWT for your logged in user, and more information on how to create a JWT can be found on this website.

🚧

Stay secure

When implementing the auth callback please ensure that you perform any sensitive security logic on the server side to protect the security of your website.

Embedding the widget

Now that you have setup the Webchat widget and chosen what authentication mode to use all you need to do is copy the Webchat widget code from the setup screen using the Copy button and then paste it into your website in the body tag.

If you chose to use auth callbacks now implement your auth callback code to provide a JWT for the logged in user.

The following video demonstrates how easy it is to embed the webchat widget in your website:

Advanced Options

If you have more complex requirements, such as managing data storage or logging out the widget please see the advanced options and further technical details here.

Assigning a contact team to webchat

Now open up the Contact -> Chat -> Teams from the menu and ensure at least one team has the webchat channel enabled.

❗️

My webchat widget isn't appearing!

If no teams are assigned the webchat channel the widget will not render!

To assign the team to webchat click on the team and select Set up and the following pop-up will be displayed:

You can optionally choose to have a automatic welcome message sent, simply toggle the Use welcome message switch and set your message in the message box on the right, and set your timing options.

The Reply As option defaults to team, which means all conversations will appear to be the team e.g. Customer Services instead of the individual customer services agents. If you want a more personal approach you can switch to individual and all chat responses will be sent from the individual agents handling the inquiry.

👍

All done

You are now ready to start handling your customers inquiries using webchat.