Wonderchat Documentation
  • ๐Ÿ‘‹Welcome to Wonderchat
  • Overview
    • โš–๏ธPricing
    • โœจOur Features
    • ๐Ÿ”Content Overview
  • Setup Guides
    • ๐Ÿ“ชSetting up your Chatbot
      • Creating Your First Chatbot
      • How to set-up a Spontaneous Greeting Message
      • Setting up Multi-lingual Chatbots
      • How to Pick Between Source Citations Options For Your Chatbot
      • Add Suggested Questions to your Chatbot
      • Selecting Between AI models for your chatbots
      • How to Crawl and Update Private Sites
      • How to Customize Your Notification Settings for Your Chatbot
    • ๐Ÿค–Training your Chatbot
      • How to add or delete webpages or websites from your chatbot
      • How to manually update your Chatbot website link for Re-Crawling
      • How to use PDF and website links simultaneously as data sources for your chatbot
      • How to upload Videos and Audio files into Wonderchat
      • How to add or delete PDFs from your chatbot
      • Writing Support Documentation for AI Chatbots
    • ๐Ÿ–ฅ๏ธAdding your Chatbot to your website
      • How to Embed a Chat Widget
      • How to Embed a Chat Screen
      • Embedding for Wix
      • Embedding for Shopify
      • Embedding for WordPress
      • Embedding for Drupal
      • Embedding for Webflow
    • โœ๏ธCorrecting your Chatbot
      • How to Set Up Chatbot Corrections
      • How to Resolve Pending Corrections
      • Export and Import Corrections
    • ๐Ÿ’…Styling your Chatbot
      • How to Adjust Chat Widget Size
      • Customizing Your Chatbot's Style and Color
      • Using Custom CSS to style your chatbot
    • ๐Ÿ‘จโ€๐Ÿ’ผHuman Handover for your Chatbots
      • AI Chatbot Handover to Human Support via Email
      • How to Set Up Live Chat within Wonderchat
    • ๐Ÿ“‡Collecting Leads with your Chatbot
      • How to set-up leads generation sequences
      • How to collect user names, emails and phone numbers from users
      • Turning on email notifications for every new lead collected
      • [For Enterprise Users] How to Route Chats by Topic to Sales Representatives
    • ๐ŸคSharing your Chatbot
      • How to Share Your Chatbot Publicly
      • How to Add Team Members to Wonderchat
    • ๐Ÿ”‹Using Chatbot Tools
      • Set-up Custom Chatbot Tools
    • โš™๏ธAdding Chatbot Workflows
      • Set-up Chatbot Workflows
  • Integration Guides
    • Active Campaign
    • Calendly
    • Freshdesk
    • HubSpot
      • Adding Wonderchat Tags to Hubspot
    • Shopify
    • Slack
      • Slack (via Zapier)
    • Twilio
    • WhatsApp
    • Zapier App
    • Zendesk
    • Google Drive
    • Microsoft Sharepoint
  • FAQ
    • How To Exclude VAT/GST Charge at Checkout
    • How To Exclude VAT/GST Charge after Checkout (via Tax Refund)
    • How to Apply a Promo Code at Checkout
    • Upgrading Wonderchat Subscription
Powered by GitBook
On this page
  • Installing Wonderchat App on your Shopify Store
  • Step 1: Login to your Shopify Store.
  • Step 2: On the left-panel, click on "Apps".
  • Step 3: In the pop-up, click on "Shopify App Store".
  • Step 4: Search for "Wonderchat" in Shopify App Store.
  • Step 5: Click on 'Install'.
  • Step 6: Select 'Install' again.
  • Step 7: Access Wonderchat from the Shopify Dashboard
  • Step 8: Verify Shopify Store Connection
  • How to Embed Chat Widget on Shopify
  • Step 1: Go to "Edit Code"
  • Step 2: Select "theme.liquid"
  • Step 3: Scroll down to find the </body> tag
  • Step 3: Retrieve Embed Code from Wonderchat App
  • Step 4: Paste copied code before </body> tag
  • Step 5: Click on 'Save'
  • Step 6: Preview Widget on Store
  • Step 7: Test Chatbot on Live Store

