Chat widget

Talk to your customers in real-time while they shop!

Ana Zaroni avatar
Written by Ana Zaroni
Updated over a week ago

“80% of businesses believe they provide excellent customer service, but only 8% of customers agree.” (Forbes)

All online shoppers, and first-timers especially, sometimes require immediate assistance in order to finish their shopping session.

In order to help online stores provide great Customer Care, edrone provides a Chat feature that enables shoppers to quickly get answers to their questions and any further assistance they might need to place their orders.

Upon entering your website, visitors will immediately see they have an opportunity to chat in real-time with a customer service representative, by text or phone. This will ensure they have the best possible experience while shopping in your store.

How to set up the Chat widget

To begin, log into your edrone Workspace and select CHAT from the main menu.

To set up the Chat widget, you will first need to have your edrone Inbox set up. If this is your first time setting up the Chat, you will see the following message:


Click the GO TO SETTINGS button and follow the instructions. For more information about setting up the Inbox, click here.

Once your Inbox is set up, the CHAT page will now show an option to create a new Chat version. You can create up to 8 different chats, which can be used for different purposes and/or in different parts of your website.

To create a new version, click the green "+" button. To edit each version after it is created, 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 set up the content the customer will see before interacting with the widget.

  • Agents on icon chat hover: when you select ON, your chat will show a thumbnail of your agents when a visitor hovers over the chat button (see below).

  • Pop-up Welcome Message: this is a small text right above the Chat icon which appears to users before they start a conversation. When ON, you will be able to choose whether you want the welcome message to appear Only once" or "Always", and write the welcome message. Write something like "Call or chat with us!".

After this setup, your chat will look like the image below:

To continue, open the Greetings tab below.

Step 2: Greetings

Here you can set up the text to be displayed for your first interactions with visitors who click on the chat button.

It is also possible to add up to two phone numbers and change the Call to Action button text.

  • 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."

  • Phone number: inform your phone numbers here if you want to give your customer the option to call you. Your phone numbers can be labeled to direct users to the right option for them (e.g. "Customer Support" and "Management").

  • Call to Action button text: this is the button which will start the conversation when it is clicked by the user. Write something like: "Let's chat!"

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 set up 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 what your chat might look like after this section:

Click on the Automatic response tab to move forward.

Step 4: Automatic response

If you wish to send an automatic response every time someone initiates a conversation, select ON and write the message (up to 100 characters)

To continue, click on the Working time tab.

Step 5: Working time

In this section, you can set up your business hours and determine how you want the chat to reflect it. It is possible to leave the chat active on the website and send an automatic message after working hours or hide the chat altogether outside of working hours.

  • Set your weekly hours: here you will determine your support team's working hours. The Chat widget will respect the local time based on the browser you used to set up the working time.

If you choose the Send an automatic message after working hours option, you will see three additional parameters to set up:

  • Your message: write your automatic message informing the user that your team will get back to them during business hours.

  • Information about availability: use this space to inform your clients about your working hours.

  • Hide phone number after working hours: select ON to hide the phone number from the chat outside of working hours.

NOTE: If you set up both an automatic response (step 4) as well as an automatic message after working hours, the message after working hours will have priority. In this case, when a customer starts a conversation after working hours, only the working hours message will be displayed.

Click on the Conversation topic tab to continue.

Step 6: Conversation topic

This section will help you organize conversations based on the most frequent topics. You can add conversation topics (e.g. "Shipping", "Payment", "Order" etc) and automatically assign conversation labels to each topic.

NOTE: The conversation topics will be visible to the user, while the labels will be visible only to the agents, inside the edrone Inbox panel.

  • Conversation topics overview: this is a summary of your conversation topics and the assigned labels. If you wish to remove a topic, click the REMOVE TOPIC button.

  • New conversation topic: this is where you add new topics. Each topic must have a label assigned, and the same label can be assigned to different topics. Please note that, before the labels can be assigned to a topic, they must have been previously created in the Inbox panel.

  • Conversation message: this is a small message located above the topic options inside the chat. Write something like: "Do you want to talk about one of these topics?".

This is what your chat will look like after this section:

To continue, go to the Conversation rating tag.

Step 7: Conversation rating

An important element of providing excellent Customer Care is collecting customer satisfaction ratings. To collect conversation ratings, select ON.

  • Text to encourage evaluation: write a short call to action encouraging the user to rate the conversation, something like "Please rate this conversation!". This will appear on the top of the conversation.

  • Thank you text for the rating: write a thank you note for customers after they have rated the conversation.

Conversations are rated in 1 – 5-stars. This is how it looks like:

We're almost there! To continue, open the Chat tab below.

Step 8: Chat

In this section, you will determine what will be communicated to the user when 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 something like: "We're here to solve any issues. Please ask us anything."

  • Write message placeholder: the text that occupies the user's message field. Write something like: "Write a message..."

Now it's time to determine how your chat will look! Click on the Design tab.

Step 9: Design

In this section you can determine your chat's visual properties:

  • Color - Text: your chat's text color.

  • Color - Background: 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

  • Margin: distance, in pixels, to the bottom and the side of the screen, according to your chat's position.

Looking good! Click on the Rules tab to continue.

Step 10: Rules

Here you have the ability to set up 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"

NOTE: 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 11: Preview

Here you have the opportunity to see a preview of your Chat widget before publishing it. Click on the PREVIEW button and then click on GO TO STORE or use the QR code to see a preview of the chat on your store. If everything is OK, just click the PUBLISH button and you chat will be live.

You are all set! Now it's time to create a good communication strategy and continue improving 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 hello@edrone.me


Did this answer your question?