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.
 
  • eDesk Live Chat is available as an Add-On. To find more information, click here.
 
  • You’ll need to have access to Smart ToolsWidgets in your Settings. If you don’t have access, request it from an Admin user within your business.
 
  • To set up Live Chat, you’ll need an Admin login to eDesk. If you don’t have an Admin login, you can request one from an Admin user within your business.
 
  • You’ll need to have already connected your eDesk to the website or web store that will offer the live chat. 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. You can customize it 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.

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 "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 Chat → Widget Settings.

  2. Select Add Widget

  3. When that’s done, click Finish.

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 display no avatar, a custom avatar, or a stock image avatar for your Agents.
  • 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:
  • Associated Tags: Select the Tags that you want to show in the chat box.
  • Customer Specific Tags: Select this when you want to include a field in the form that asks the customer to select the type of problem from a menu, e.g. faulty item, item hasn’t arrived, etc. Each item in the menu is a Tag in the Tag Group. When the customer selects a Tag, it will be assigned to the ticket that’s created when the chat is closed.
    Note: You’ll need to have already created a Tag Group containing the relevant Tags. To learn about using Tags in Live Chat, please navigate to section 03 in this article.
  • Custom Fields: If your customer wants to add more details, you could enable an option for them to add an additional field to display on the initial Chat window, e.g. phone number. To learn more about Custom Fields, click here.

  • Chat Online: Enable if you want Live Chat enabled if you have Agents online.
  • 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: Configure the text that’s displayed in the chat box when the chat is finished.
  • The Chat Offline (No agents available): If you're setting up Live Chat, there's no need to configure this section. This is where you set up the contact form that’s displayed instead of the chat box when there are no online agents.
  • Disable Chat Window: Click to enable/disable. If enabled, the Live Chat box will be displayed when agents are online and when disabled or there aren't any agents available, the contact form will be displayed.

  • Header text & Message field Placeholder: Configure the text that’s displayed in the contact form.
    Behaviour tab

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.