Webchat

Who should read this article: Administrators

Embed a webchat widget in your organization's website to enable your contact center to receive and reply to messages from your website visitors.

Introduction

Voiso enables you to add a webchat widget to your organization's website so that your website visitors can initiate chat sessions with your agents.

Connect the webchat channel, generate embeddable JavaScript, add the code to your organization's website, and add agents to the webchat channel.

For information about agents and supervisors using the Webchat channel, refer to Webchat interactions.

Connecting Webchat to your contact center

This section describes how you can connect, configure, and manage the Webchat widget in your website. Use the JavaScript code you generate in the Add channel page to embed the Voiso Webchat widget in your website.

Webchat configuration

To set up the Webchat channel widget and get JavaScript code that you embed in your website, follow these steps:

1. In the Channel name field, enter a name for your channel.
2. Select the Webchat channel type to display the Configuration section.
3. In the Heading field, enter the name that appears at the top of the widget.
4. From the Color menu, select the color of the agent messages displayed to your website visitors. You can preview the widget in the Preview area.
5. When you are satisfied with the appearance of the widget, click Generate code to display JavaScript code that you can copy and add to your website.
6. To generate a link to preview your widget, follow these steps:
   
   1. Click Regenerate code (1).
   2. In the Preview your widget link field (2), click the Copy button.
   3. Paste the URL into a new browser tab or window. Refer to Webchat widget preview.
   4. In the Code to include field (3), click the Copy button to copy the JavaScript code you embed in your website to activate the widget.
7. If you make changes to the configuration, click Regenerate code to update the preview and code.
8. Click Save to add the new channel to your contact center.

Identifying contacts

If your website allows contacts to log in before starting a webchat, Voiso offers a username parameter in the widget script. This parameter lets you programmatically insert the contact's name or ID into the script. When a logged-in contact clicks the Chat icon, the page loads and the script launches, allowing your website code to populate it programmatically with the contact’s name or ID. If no data is added to the username parameter, Voiso will display the contact as Guest.

When the username parameter is populated, messages sent to your agent in Omnichannel Workspace include the contact’s name or ID.

Webchat widget preview

When you configure the Webchat channel, you can preview how the widget will look on a website using the preview URL in the Preview your widget field of the Configuration section.

Paste the URL into a new browser tab or window to display the preview page.

Try out the widget by clicking the Chat icon on the lower right corner of the browser window.

Enabling agents to handle webchat

Once you embed the JavaScript webchat widget code in your organization's website, ensure that the Omnichannel Workspace is enabled for your agents. Refer to Enabling Omnichannel.

The Webchat widget on mobile phones

The widget appearance you specified when you added it automatically adjusts to fit the entire screen of the mobile phone being used. Fonts and attachment previews are also optimized for mobile displays, so they may appear slightly different from how they look on a desktop browser.

Emojis are managed directly through the mobile device's keyboard, so your contacts will only see the Attach and Send buttons. The Send button becomes highlighted when your contact starts typing in the message field.