Create a Webchat Channel

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 Engagement license.

Before you begin

Any digital channel you create in the Dialpad Admin Portal will automatically perform the routing to the defined Digital Contact Center once the channel is configured. You can modify how routing occurs and how the conversation is handled before and after routing using the Options and Advanced tabs for Webchat channels.

Here are some basic setup examples you can do with your channels:

• You can navigate to the Options tab to configure which messages are sent before routing happens or to request contact information before transferring to an agent.

• You can configure custom routing logic using the "Before agent connection" event in the Advanced tab.

• Webchat handles the default logic automatically for business hours and agent availability before routing to agents. You can override this logic by using the “Out of business hours” event in the Advanced tab (using an available digital workflow template), if needed. View more about default logic here.

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 > Digital Channels

2. Select Add Digital Channel

   

3. Select Webchat as the channel type

4. Name your channel

5. Select the Launch Experience

   Note

   When you create an AI Agent, a Web Chat channel is automatically generated with that agent set as its fixed Launch Experience, though you can also assign the AI Agent to additional channels. Use the Options and Advanced tabs to configure human transfer settings for AI Agent channels, or basic automation for non-AI channels.

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 > Digital Channels

2. Select the desired channel

3. Select Appearance

   

4. Update these details, as desired:

   • colors

   • font

   • logo

   • avatar

5. 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 > Digital Channels

2. Select the desired channel

3. 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="5130893811646464@5130893811646464.sandbox.dialpad.com"/>

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:

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 and systems.

<div
  id="dx_chatbot_fab_wrapper_id" 
  style="background-color:#7C52FF;border-radius:50%;box-sizing:border-box;display:flex;height:56px;overflow:hidden;padding:12px;width:56px;position:absolute;bottom:16px;right:16px;z-index:123;">
  <img 
    data-dxchannelid=<%= channel_id %>
    data-dxprovemail=<%= provider_id %>
    id="dx_chatbot_fab_id"
    src="<%= server %>/kpd-static/providers/0/webchat/default/images/fab-icon.png"
    style="clip-path:circle(50%);object-fit:contain;height:auto;width:100%;"
  />
</div>

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

<%= render partial: "shared/dialbot", locals: { channel_id: '45194947cdd740129c48fb3c10706a3d', provider_id: '5646620347596800@dialpad.com', server: 'https://lighthouse.dx.dialpad.com' } %>

More information

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

Configure automation for your Webchat channel

Use the Options and Advanced tabs to customize automation for key conversation moments set to the defined Launch Experience.

For channels using an AI Agent as the Launch experience, use the Options and Advanced tabs to customize what happens when the conversation is transferred to a human agent.

Customize Options for your Webchat channel

To customize Options for your webchat channel, go to your Dialpad Admin Settings.

1. Select Channels & Workflows > Digital Channels

2. Select the desired Webchat channel

3. Select the Options tab

   

4. Update these details, as needed:

   • Greeting message: shown when a customer first contacts the channel or when an AI agent escalates to a human agent.

   • Request contact information: prompts for the customer’s name, email, phone number, or address.

   • Waiting message: shown while the customer waits for an agent.

   • Business email for after-hours contacts: used to notify your team when agents are unavailable.

   • Survey: shown after the interaction.

5. Select Save changes

Link a Workflow to a Webchat channel

Use the Advanced tab to link published Digital or Shared Workflows to Webchat events.

Webchat events are instances within a webchat session that can trigger a workflow. Webchat events include:

• When conversation starts: Trigger a workflow when a conversation begins, or an AI Agent escalates.

• Out of business hours: Override the default logic for checking business hours and the agent's availability.

  Note

  This event should be used only when there is a need to override the default logic for checking business hours or agent availability. See the Default logic for more details.

• Before agent connection: Run a workflow before the conversation is queued for a human agent.

• Queue timeout or no agent available: Set fallback actions when a customer has been waiting in the queue, and no human agent responds before the timeout.

• Before customer survey: Customize the experience before the customer survey is shown.

• After customer survey: Define follow-up actions once the survey is completed.

• After the agent session has closed: Set what happens after the session with the human agent ends.

Note

Workflows are created in Channels & Workflows > Workflows.

To link a Webchat channel to a workflow, go to your Dialpad Admin Settings.

1. Select Channels & Workflows > Digital Channels

2. Select the desired Webchat channel

3. Select the Advanced tab

   

4. Select the Event that triggers the workflow

5. Select the Workflow that is triggered by the Webchat event

6. (Optional) Add additional events, if needed

7. Select Save changes

How Options and Advanced settings interact

Default Availability Logic

When no custom workflow is attached to the "Out of business hours" event in the Advanced tab, webchat channels use the following built-in availability logic to handle customer contacts.

It checks business hours and agent availability, and uses the systememail variable (configured in the Options tab under "Business email for after-hours contacts") to determine whether to send an email notification.

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.