Adding Website Channel - Live chat

Posted on Aug 17, 2024

This guide will help you fully set up your website live chat using the ShopJets Customer Support App. It covers how to create a website inbox and utilize additional settings for a tailored experience.

Compatibility and Requirements

The web dashboard and live chat widget are compatible with most modern web browsers. Supported versions include:

  • Mozilla Firefox: v52 onwards
  • Google Chrome: v57 onwards
  • Chromium: v57 onwards
  • Apple Safari: v14.1 onwards
  • Microsoft Edge: v16 onwards

How to Create a Website Channel

Step 1 : Go to the Inboxes page by navigating to Settings → Inboxes and clicking the Add Inbox button.

macro-execute

Step 2 : Select the "Website" icon.

macro-execute

Step 3 : Enter your website details, including the website name, domain, widget color, welcome heading, welcome tagline, and greeting message. The fields are described below.

After reaching the inbox screen, click theAdd Inbox button located at the top right corner of the page. You can then select the channels you wish to connect. The supported channels will be displayed on this screen.

For detailed steps on how to configure each channel, refer to the specific instructions provided for the Email channel and Website channel.

macro-execute
  • Website Name: Enter your website's name (e.g., Example Inc.).
  • Website Domain: Enter your website's URL (e.g., www.example.com).
  • Widget Color: Select a color for your live chat widget.
  • Welcome Heading: Provide a greeting message for your customers (e.g., Hello there 👋).
  • Welcome Tagline: Add a tagline to guide your customers (e.g., We are here to help you with your questions).
  • Channel Greeting Message: Enter a greeting to start the conversation (e.g., Hi. How can we help you?).

Once the information is complete, click the Create Inbox button.

Step 4 : Add agents to your website inbox. Conversations will only be routed to agents associated with the inbox. Even if you are an Administrator, you need to add yourself as an agent to view the inbox. Select agents from the drop-down menu and click Add Agents.

macro-execute

Step 5 : After successfully creating a website inbox, add the widget to your website by copying and pasting the provided code snippet. Click the Copy button and paste the code into your website's root file. You can access additional inbox settings by clicking the More Settings button or go directly to the newly created inbox by selecting Take Me There.

macro-execute

Complete the website channel setup

Settings Tab

Your website inbox is now functional. On your Inboxes screen, click the gear icon to reach the Settings page. You will see the following screen. Scroll down to see more settings, where you can set up the various notifications you would like to receive when your website inbox starts functioning.In this image, all settings are shown in the same image. Here are a couple of examples for your understanding:

macro-execute

Enable email collection box : Enabled by default, this feature prompts customers to enter their email address when starting a conversation.

Enable CSAT : Activating this option will launch a Customer Satisfaction survey each time a ticket is resolved. CSAT results can be viewed in the Reports section.

Click Update to save any changes.

Collaborators Tab

In the Collaborators tab, you can add or remove agents from the inbox and enable or disable automatic assignment of new conversations to agents. After making changes, click Update.

macro-execute

Business Hours Tab

In the Business Hours tab, you can set your team's working hours. Check the box for "Enable Business Availability for this Inbox" to set specific business hours. Once enabled, you can define available hours for each day of the week and specify your time zone. You can also customize the message shown to customers outside of business hours. Click Update Business Hour Setting to save your configuration.

macro-execute

Pre-Chat Form Tab

In the Pre-Chat Form tab, you can collect customer information before a chat begins. Configure fields such as name, email, and phone number, and provide a pre-chat message. Enable or disable the pre-chat form as needed, then click Update to apply changes.

macro-execute

Widget Builder Tab

In the Widget Builder tab, you can customize your web widget's appearance with various settings and view changes live.

macro-execute

Configuration Tab

The Configuration tab provides the code snippet for your website. Click Copy to copy the code and paste it into your website’s root file.

macro-execute