Embedding for Shopify
A Guide on How to Embed Chatbot Widget for Shopify users.
The Wonderchat chat widget allows both prospective and existing clients to chat with your business directly from your website. To set up the chat widget, you will have to copy the Wonderchat embed code and then paste it into the footer of your Shopify page.
Step 1: Copy Your Chatbot's Embed Code
Get the Embed Code
In a separate window, go to the ↗ Wonderchat App.
Go the Dashboard > Actions (⋮) > "Embed to website"
Copy the embed code
(Optional) Adjust Chatbot Position and Size
If the chatbot needs to be resized or repositioned, you can modify your changes on the Wonderchat App before copying the embed code over.
For a more detailed guide on how customize your chat widget or page, see the pages below:
Step 2: Login to Shopify.
Log into your Shopify store by going to ↗ Shopify Admin.
Step 3: Edit Theme
1. Go to "Edit Code"
From your Shopify dashboard left sidebar, go under "Themes" section. Find the theme you want to edit and click on "Actions (...)", then choose "Edit code".
2. Locate the HTML File to Edit
You will be taken to the theme editor. On the left-hand side, you’ll see a list of files. Find the file where you want to embed the chatbot. Typically, this will be the theme.liquid file located under the Layout folder or the footer.liquid file under Sections if you want the chatbot to appear site-wide.
Step 4: Paste the Chatbot Embed Code
1. Find the </body> tag
Scroll down to the section of the code where you want to add the chatbot. You might place it just before the closing </body> tag if you want it site-wide.
2. Insert the copied embed code just before the </body> tag.
Paste the chatbot's embed code you copied from the chatbot platform.
Step 5: Save and Preview Your Store
1. Save Your Changes
After pasting the embed code, click Save in the top-right corner of the Shopify editor.
2. Preview Your Store
Go to your store’s preview page to make sure the chatbot appears as expected.
Step 6: Test Your Chatbot
Ensure the chatbot works properly by interacting with it on your live store. Test the chatbot's functionality across different devices (desktop, tablet, mobile) to make sure it's responsive.
Conclusion
By following these steps, you can easily embed a chatbot widget into your Shopify store to provide real-time customer support and increase engagement. If you run into any issues or need assistance, you can always consult Shopify’s support or Wonderchat team for further help.
If you have any more questions, feel free to reach out to us at support@wonderchat.io
Last updated
