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

Click on “Embed to website”

Click on "Copy to clipboard"

(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.

Configure your customizations and preview widget, before copying the embed code over

For a more detailed guide on how customize your chat widget or page, see the pages below:

Chat Widget Embedding

Chat Screen Embedding

---

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".

Click on "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.

Select the "theme.liquid"

---

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.

Scroll down to find the </body> tag

2. Insert the copied embed code just before the </body> tag.

Paste the chatbot's embed code you copied from the chatbot platform.

Paste the copied chatbot embed code just before the </body> tag.

---

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.

Click on "Save" (top-right corn

2. Preview Your Store

Go to your store’s preview page to make sure the chatbot appears as expected.

Click on "Preview" (top-right corner)

Make sure the chatbot widget appears on the page.

---

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.

Ensure that Chat Widget is visible

Click on Chat Widget icon to expand for Chat Pop-up

---

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 [email protected]