Create a Webchat Channel
    • 25 Nov 2024
    • 2 Minutes to read
    • Dark
      Light
    • PDF

    Create a Webchat Channel

    • Dark
      Light
    • PDF

    Article summary

    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 feature

    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.


    Was this article helpful?