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.
When setting up Web Chat, we strongly recommend implementing User Identity Verification to protect the data of your users using the Web Chat widget. To learn how, see What is User Identity Verification, and how do I set it up?
The following browsers are currently supported for Web Chat:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Apple Safari (tested on v9 and 10)
- Microsoft Internet Explorer v11 and higher
- Safari on iOS
- Chrome on iOS
- Chrome on Android
- Firefox on Android
For more detailed steps and best practices, please see our Knowledge Base.
1. Add the Web Chat platform in the 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.
2. For Developers: Implement Web Chat
1. Navigate to Settings > SDKs (for Developers)
2. Scroll down to where the ‘Web Chat’ platform is listed
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.
3. For Support Admins: Configure the User Experience
You can configure your Web Chat widget’s greeting and primary color from within the Helpshift Dashboard. The primary color appears in the following elements:
- The launcher icon
- Color in the title bar
- Accent color for buttons and other interactions, like FAQ suggestions
Please note: for additional UI customization, such as the ability to configure the color of chat text, the typing indicator, error messages and more, please refer your developer to our developer documentation on Web Chat design.
Navigate to Settings > App Settings > select the app you’d like to configure, then scroll down to the ‘Web Chat’ area.
Click the ‘Configure Web Chat’ button. A pop-up will appear where you can can update all of the settings that impact your Web Chat user experience.
If you have only one language enabled, you’ll see text fields where you can enter a greeting message and widget title. If you have your Dashboard set up to support multiple languages, you’ll see fields to upload a CSV with translations of each of your messages for Web Chat.
You can enable the Audio Notifications toggle to prevent users from abandoning open conversations. When enabled, web chat uses audio notifications to notify end users of the following:
- When a new message is available for them in the chat window (from a Bot, Agent, or system message)
- When a message they have sent back to the chat window has been successfully sent
You can also enable the Show Agent’s Nickname toggle to have your Agent’s nickname visible to the end user during the chat.
Farther down the page, the View Previous Conversations toggle can be enabled to allow your end users to see their past conversations on Web Chat. To learn about how this works, see How do I allow my end users to see past conversations?
At the bottom of the page, you’ll find the User Attachments toggle. Enabling this toggle will allow your end users to attach files within Web Chat conversations.
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.
4. Set Up Your Web Chat Bots
On the Web Chat configuration page, you’ll see three Bots listed: the Answer Bot, the Identity Bot, and the CSAT Bot.
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 Identity Bot enabled, as detailed below.
Please note: The Answer Bot can be unlocked with an account upgrade. Please reach out to firstname.lastname@example.org to learn more.
The Identity 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 both the Identity Bot and the Answer Bot enabled, the new Issue will only 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 in-line within the Web Chat window, as seen below:
Once they have completed feedback, it will appear in the Issue per your CSAT Permission settings.
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 can select whether or not you’d like to allow your end users to leave a message, or hide your Web Chat widget entirely when your team is not available to respond.
If you select ‘allow users to leave a message’, you’ll see additional options as listed below:
Provide a Contact Form Message to encourage users to reach out in the event that your team is unavailable.
Add Contact Form Fields they can complete to enable your team to follow up and continue communication.
Enable attachments so they can attach a file as needed.
Automatically tag these incoming Issues so they will be automatically routed to the appropriate Queues or filtered into Smart Views.
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.
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.