Create a Webchat Channel

  • Last updated on Dec 19, 2024
  • Published on May 28, 2024
  • 2 minute(s) read

Use a Webchat channel to provide quick and convenient customer support through your website.

Agents will receive live messages in their Digital Contact Center and can respond without leaving the Dialpad app. Emojis, images, and file sharing are all available to help you improve customer engagement and increase conversion rates.

Let’s dive into the details.

Who can use this

Webchat channel creation and deployment is available to Dialpad Connect, Dialpad Support and Dialpad Sell users with a digital plan.

Create a Webchat channel

Create a Webchat channel to start receiving interactions from your website(s).

To create a Webchat channel, head to your Dialpad Admin Settings.

  1. Select Channels and Workflows

  2. Select Digital Channels

  3. Select Add Digital Channel

  4. Name your channel

  5. Select Webchat from the Ai Agent drop-down

  6. Select the Digital Contact Center where the channel will be deployed

  7. Select Add Channel

Customize a Webchat channel

Once your Webchat channel has been created, it's time to customize it. Dialpad lets you upload your own logos, change the colors and fonts, and more!

To customize the appearance of your channel, head to your Dialpad Admin Settings.

  1. Navigate to Channels & Workflows

  2. Select Digital Channels

  3. Select the desired channel

  4. Select Appearance

  5. Update your colors, font, and logo

  6. Select Save changes

Deploy a Webchat channel

Now that you’ve customized the appearance of your Webchat experience, it’s time to deploy it.

To deploy a Webchat channel, head to your Dialpad Admin Settings.

  1. Navigate to Channels & Workflows

  2. Select Digital Channels

  3. Select the desired channel

  4. Select Deploy

From the Deploy Section, you can copy the short link to test your connection (recommended), or select Copy code to copy and paste the code snippet into your website.

Deployment details

The integration script must be included within the the the HTML page, and the clickable element must have the ID dx_chatbot_fab_id

<script async type="module" src="https://dxbeta.dx.dialpad.com/dxclient/dist/dialpad-chatbot.es.js"> </script> 
<script> window.dxe = {server: https://dxbeta.dx.dialpad.com }; </script>

The following script must be added to the button element to launch the client.

<img id="dx_chatbot_fab_id" 
data-dxchannelid="cfd15683ab42443983a7c4f2ac60c808" 
data-dxprovemail="[email protected]"/>

The button can be any HTML element as long as the id is set to dx_chatbot_fab_id

The dx_chatbot_fab_id supports the following attributes:

Attribute

Required

Description

data-dxchannelid

Required

dxchannelid defines which experience to launch.  The channelid is available on the Deploy page.

data-dxprovemail

Required

This attribute is used to uniquely identify the company account.  This can also be a providerid.  

data-dxwfvars

Optional

The value of the attribute will be comma-separated key, value pairs that need to be available in the workflows.  This is useful for passing context information to the digital experience workflows from the portal.

Tip

For a standalone chat experience, have your customers access your chat via the shortlink or QR code.

Here are a few examples of how to deploy your chatbot on popular website hosting platforms.

Wordpress

In Wordpress, the Head, Footer and Post Injections plugin is used to inject script in the header and place the floating action button (FAB).

  1. Navigate to Settings

  2. Select Header and Footer

  3. Copy the scripts from the Deploy section

The <Head> page section of each page must include the chat script for persistent or sticky sessions.

Add the FAB and the initialization before the </body>

Squarespace

The Squarespace website builder supports code injection from the Website Tools.

  1. Select Utilities

  2. Select Website Tools

  3. Select Code injection

  4. Copy the script found in the Deploy section

More information

Questions on how to manage your Digital Contact Center? Be sure to read this Help Center article for more information.

Frequently asked questions

What types of images can I share?

Users can upload the following file types:

  • gif

  • png

  • jpg

  • aac

  • mp4

  • amr

  • mp3

  • ogg

  • 3gp

  • pdf

  • doc

  • xls

  • ppt

  • docx

  • xlsx

  • pptx

Can I share multiple attachments at once?

No, only one file can be uploaded at a time.

Are web chats secure?

Yes! We encrypt all API calls and web socket data.

Where can I find analytics for my Webchat channel?

To monitor your Webchat channel metrics, check out the All digital view in your Dialpad Analytics.

Are eParams supported?

No eParams is not supported.

Related articles