Helpshift’s Web Chat widget allows you to offer a live chat experience on your website. This additional channel makes it easy for your Agents to communicate with all of your end users, whether they visit your website or your mobile app. It just takes one line of code on your website to get you started using it today!

You can customize your Web Chat experience by:

  • Configuring the color scheme and dialogue to match your organization’s tone and branding
  • Pulling in rich end user data to tag and route new Issues to the right Agents
  • Setting up bots to automatically provide help and gather valuable information from users to help your Agents resolve Issues faster

Implementation of Web Chat requires collaboration between your web development and support teams. For this reason, we have divided the first part of guide into two parts for each team.

Please note: the following browsers are currently supported for Web Chat:

Desktop:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Apple Safari (tested on v9 and 10)
  • Microsoft Internet Explorer v11 and higher

Mobile:

  • Safari on iOS
  • Chrome on iOS
  • Chrome on Android
  • Firefox on Android

1. Add the Web Chat platform in the Helpshift Dashboard
2. For Developers: Implement Web Chat
3. For Support Admins: Configure the User Experience
4. Set Up Your Web Chat Bots
5. Set Up Business Hours
6. Integrate Web Chat Into Your Workflow

For more detailed steps and best practices, please see our Knowledge Base.


1. Add the Web Chat platform in the Helpshift Dashboard

Before you can integrate Web Chat, you need to add the new platform for your app via the app settings page in the Helpshift Dashboard. To complete this step, proceed as follows:

1. Navigate to Settings > App settings > select your app

2. Under the list of supported platforms, click the ‘add platform’ button

3. In the pop-up that appears, check the box to the left of ‘Web Chat’, then click the ‘add platform’ button

The Web Chat platform will now appear under the list of available platforms for this app.

Back to top


2. For Developers: Implement Web Chat

The Web Chat widget can be added to any webpage using a single line of JavaScript.

This JavaScript snippet is available in the Embed Code section of the Getting Started guide for developers. It can also be found in the SDKs (for Developers) section of your app, which can be found via the steps below:

1. Navigate to Settings > SDKs (for Developers)

2. Scroll down to where the ‘Web Chat’ platform is listed

Your domain, platform_ID, and embed code (the JavaScript snippet with your domain and platform ID prepopulated) are listed in this area.

You can test the Web Chat widget by starting a chat as an end user and then replying to yourself as a Helpshift Agent. To do so, reload your webpage with the code snippet added above, then type text into the ‘Send a message’ space to initiate a chat as an end user.

Back to top


3. For Support Admins: Configure the User Experience

You can configure the Web Chat’s greeting and color scheme directly from the Helpshift Dashboard. The color scheme includes the following:

  • The launcher icon
  • Color in the title bar
  • Accent color for buttons and other interactions, like FAQ suggestions

Navigate to Settings > App Settings > select the app you’d like to configure, then scroll down to the ‘Web Chat’ area.

Click the ‘Customize Web Chat’ button. The Web Chat configuration page will appear, where you can can update the title, primary color, and greeting message for your Web Chat widget.

You can also enable the Show Agent’s Nickname toggle to have your Agent’s nickname visible to the end user during the chat.

You can also provide end users with the ability to attach files by enabling the ‘Enable Attachments’ toggle at the bottom of this page.

A preview of what the Web Chat window will look like once these changes take effect is provided on the right side of the screen. Use the ‘Preview’ toggle to review the appearance of the chat window in Web Chat with bots and other settings enabled.

Back to top


4. Set Up Your Web Chat Bots

On the Web Chat configuration page, you’ll see three bots listed: Answer, Get Information, and CSAT.

The Answer Bot will automatically suggest relevant, published FAQs to end users based on their messages. After suggesting the FAQs, the bot will ask the end user if they still need Agent assistance.

The end user can click ‘Yes’ to move into a live chat experience with an Agent. Only after they have clicked ‘Yes’ to this prompt will a new Issue be created in your Helpshift Dashboard. The exception to this is if you also have the Get Information Bot enabled, as detailed below.

Please note: The Answer Bot can be unlocked with an account upgrade. Please reach out to success@helpshift.com to learn more.

The Get Information Bot will prompt your end users to provide their name and/or email after they have replied ‘Yes’ to the ‘Do you need additional help from an agent’ prompt. This will appear as part of the normal flow of the chat.

Please note: in the screenshot above, a New Issue Automation has been used to send the ‘An agent will be with you shortly’ message. We recommend setting this up to manage expectations for end users about when an Agent will be with them. To learn how, see What Are New Issue Automations, And How Do I Set Them Up?

If you have Get Information Bot and the Answer Bot enabled, the new Issue will be created in the Helpshift Dashboard after the end user has provided their name and or/email address.

The CSAT Bot provides a custom request message to prompt your end users to submit feedback about their experience with the Agent once the Issue has been resolved.

The end user can complete the survey within the Web Chat window, as seen below:

Once they have completed feedback, it will appear in the Issue per your CSAT Permission settings.

Back to top


5. Set Up Business Hours

You can set up business hours for Web Chat to set expectations with end users by letting them know when your team will be available to help them.

 

On the Web Chat configuration page, you’ll see a section for Business Hours. Use the drop-downs in the ‘Hours’ sections to configure the dates and times when the business hours message should display.

In the Non-Business hours behavior section, you have the option to select ‘Allow users to leave a message’ or ‘Don’t allow users to leave a message’. If you allow users to leave a message, their message will generate a new web Issue.

You can also set the message that displays to users during non-business hours by filling out the ‘Widget Title (Non Business Hours)’ text field.

You can preview how your business hours will look on the right side by selecting the ‘Non-Business Hours’ option in the Preview drop-down.

Back to top


6. Integrate Web Chat Into Your Workflow

New Web Chat Issues will look like this when they arrive in the Dashboard:

You can distinguish Issues created via Web Chat from other Issues by looking for the web chat icon on the Conversation page.

You can also check the ‘Metadata’ tab.

Web Chat is best used as a live chat experience, as this is what your end users will expect when they start a chat. To set up additional tools for providing a live chat experience to end users, please see our Live Chat Experience guide.

Additional resources for optimizing your workflow to support a live chat experience can be found in our Workflow Management guide.

To set up additional features and learn more about Helpshift best practices, please review our Knowledge Base.

Back to top