Welcome to Propane Chat, the premier AI Chatbot for e-commerce. Here, we'll teach you how to install both the embedded version and the widget version of Propane Chat on your Shopify site. It will involve a tiny bit of code, but don't worry, it should take less than 5 minutes to install and we'll guide you through every step of the way. If you have any trouble getting set up there is a link to sign up for a free consulation at the bottom of this page.
Embed vs. Widget:
There are two ways to use Propane Chat. You can embed it on a specifc page of your website or you can have it appear as a widget in the corner of the pages of your website. The little chat icon in the bottom right corner of this screen is the widget version and this is the embedded version and what it might look like on a page of your website:
How to install the Propane Chat Widget on Shopify:
First, you will need the widget code found in the Propane Chat Dashboard. Visit the Embed Chat tab and then click on "Get Embed Code". Copy the widget code.
Now, navigate to the Shopify Dashboard followed by:
Online Store - > Themes - > Actions - > Edit code, as shown below.
From there, click on the "</> theme.liquid" file. Then paste the script code between <head> and </head>, essentially anywhere near the beginning of the document as shown highlighted in blue here:
The widget code and the theme.liquid code may look slightly different for you, that's okay. Click save and then "Preview Store" in the top right corner as seen above. Now, while previewing your store, you should see the Chatbot widget in the bottom right corner of your website!
How to embed Propane Chat on Shopify:
First, you will need the Embed iFrame Code found in the Propane Chat Dashboard. Visit the Embed Chat tab and then click on "Get Embed Code". Copy the Embed iFrame Code.
Now, navigate to the Shopify Dashboard followed by:
Online Store - > Themes - > Customize, as shown below.
Navigate to the page where you would like to embed Propane Chat. Then "Add [a] section" and select "Custom Liquid" as shown below:
This is where you will paste the iFrame code from the Propane Chat Dashboard.
You can adjust the height of the chat by changing the height percentage in the code and pressing enter so that the number and the percentage symbol (%) are on separate lines as shown below:
Changing the width of the embedded chat is done by repeating the same process with the width percentage.
Simply click save and you should be good to go.
Having trouble?
Thanks for choosing Propane Chat. If you are having any trouble getting Propane Chat set up on your Shopify, or if you would simply like expert advice getting Propane Chat ready to help your customers, feel free to sign up for a free consulation call with a member of the Propane Chat team here: https://calendly.com/propanechat
We look forward to fueling your customer engagement one conversation at a time 🔥