How to Embed AI Chat in Shopify, WordPress, Webflow, and Framer
Complete copy-paste recipes for embedding the SiteMind AI assistant in Shopify, WordPress, Webflow, Framer, Wix, Squarespace, React, and Next.js in 2 minutes.
What you will achieve
- Live AI assistant widget running on your website in under 2 minutes
- Zero style conflicts thanks to Shadow DOM encapsulation
- Fully responsive chat on mobile and desktop devices
Prerequisites
- Your SiteMind Widget ID from Dashboard > Install
- Admin access to your CMS or website template
Shopify Installation (Theme Liquid or App Embed)
In Shopify Admin, go to Online Store > Themes > Edit Code. Open `layout/theme.liquid`, scroll to the bottom, and paste the SiteMind script snippet right before the `</body>` tag. Click Save.
<!-- SiteMind Shopify Embed -->
<script
src="https://sitemind.tech/widget.js"
data-widget-key="YOUR_WIDGET_KEY"
async
></script>WordPress Installation (Header & Footer Scripts / Elementor)
In WordPress Admin, install any header/footer plugin (e.g. WPCode) or open Theme File Editor > `footer.php`. Paste the SiteMind snippet before `</body>` and save. Alternatively, add an HTML block in Elementor or Divi global footer templates.
<script
src="https://sitemind.tech/widget.js"
data-widget-key="YOUR_WIDGET_KEY"
async
></script>Webflow Installation (Project Custom Code)
In Webflow, open Project Settings > Custom Code. In the "Footer Code" (Before </body>) text area, paste the SiteMind snippet. Click Save Changes and Publish your site.
Framer / Next.js / React Installation
For Framer, open Site Settings > General > Custom Code > End of <body>. For Next.js App Router, add the script to your root `layout.tsx` using `next/script`.
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://sitemind.tech/widget.js"
data-widget-key="YOUR_WIDGET_KEY"
strategy="lazyOnload"
/>
</body>
</html>
);
}Frequently asked questions
Related Technical Recipes
How to Migrate from Chatbase to SiteMind in 5 Minutes (Zero Downtime)
Tired of Chatbase dynamic model multipliers and expensive branding removal fees? Here is how to switch your website chatbot to SiteMind in under 5 minutes with zero customer interruption.
How to Prevent AI Chatbot Hallucinations with Custom Knowledge and Q&A Overrides
Eliminate made-up prices and false policies. Master the exact grounding controls that ensure your AI assistant answers truthfully or admits when info is missing.