Web chat

Connect a web chat to the selected conversation. It allows you to route customer messages directly to an agent.

1. Log in to your Voximplant Kit account.
2. Click Setup > Conversations > Channels and select Web chat.
3. On the General tab, enter the channel name.
4. Select an API token from the drop-down list.
5. In the Redirect channel messages field, select a queue or function to route customer messages.

6. In the Close channel conversations group box, define the following settings:

7. In the Conversation processing group box, define how the channel agents should classify customer conversations.

8. Add skills if needed.

1. Go to the Customize tab.
2. Enter the text for the web chat header and upload your company logo.
3. To upload a logo, click the image icon and select the file on your PC.

4. Configure the chat position, colors, and a greeting message.
5. Click Add channel.
6. Click Generate code to add the code directly to your site's HTML.

The generated code contains the client_data object that helps you configure data transfer to the widget settings at initialization and provide more information to your agents.

{
  "client_data": {
    "client_id": "xxx", // Customer ID
    "client_phone: "12345678", // Customer phone number
    "client_avatar: "https://storage", // Customer avatar link
    "client_display_name": "John Smith", // Customer name
    "client_email": "jsith@voximplant.com", // Customer email
    "client_language": "ru" | "en" | "pt" | "es" // UI language
  }
}

This configuration allows you to make communication with your customers easier - the system fills in the form automatically based on the data in the client_data object.

7. Click Copy to clipboard to copy the generated code and paste it where you want your button to display.

When a customer request is processed by a bot, you can add buttons to the chat. This may be required to simplify navigation through the bot's scenario and to give your customers an opportunity to select a specific topic or section. For example, a bot can prompt a customer to use the Yes or No buttons to select an answer to a question, and route the request accordingly. In an online store, buttons can help customers select the desired section, for example, Clothing, Shoes, or Accessories.

You configure buttons in a function. To display buttons in a web chat, add the function and route channel messages thereto.

1. Go to Administration > Functions > Management.
2. Click New function.

In this example, you add the following buttons:

3. Copy the following code and paste it into the function.

4. Click Create.

5. Go to Setup > Conversations > Channels and select the web chat channel you created in the previous workshop.
6. Select Functions in the Redirect channel messages field.
7. From the drop-down list, select the function you added earlier.

8. Click Save changes.

The three buttons will now display in response to a customer. If a customer selects the What day is it today? button - they will receive a response with the current date; if a customer clicks the Agent needed button - the bot will inform them that the chat will be transferred to an agent; if a customer selects End the conversation - the chat closes.

The button options offered to the customer or the selected option then display in the History > Messaging history and Reporting > Live monitoring > Conversations sections.