The customer chat widget is an opt-in tool that allows your customers to chat with your bot directly from your store. This is a great way to provide a great customer experience, increase conversion and get more bot subscribers.
PRO TIP: Offer customers an exclusive discount on the customer chat widget and create a convo to link that gives them the discount code!
We'll take a look at how you can use the customer chat widget if you're using Octane AI with a non-Shopify store.
Table of Contents
2.3. Placement settings
4. Guest mode
1. Locating your chat widget
You can locate the customer chat widget under "Opt-in Tools" in your dashboard's left-nav menu. You can navigate straight to the widget's page from the opt-in tools homepage or through the menu itself.
You can either click on the customer chat widget panel, or on the link in the left-nav menu to go to your chat widget's main page.
From here, the chat widget's main page will display analytics as well as options to customize your widget, set up A/B testing as well as get your embed code. Let's take a look at the data displayed on your chat widget's page.
Your chat widget's analytics will display data for two stats:
- Views: the number of visitors that viewed your chat widget
- Conversions: viewers that became subscribers
You'll also see all time data for views and new subscribers acquired by your chat widget. Since they're all time, this means they're the total amount over your bot's lifetime.
If you're A/B testing different versions of your chat widget, don't worry! Data for each individual chat widget will be displayed underneath as well.
To edit a particular chat widget, simply select the Edit button.
2. Customizing your chat widget
You'll be able to customize your chat widget starting with the design. You'll also be able to change the greeting message, the convo that you link as well as placement of the chat widget on your website.
We'll start with design, but if you'd like to jump ahead, you can use the links below:
2.3. Placement settings
With your design options, you can change the style of the widget as well as the delay time.
The style allows you to change the color of your widget as well as its behavior. The drop-down menu under "Default state" lets you select between three options:
- Expanded: the greeting message will always show above your chat widget.
- Fade: the greeting message will be displayed briefly after the delay time.
- Minimized: the greeting message will not automatically display.
Delay time is the amount of time before this greeting message appears if you've set your chat widget to "Fade".
2.1. Customize your greeting
Your greeting message will appear in a bubble above your chat widget before someone has opened up the chat.
You can customize this differently for users who are logged into Facebook, as well as users who aren't logged into Facebook.
Use the "Customize text for logged out users" to show a different version of the greeting message.
2.2. Choose a linked convo
In the destination settings, you'll choose the conversation that triggers when someone opens the chat widget.
This lets you customize the content a customer will see when they start interacting with the widget! Here are a few ideas of what you can build in that convo:
- Offer a discount to those who open the chat widget
- Feature a specific product or collection
- Link your Shoppable Quiz
You can start learning more about convos here.
2.3. Placement settings
Placement settings let you decide where on your website the chat widget will appear. For non-Shopify stores, this is also where you'll need to whitelist your website's domain to ensure that the chat widget can show up without conflicts.
Under domain settings, make sure to enter your store's URL which will allow the chat widget to show up without issues.
Devices allows you to specify which devices, between desktop, tablets and mobile, that your chat widget will appear on.
With A/B testing, you could even test different device placement settings to see which device gets more engagement and conversions from visitors.
Customize by URL
You'll also be able to specify which pages on your website to include or exclude the chat widget on.
When setting up the URLs that the rules will apply to, you can choose between excluding those URLs, or restricting the chat widget to only those URLs.
Widget position settings let you put the chat widget icon on the bottom left, or right of your website. That way, you can avoid overlapping other elements of your website.
3. Placing the chat widget on your website
Before embedding your widget on your website, make sure you've added your website as a whitelisted domain first, which you can check out how to do here.
Once you've whitelisted your website, you can get the embed code from your chat widget's main page by finding the Embed code section.
If you click on "Get the code", a pop-up window will appear where you can copy the line of code that Octane AI generates for you.
To make sure the chat widget's embed code functions correctly, you should remove any previous versions or embeds of the Facebook SDK from your website.
You can view information about each version of the Facebook SDK here.
Next, copy the code generated by Octane AI. You can do that by clicking "Copy code" or by highlighting the text and manually copying it to your clipboard.
On your website, you'll want to paste the code inside of the
<body> element of the page you'd like to include the code in. Here's a simplified example of how that would look like:
/customerchat.js" async defer></script>
Of course, this would be an example of a blank page. Your website pages' body elements are likely to include much more code describing the content and style of your website.
4. Guest mode
Guest mode is an option that lets visitors interact with your chat widget without logging in. This does mean any visitor interacting in guest mode won't become a subscriber to your bot.
Facebook currently has this feature in beta, and will be making an upgrade to subscriber option available in the future.
To learn more about guest mode, check out this article.