Take your customer care to the next level with eDesk’s Live Chat! It’s quick to set up and customers love the real-time support you can provide.

This help file will guide you through setting up Live Chat for your team and customers.

Before you start

 
  • Learn all about how eDesk’s Live Chat works here.
  
  • You’ll need to have access to Settings → Smart Tools → Widgets. If you don’t have access, request it from an Admin user within your business.
   
  • You’ll need to have already added the website or web store that will host the live chat as a channel to eDesk. For more information on channels, click here.

01 Setting up eDesk Live Chat


It’s a simple 3 step process to set up eDesk Live Chat. 

 
  1. Permission your Support Agents for Live Chat.
  2. Create a new chat Widget. The chat Widget provides the buttons, chat box, and contact form that will be on your website or web store. If you have the Chatbot feature and have already created a Chatbot, you can also add this to your Chat Widget. You can customize it all to match the branding on your website. 
  3. Add the chat Widget to your website or web store.

Read on for a step-by-step guide.
 

02 Permission your Support Agents for Live Chat

To enable Live Chat for your Support Agents, you need to enable the Chat permission for their role. Read all about Roles and permissions here. 

You’ll also need to decide on your timetable for providing support via Live Chat. Do you want to offer live chat during business hours only? At weekends?

You can set up eDesk’s chat widget to display a live chat box during support hours or when you have at least one Agent with an online status, and a contact form outside support hours or when no Agents are online. See section 03 of this help file for instructions.
 

Note: If you're using a Chatbot with your Live Chat, the Chatbot will always display first, regardless of whether your agents are online. Additionally, if you have a Chatbot, you don’t need to set up a contact form for after-hours inquiries

Agents can set their own status (online, away or offline) and, if permissioned, set other Agents status also. For further information, navigate to section 06 "Changing your Live Chat status yourself" of this article.

03 Create and customize a new Chat Widget

  

Step 1: Let's start by creating a Widget.

  1.  Go to Settings → Smart Tools  →Widgets

  2. Select Add Widget. 

     

  3. The 'Create a Chat Widget' pop-up will appear.

Enter the name and choose the channel you want the Widget to appear on. If you would like to assign a default Tag to all chats from this Chat Widget, then choose that Tag now. 

Pro Tip: Give the chat a descriptive name so that you can identify it easily if you create other widgets later.

Step 2: Customize your Widget.

In the Customization tab, you can choose the colors, links, Avatars, Omnichannel support (if you use WhatsApp), Tone of Voice and the Chat Transcript in the Live Chat box that will be added to your website.

Note: You can edit the name of the widget by clicking on the pencil icon above the Customization tab.

  • Language: Select the language that will be used for the pre-configured messages in your chat. 

  • Custom Colours: Enter the colour into the text fields, either by entering the Hex Color, e.g. FFFFFF, or by entering the color name, e.g. white.

  • Useful Links: You can include up to 2 text-based hyperlinks in the widget. Each link has a title (the text displayed - eg. Link Title 1 below) and a link.

  • Agent Avatars: Choose to hide or display user avatars. The avatars are taken from whatever a user has set in the Profile Preferences of their account. 
  • Omnichannel support: If you have integrated WhatsApp, use this section to customize your messaging. Learn more here.
  • Tone of Voice: Customize the tone of voice displayed on the widget that your customers will see.

  • Customize the follow-up chat transcript we send to your client: Set up how the transcript is emailed to the customer. The fields you can edit below are:

    • Subject: the subject of the ticket in the Mailbox, and the subject in the email that is sent to the customer.

    • Transcript email header text: The text that is displayed above the transcript in the body of the email.

    • Transcript email footer text: The text that is displayed below the transcript in the body of the email. Use the toolbar to style the text, and add hyperlinks and images.


Step 3: Tell eDesk how you want Live Chat to behave.

The Behaviour tab is where you set the text in the chat box, configure how to capture customer feedback, set up a contact form to display to customers when your Agents are offline, and design how the transcript will look when it’s shared with the customer. 

  1. Select the Behaviour tab.
  2. Next, complete these settings:
  • Assigned Tags: Select the Tags that you want to assigned to chats from this widget.

  • Custom Fields: If you want your customer to add more details before joining the chat, you could enable a custom field here, e.g. phone number. To learn more about Custom Fields, click here.

  • Enable Live Chat: Enable if you want Live Chat enabled if you have Agents online. If this is disabled only your Contact form will show. If you have a Chatbot enabled, your Chatbot will always show. 
  • Chat Rating: Choose whether to ask customers for feedback on the support they received through Live Chat, and set up the fields that allow them to rate their experience. The chat rating message and fields are displayed in the chat box once the customer has selected the Close button in the chat box.
  • Introduction Title & Body fields (for when Chat Rating is enabled): Configure the text that’s displayed in the chat box when the chat is finished.
  • The Chat Offline : (Note: If you plan to enable a Chatbot on your Widget, there's no need to set up this Chat Offline section). 

  • Disable Chat Window if no agents are online: Click to enable/disable. This only relates to your Contact Form. If enabled, the Live Chat box or Contact Form will not be displayed when agents are offline and if disabled, the contact form will be displayed when agents are offline.

  • Header & Sub header text & Message field Placeholder (for when Chat Window is disabled): Configure the text that’s displayed in the contact form.
    Behaviour tab

Chatbots: This option is for if you have our AI Chatbot, Ava, enabled on your account.
  • If you do have Ava enabled, customers will come through to this Chatbot before they are routed to an Agent, thereby deflecting a number of your chats.

    You will need to have a Chatbot created. Then from the Chatbot dropdown, you choose what Chatbot you want associated with your Chat Widget.  Each field is then editable so that you can customise your own text. The above fields would look like this in the Chatbot itself:
    .

      

Step 4: Set up Prompts if you are using Proactive Chat

The Prompts tab is where you'll configure Proactive Chat if you use it. Click here to learn all about these settings.
Prompts tab

04: Add the chat widget to your website

Now, all that’s left to do is to add the chat widget to your website or web store. We provide a code snippet for the widget, which you’ll need to add to the html in your website. You’ll also position the Live chat box/contact form on your web page.

  1. Click the Installation tab.
  2. Look in the code box on the right-hand side if you want to view the snippet.
  3. Click Copy to Clipboard. This copies the widget code snippet to your clipboard.
  4. Now you need to access the code for your webpage or store that will display the Live Chat button. If you are editing the code in a browser, open a new browser tab as you'll need to return to the eDesk screen to complete setup. In the code for your website or store, find the closing body tag and paste in the widget code snippet immediately above it. Then save.  This step is critical to adding the Chat Widget to your website.
    Showing where to insert the Widget code snippet in the website code.

Note: if the Widget Enabled toggle is set to Inactive, the Chat widget won't show on your website (also you don't have to remove the HTML from the page).

For more information on embedding the code on popular websites:

 

5. In the Positioning section, complete the settings to position the Contact Us button and chat box/contact form (“Pop-up window”) on your website.
Positioning and similar settings.

  • Position: Select a position from the menu to choose to put the button/Live Chat window on the right or left side.

  • Offset X: Set the distance in pixels from the side of the screen.

  • Offset Y: Set the distance in pixels from the bottom of the screen.
  • Allowed domains: If you want to prevent your Live Chat widget from being used on other web pages, enter the URL of your website here. If you want to use the Chat Widget on multiple websites, then you can leave this field blank.

6. Click Save changes.

And that’s done! You have now set up eDesk Live Chat and your team will be able to deliver fantastic, real-time support to your customers.  We’ve also created a helpful article here if you need help Troubleshooting Live Chat.

Further Readings

 

If you want to find out more about Website Contact Forms, click here.
 
If you would be interested in learning more about Chat Settings, click here.