Skip to main content
Chat widget

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

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

“80% of companies believe they provide great customer service, but only 8% of customers agree. agree with that.” (Forbes)

All online store customers, especially first-time shoppers, sometimes need immediate assistance to complete their purchases.

To help online stores provide quality customer service, edrone offers a chat feature that allows shoppers to quickly get answers to questions and additional help they may need during the ordering process.

Upon entering your website, visitors will immediately see that they have the opportunity to speak (via phone or messaging) with a customer service representative - and in real time! This will provide them with the best possible shopping experience in your online store.

How to configure Chat widget?

Start by logging into Mission Control and select Onsites -> Chat Widget from the main menu.

On the Chat page, you will see an option to create a new version of it. You can create up to 8 different chats that can be used for different purposes and/or in different parts of your site.

Click on New chat

To create a new version, click on the “+ New Chat” button. To edit individual versions after they have been created, hover your cursor over it and click.

To edit individual versions after they have been created, hover your cursor over it and click.

Click on Chat…

Step 1: Design

In this section, you will decide the visual aspects of your chat.

  • Color - Text: the color of the text of your chat.

  • Color - Background: the background color of your chat.

  • Position: the position of your chat on the screen (right or left).

  • Bottom (px): distance, in pixels, from the bottom of the screen.

  • Margin: distance, in pixels, to the bottom and sides of the screen, from your chat.

Click on Design

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"

Click on URL Address…

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).

Step 2: Messages

Greeting

Here you can set the text that will be displayed during the first interactions with visitors who click the chat button.

Click on Greetings

Phone number

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

Click on Phone numbers

  • Greeting: this is the first line of your text, larger than the others. Use this field to greet the customer by writing, for example, “Hi!”.

  • Greeting me: smaller text that will appear just below the greeting. Use this space to encourage your visitor to talk to you. You can write something like this: “We want your use of edrone to be efficient and enjoyable. We are happy to answer any questions you may have.”

  • Phone number: enter your phone number here if you want to give the customer the option to call you. In this case, the chat widget will display a button that will make it easy for the customer to call you with one click.

  • Call to Action button: this is the button that will start the conversation. Write something like this: “Chat with us!”.

When everything is ready, your chat should look more or less like this:

Automatic response

If you want to send automatic replies every time someone initiates a conversation, you can enable it here:

Click on Automatic response

Chat messages

In this section you will determine how your chat window will look like. It is the one that shows up to the user when they want to send you a message

  • Team introduction: this is a short text that will be displayed at the top of the conversation window. A caption something like: “We are here to solve problems. Ask us anything.”

  • Type message: the text that occupies the user's message box. Write something similar to: “Write a message…”

Click on Chat messages

User identification & email collection

In this tab, you will configure what will be displayed right after the first step taken by the user.

Click on User identification & email collection

You have three options for collecting the user's name and email address:

  • Always show: before a user can start a conversation with an agent, he or she will have to provide his or her name and email address. This extra step reduces Chat interactions by about 30%. However, this is the option we recommend, as it will allow you to contact the user later, for example, to answer their question even after they have left your store.

  • Never: this option will allow users to start a conversation without providing their name and email address.

  • Optional: this option will allow users to provide their name and email address if they want, but it will not be necessary to start a chat conversation.

If you select “Always” or “Optional,” you will need to configure additional fields:

  • Header text: header - displayed at the top of the widget. Use this space to attract the customer's attention, e.g. “I don't think we know each other yet!”.

  • Introductory text: displayed just below the headline text. Use this space to explain to the customer that you need their information. Write something like: “Your name and email address are required to start the conversation.”

  • Type email: This is the place for the customer's email address. Write something like: “enter your email address”.

  • Enter first name: this is the place for the customer's first and last name. Write something like this: “enter your email address”.

  • Content of consent: here the customer must agree to receive messages from you. Write “I agree to receive messages via chat

Below you can see what your chat may look like after completing this section.

Step 3: Other

Here you will configure additional settings for your widget:

Click on Other

Name

Here you can give a name to your chat widget. This name will not be visible to users of your site.

Click on Name

Welcome message

  • Show agents when chat is closed: select this option if you want to display a thumbnail of the agent when the customer hovers the cursor over the chat button (see below).

  • Display the welcome message in a pop-up window: you can choose whether you want the welcome message to appear “Only once” or “Always”. After this configuration, the chat will look like the image below:

Working hours

In this section you can configure your working hours and decide how your chat will look like. It is possible for the chat to remain active even after working hours and send automatic messages or to be hidden.

Click on Working hours

  • Set weekly working hours: here you will specify the working hours of your support team. The chat widget will respect local time based on the browser you used to set the work hours.

If you have selected the option for automatic messages after business hours, you will see three additional parameters to set:

  • Your message: write an automated message informing the customer that your team will contact them during business hours.

  • Availability information: use this space to inform customers of your business hours.

  • Hide phone number outside business hours: select ON to hide the phone number in the chat outside business hours.

NOTE: If you set both the automatic reply (step 4) and the automatic after-hours message, the after-hours message will take precedence. In this case, only the after-hours message will be displayed when the customer starts the call after business hours.

Step 4: Preview

Now you can see a preview of your chat widget. Click PREVIEW and then see it in the store. If you like everything, click PUBLISH.

Click on Preview

All ready to go! Now you have time to create a good communication strategy and continue to improve the relationship with your customers.


Need additional help?

In case of any questions, don't hesitate contact us via chat or e-mail hello@edrone.me

Did this answer your question?