Was this helpful?

  1. Integration Guides

Shopify

A Detailed Guide on How to Integrate Wonderchat with Shopify.

PreviousAdding Wonderchat Tags to HubspotNextSlack

Last updated 5 months ago

Was this helpful?

This guide will help you seamlessly integrate Wonderchat, our AI-powered chatbot, with your Shopify store. By following these steps, you'll enhance customer engagement and streamline support, providing a more efficient shopping experience for your users.

Letโ€™s get started on setting up Wonderchat in Shopify!


Installing Wonderchat App on your Shopify Store

Step 1: Login to your .

Step 2: On the left-panel, click on "Apps".

Step 3: In the pop-up, click on "Shopify App Store".

Step 4: Search for "Wonderchat" in Shopify App Store.

Step 5: Click on 'Install'.

Step 6: Select 'Install' again.

Step 7: Access Wonderchat from the Shopify Dashboard

  1. In your Shopify dashboard, click on Apps from the left-hand sidebar to open the Apps menu.

  2. In the search bar at the top, type Wonderchat.

  3. Once Wonderchat appears under Installed apps, click on it to open the Wonderchat integration interface.

Step 8: Verify Shopify Store Connection

  1. After connecting your Shopify store to Wonderchat, navigate to the Dashboard in Wonderchat.

  2. You should see your Shopify chatbot listed under Bot Name with its status toggled on.

  3. A notification will appear at the bottom of the screen, confirming that your Shopify store has been successfully connected. It will state:

"Your Shopify Store has already been connected to your Wonderchat account. Please go to Settings > Integrations > Shopify to connect your store to an existing chatbot."

If you see the Shopify Icon lighted up in green, your integration has been successful, and your chatbot is now ready to interact with your Shopify customers. From here, you can now embed your chat widget to your website.


How to Embed Chat Widget on Shopify

Step 1: Go to "Edit Code"

On your Shopify Admin Dashboard, find the left-panel and click on "Themes" > "(...) > "Edit Code".

Step 2: Select "theme.liquid"

On the left-panel under the 'Layout' folder, click on "theme.liquid".

Step 3: Scroll down to find the </body> tag

Step 3: Retrieve Embed Code from Wonderchat App

From the pop-up, copy the embed code.

Step 4: Paste copied code before </body> tag

Step 5: Click on 'Save'

Step 6: Preview Widget on Store

Step 7: Test Chatbot on Live Store

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 this guide, you've successfully integrated Wonderchat with your Shopify store. Your AI-powered chatbot is now ready to enhance customer engagement, streamline communication, and provide round-the-clock support to your store visitors. This integration will not only improve the overall user experience but also help automate routine tasks, allowing you to focus on growing your business.

If you encounter any issues or need further assistance, don't hesitate to explore the Wonderchat help resources or reach out to their support team. Happy selling!


If you have any more questions, feel free to reach out to us at support@wonderchat.io

In a separate window, open the โ†— .

Wonderchat App
Shopify Store
Click on "Apps" on the left-panel.
Click on "Shopify App Store" link on the bottom of the pop-up window.
Type in "Wonderchat" in the search bar.
Install the 'Wonderchat' app.
Click 'Install' to grant access permissions.
Shopify Icon in Green under Integrations
Click on "Edit Code".
Click on "theme.liquid"
Find where the </body> tag is
From your dashboard, Click on the โ€œโ‹ฎโ€ and go to โ€œEmbed to websiteโ€
Click on "Copy to clipboard".
Paste copied code just before </body> tag.
Click on 'Save' to save changes.
Click on "Preview Store" (top-right corner)
Check if chat widget appears on the page.
Click on Chatbot Widget Icon to expand pop-up
Test and interact with chatbot to ensure everything is working well
Login to .
Click on "Wonderchat" to open .
โ†— Shopify Store Admin
โ†— Wonderchat App