Live Chat empowers eCommerce sellers to break down barriers between online retailers and customers; respond instantly to customer support queries, save time and money on your business, and convert once-off customers into loyal ones.
Chat Widget Breakdown
Integrating Live Chat for your website is easy. Create the pop-up form, embed it in your website, and you’re ready to go. The pop-up form functions both as a Contact Form and as a Live Chat portal. With our new knowledge-driven Live Chat, you can be assured that customers will receive a fast smart response to a typical customer support query, or they will be instantly connected to an agent that will solve any issues in real-time.
When you’re offline, customers can leave a message using the contact form.
Use one widget for all your webstores or set up as many widgets as you need. Simply create a new widget for each webstore or website, and customize as required for your business. Control all of your chat messages from within the message dashboard. We have provided some useful links at the bottom of the page on how to add / edit HTML code on popular websites such as Shopify, Magento, Bigcommerce, Wordpress and Woocommerce.
If you have already integrated a widget on a webstore with xSellco helpdesk, this set up is a two click process. In this case, you can skip straight to the end section on ‘To Activate the Widget for Pre-Connected Webstores’ below.
Let’s go through the steps to ensure that you're ready to get setup with Live Chat.
Within your account you will see a tab called “Widgets” in the left hand column. If this does not appear you will need to request access from your admin. Click on this tab as shown below.
Once here you can click on “Create your first Widget” or if you already have a widget you can select
When you have selected your widget there is 3 pieces of information you will need to enter to continue which are all required.
This will be the name of the chat. Your customers will not see this and will only be for yourself to distinguish from other widgets.
Selecting a channel will ensure your agents will know where this customer has come from as well as any further correspondence outside of the chat will be sent from this channel.
Here you can decide what type of widget you would like. At the moment the only option available is a pop up form which is i the form of a button.
Once you have created the widget you will see the fields you have already added such as Name (which can be edited) and Type.
Here you will also see:
Active will activate the widget for you.
Embedded Code is the important code to add to your HTML page of your website. If you are not familiar with HTML, we would ask you pass this information onto your web developer.
Useful Links for Embedding HTML code on your Website or Webstore
Adding Custom HTML code to Wordpress/Woocomerce - Click for video.
Adding HTML to Shopify - Click Link
Adding HTML to Magento - Click Link
In this section you can customize the pop-up button that appears on your website. When a customer selects this button, it will open the pop-up form. You can preview any changes that you make to the button on the right hand side of the screen.
Here you can choose between the standard button or inputting your own custom HTML button or manually triggered from JavasSript.
Type the text that you want the button to display eg. Contact Us, Get in Touch.
With this show delay you can decide when the button will appear in a number of seconds. Example: ou may not will to ask your customers if they want help until after being on the page for 10 seconds.
Select where you want the button to be displayed on your web page. Use the offset controls to move the box to the position of your choice.
Button background/border/text colour
Choose the color scheme of your button, its background, border and the containing text colour either by using the color spectrum provided, or by entering the color’s hex value.
Select your font style and size.
Decide the color, placement and text of the pop-up box. This is a similar process to designing the button. You can preview any changes that you make to the button on the right hand side of the screen.
Select where you want the pop-up to be displayed on your web page. Use the offset controls to move the box to the position of your choice.
Choose the color scheme of the border of your pop-up box by using the color spectrum provided, or by entering the color’s hex value.
Header Bg/Text Colour
Here you can adjust the background and text of the pop-up box. Again by using the color spectrum provided, or by entering the color’s hex value.
Body BG/Text Colour
Then you can change the color scheme of the body background or text of your pop-upy by using the color spectrum provided, or by entering the color’s hex value.
Lastly the link colour can be updated.
The Folders tab allows you to predetermine how tickets from this widget will be labelled and will organize support queries in your dashboard.
You can add different types of labels to the Live Chat widget and prioritize certain queries. For example, If you place this widget on a page you consider important, you might give it a high priority label.
Labels (Default Folder already created in your account)
You can add different types of labels to the Live Chat widget and prioritize certain queries. For example, If you place this widget on a page you consider important, you might give it a high priority label. To learn more about creating Folders/Labels click here.
You can attribute as many labels as required to the widget; by query type, priority and support level, if these queries should go to a specific tier of your support team.
The pop-up box on your website will default to the Contact Form when you’re offline. You can preview any changes that you make to the button on the right hand side of the screen. You can customize the text that appears in the Customer Contact widget such as:
As a default this will display “Leave us a message”. This can be adjusted to the text you require.
Name/Email/ Messages field title
Each of these title fields can be adjusted.
Message field placeholder
The placeholder is the text inside the message box. The default is “Type your message in here”.
Once the customer has entered their message a confirmation message will appear which you can edit the header and message.
Then the message will be brought into your Helpdesk. The subject field relates to the default subject set when the message arrives.
This will allow the customer to select a query type when sending you a message. The ticket will automatically be assigned to that folder within your dashboard. To learn more about creating Folders/Labels click here.
Folder group title
This will be the text asking the customer to choose one of the folder options. The default is “Please select an option”.
Cancel/Send button title
Here you can change the text which is labelled on each of these buttons.
Similar to Folders you can add custom fields to this contact form.
Customize your chat pop-up box.
This activates Live Chat to get it up and running.
This will hide the widget if no user/agent is available.
The default language that will be assigned to the chat.
The text that will appear in the main header of the chat pop-up box.
Initial message field title/placeholder
Edit the text that appears as a header and as a placeholder in the chatbox
Dismiss/Start chat/Restore chat button text
Each of these buttons can be changed to different text.
Once all your settings are updated ensure you select “Save changes”.
Now the embed code is ready to use. Embed the code in a page of the website you have selected, or in the website theme if you want it to appear on each page. The Live Chat widget will be set up and ready to engage with customers.
To learn more about how to use the activate your chat widget for your users click here.
Got some questions about the Chat widget setup? We’ll be happy to answer any questions you might have. Contact us at email@example.com.