“80% of businesses believe they provide excellent customer service, but only 8% of customers agree.” (Forbes)
2020 was a record year for eCommerce, both in terms of new online stores being created, as well as sales volumes. The tragic coronavirus pandemic made many businesses create or reinforce their online operations, accelerating a trend that was already underway: more and more people are now shopping online – many, for the first time.
To help online stores deal with this new context, edrone has developed a customer service solution that helps shoppers quickly get answer to their questions and process their orders: the Chat widget.
Upon entering your website, visitors will see the opportunity to chat in real-time with one of your customer service representatives, by text or telephone.
Let's learn how to set it up!
How to set up the Chat widget
To begin, log into your Mission Control and select CHAT from the main menu.
You first option will be to choose how many Chat versions you'd like to create. The minimum is one, the maximum is eight. To create a new version, click the green "+" button. To edit each version, hover your mouse above it and click the EDIT button.
To continue, click on the Welcome Message tab below.
Step 1: Welcome Message
In this section, you can setup the content the client will see before interacting with the widget.
- Show Agents on icon chat hover: select this option if you wish to show a thumbnail of your agent when a visitor hovers over the chat button (see below).
- Pop-up Welcome Message: you can choose whether you want the welcome message to appear "Only once" or "Always".
- Welcome Message: here is where you will write your welcome message, which appears to every visitor that hovers over the chat button, even before they start the conversation.
After this setup, your chat will look like the image below:
To continue, open the Greetings tab below.
Step 2: Greetings
Here you can setup the text to be displayed for your first interactions with visitors who click on the chat button.
- Greeting: the first line of text, displayed in a large size. Use this field to greet your visitor, writing something like "Hello!".
- Greeting description: a smaller text that will appear right below the greeting. Use this space to encourage your visitor to chat. Something like: "We want to make using edrone effective and enjoyable. We will gladly answer all your questions."
- Contact number: put your telephone number here if you want to give your customer the option to call you. In that case, your chat widget will display a button to make it easier for your customer to call you with one click.
- Call to Action button text: this is the button that will trigger the conversation. Write something like: "Chat with us!"
When you're done with this section, your chat will look something like this:
Click on the User identification & email collection tab to continue.
Step 3: User identification & email collection
In this tab, you will setup the what will be shown right after the user's first contact.
You have three choices for collecting user's name and email:
- Always: before the user can begin chatting with your agent, he or she will have to leave their name and email. This extra step reduces, on average, about 30% of chat interactions. But that's the option we recommend, because it will allow you to contact the user by email afterwards, for example answering their question even after they have left your website.
- Never: this option will allow users to start a conversation without informing their name and email.
- Optional: this option will allow users to inform their name and email if they wish, but it won't be mandatory to start a conversation.
If you choose "Always" or "Optional", you will need to set up additional fields:
- Header Text: displayed on top of the widget. Use this space to grab you customer's attention. You can write something like: "It seems that we don’t know each other!".
- Intro Text: displayed just below Header Text. Use this space to explain to your customer that you need his or her data. Write something like: "Your name and email address are required to start a conversation".
- Placeholder Email Text: the text that will occupy the email field. Write something like "enter your email".
- Placeholder First Name Text: the text that will occupy the name field. Write something like "enter your name".
- Agreement Text: this is the text where your user will consent to receive messages and emails. Write something like "I agree to receive communications by chat and email".
- Send Button Text: what will be written on your "send" button. Keep it simple, something like "send" is fine.
This is a real-world example of how your chat might look like after this section (it's in polish, but you get the idea!).
Click on the Working Hours tab to move forward.
Step 4: Working Hours
In this section, you will choose whether you want to send an automatic message if a visitor starts a conversation after business hours. Leave this option unmarked if you don't want to reply with an automated message, or check it if you do.
If marked, further options will appear:
- Set your business hours: here you determine when the automatic message will be active. So, for example, if your business hours are between 07 AM and 06 PM, select 18:00 and 07:00. Please note that, in edrone's system, all hours are in CET.
- Your message: write your automatic message informing the user that your team will get back to them during business hours.
We're almost there! Click on the Chat tab to continue.
Step 5: Chat
In this section, you will setup the appearance of the chat window that will appear to the user when he wants to send you a message.
- Team intro: this is a short text that will be displayed at the top of the conversation window.
- Write message placeholder: the text that occupies the user's message field. Write something like: "Write a message..."
After setting up this section, your chat will look something like this (again, using a real-life example in polish):
You can setup your agents' profiles on MISSION CONTROL > SETTINGS > AGENTS. Images must be 110 x 100 pixels.
Now it's time to determine how your chat will look! Click on the Design tab.
Step 6: Design
In this section you can determine your chat's visual properties:
- Dark color: your chat's text color, and that of other "foreground" elements.
- Light color: your chat's background color.
- Position: your chat's position on the screen (left or right)
- Bottom (px): distance, in pixels, to the bottom of the screen
- Left (px) / Right (px): distance, in pixels, to the side of the screen, according to your chat's position.
Looking good! Click on the Rules tab to continue.
Step 7: Rules
Here you have the ability to setup when the widget will be displayed according to several conditions:
- URL address: you can determine on which of your website's page or pages you would like your chat widget to appear. For example, if you want it to appear on every page of your website (e.g. "yoursite.com"), choose "URL → contains → yoursite.com". If you want it to appear only on your contact page (for example, "yoursite.com/contact"), you can choose "URL → is → yoursite.com/contact".
- Screen size: in this rule, you can choose to show or hide your chat widget based on your customer's screen size, effectively segmenting by device: Desktop (≥1000 px); Tablet (≥576 and ≤1000 px); or Smartphone (≤576 px).
- User subscription status: using this rule you will determine if you'd like to show or hide your chat to users who are or aren't subscribed to your newsletter.
- HTML Element: allows you to display your chat whenever a specific HTML element is present on a given webpage. Just paste the element on the text field.
- Based on the date: choose whether you want your chat to be displayed starting from or ending on a specific date, or during a specific period of time.
- Homepage: this rule allows you to display the chat only on your homepage instead of your whole website. Just choose "Homepage → is → yoursite.com"
Rules will have boolean relationships (AND / OR) with each other. This means you can compound your rules to narrow down your audience using AND (e.g. show chat only when user is visiting a particular webpage AND viewed a product) or amplify it using OR (e.g. show chat either when user is not subscribed OR is using mobile screen size).
We're almost done! Click on the Preview tab to reach the finish line.
Step 8: Preview
Here you have the opportunity to see a preview of your Chat widget on your website or on edrone's Mission Control. If everything is OK, just click the PUBLISH button.
You are all set! Now it's time to create a good communication strategy and continue improving on your relationship with your visitors and customers.
Need more help?
If you have any further questions about the Chat widget, please do not hesitate to contact us at email@example.com