Fusion Chat Integration for your Webstore

Learn how to add a WebChat widget to your website or webstore and strengthen your customer relationships with XSellco Fusion

Building a WebChat widget for your website is easy. Create the pop-up form, embed it in your website, and you’re ready. The pop-up form functions both as a Contact Form and as a live WebChat portal. When you’re offline, customers can leave a message using the contact form. When online, the customer can speak to you and your team in real time.

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. Control all of your chat messages from within the Fusion dashboard. We have provided some useful links at the bottom of the page on how to add / edit HTML code on popular webstores such as Shopify, Magento, Bigcommerce, WordPress/Woocommerce.

If you have already integrated a widget on a webstore with XSellco Fusion, 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.

Setting up the Widget

Step 1

When logged into the Dashboard:

  • Select the ‘Messages’ dashboard from the main navigation bar at the top of the Fusion interface.
  • Click on the Widgets tab at the bottom of the left hand menu column
  • Select ‘Add New Widget’ at the top right of the screen.

fusion-webchat-step1

Step 2

  • Name the widget
  • Select a channel to which the widget will be applied
  • Click ‘Create Widget’.

Customize the Chat Widget

When you have created the WebChat Widget, you will see the following:

  • Widget name
  • Type & Channel
  • Tickbox to ‘Activate’ the widget
  • Embed code for your website

fusion-webchat-name

Note that this embed code will only work for the Channel you selected.
There are five sections for you to customize:

  1. Button style
  2. Pop-up style
  3. Folders
  4. Contact Form
  5. Chat

Button style

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.

Type: Here you can choose between the standard button,r inputting your own custom HTML button or manually triggered from JavasSript.

Button label: Type the text that you want the button to display eg. Contact Us, Get in Touch.

Position: Select where you want the button to be displayed on your web page. Use the offset
controls to move the box to an exact position of your choice.

Color: Choose the color scheme of your button, its border and the containing text, either by using the color spectrum provided or by entering the color’s hex value.

Font: Select your font style and size.

Once you’re finished, select the second tab, Pop-up style.

fusion-webchat-style

Pop-up style

Decide the color, placement and text of the pop-up box. This is a similar process to designing the button.

Once you’re finished designing the pop-up style, select the ‘Contact Form’ tab.

fusion-webchat-style-pop

Folders

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 WebChat widget. For example, If you place this widget on a page you consider important, you might give it a high priority label.  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

Once you’re done, click on Save Widget 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 WebChat widget will be set up and ready to take queries.

Contact Form

You can customize the text that appears in the Customer Contact widget, including the name, message field and confirmation message. The pop-up box on your website will default to the Contact Form when you’re offline.

When you scroll down, you have the option to add a folder group to your form. 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. You can preview any changes you make on the right side of the screen.

fusion-webchat-contactform1

Chat

Customize your chat pop-up box.

  • Select ‘Chat enabled’ to put WebChat live.
  • Insert header text. The text will appear in the main header of the pop-up box.
  • The message field title represents the prompt, or question, above the message field, such as ‘How can we help?’
  • You can add some placeholder text in the ‘Initial message placeholder’ to show the customer where to type their query. For example ‘Start typing…’
  • Name the call to action button using ‘Start chat button title’ eg. ‘Chat Now’
  • Save changes

fusion-webchat-chat

Going Live with WebChat

To start using live WebChat ensure that you have ticked ‘Active’ on the widget and selected ‘Chat enabled’ within the Chat tab.

Set your Profile to Online or Offline

Click the dropdown by your profile avatar in Fusion, and select either ‘Online’ or ‘Offline’.

webchat offline online

Online: when set to online, you will see a green dot appear beside your avatar
Offline: when offline, a grey dot will appear on your avatar

Once you are online, you will start to receive conversations into your Chat dashboard.
Select the Chat dashboard from the main navigation bar at the top of the Fusion screen to view all chat tickets.
When offline, customer’s messages will default to the Contact Form and will be displayed in your Message dashboard.

Admin Control

When chat is enabled, only Admins will be able to access the chat functionality. To enable your agents to use WebChat, you must give them permission.

To do this:

  • Click on “Settings”.
  • Next, select “Users” on the left menu column.
  • Click on the agent you wish to enable.
  • Finally, check the ‘Chat’ tick box to enable ‘Chat’ and click save.

Once an agent is enabled by the Admin, the agent can go to ‘settings’ on their account and select the number of concurrent chats they can take part in.

To ‘Go Live’, the agent must click the dropdown button by their profile avatar in Fusion, and select either ‘Online’. To ‘Go Offline’, they must click ‘Offline’ to remove themselves from chat.

Control Agent Chat Volume

You can control the volume of incoming live chats for each agent to distribute live chats evenly among your support team.

  • Go to Settings
  • Select ‘Users’ from the left hand menu
  • Click on the user you wish to edit
  • Scroll to ‘Chat’ at the bottom of the page
  • The field ‘Max concurrent chats’ will control how many live chats can come through to a user at a time. If you have joined over this number of chats, you’ll be automatically marked as being busy.

To Activate the Widget for Pre-Connected Webstores

If you have already added a widget to your webstore or website in Fusion, once you select ‘Chat Enabled’ on the widget, the webchat functionality will appear on your website.

If the widget is set to ‘Chat Enabled’ and the Users are set to ‘Offline’, the widget will default to the Contact Form, where customers can send you a message for a later response. To enable live chat, simply select ‘Chat enabled’ on the Chat tab within the widget. Alternatively, you can direct all queries to the Contact Form for non-live chats, simply deselect the ‘Chat enabled’ tickbox.

Click the dropdown by your profile avatar in Fusion, and select either ‘Online’ or ‘Offline’.

Online: when set to online, you will see a green dot appear beside your avatar
Offline: when offline, a grey dot will appear on your avatar

Once you are online, you will start to receive conversations into your Chat dashboard.
Select the Chat dashboard from the main navigation bar at the top of the Fusion screen to view all chat tickets.
When offline, customer’s messages will default to the Contact Form and will be displayed in your Message dashboard.

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
Adding HTML to Bigcommerce – Click Link

Got some questions about the WebChat widget? We’ll be happy to answer any questions you might have. Contact us at support@xsellco.com.

ShareShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone