Official embed examples for Qply — the AI-powered live chat widget for Shopify, WordPress, Webflow, and any website.
🚀 New here? Get started with Qply free →
- Plain HTML / any website
- Qply for Shopify
- Qply for WordPress
- Qply for Webflow
- Qply with React
- Qply with Next.js
- Qply with Vue
Paste this snippet before the closing </body> tag on any page where you want the Qply chat widget to appear:
<!-- Qply Live Chat Widget -->
<script>
(function(w,d,s,o){
w.QplyConfig = { siteKey: 'YOUR_SITE_KEY' };
var j = d.createElement(s); j.async = true; j.src = 'https://qply.io/widget.js';
var f = d.getElementsByTagName(s)[0]; f.parentNode.insertBefore(j, f);
})(window, document, 'script');
</script>Replace YOUR_SITE_KEY with the key from your Qply dashboard.
- In your Shopify admin, go to Online Store → Themes → Edit code
- Open
layout/theme.liquid - Paste the snippet above just before
</body> - Save
The Qply widget will now appear on every page of your store.
📘 Full Shopify guide on Qply.io →
Option A — using a code-snippets plugin:
Install Code Snippets (or similar) and add the Qply snippet as a footer snippet.
Option B — adding to your theme directly:
In wp-content/themes/your-theme/footer.php, paste the Qply snippet before </body>:
<?php // Qply Live Chat Widget ?>
<script>
(function(w,d,s){
w.QplyConfig = { siteKey: 'YOUR_SITE_KEY' };
var j = d.createElement(s); j.async = true; j.src = 'https://qply.io/widget.js';
var f = d.getElementsByTagName(s)[0]; f.parentNode.insertBefore(j, f);
})(window, document, 'script');
</script>📘 Full WordPress guide on Qply.io →
- In your Webflow project settings, go to Custom Code
- Paste the Qply snippet into the Footer Code field
- Publish your site
📘 Full Webflow guide on Qply.io →
import { useEffect } from 'react';
export function QplyWidget({ siteKey }) {
useEffect(() => {
window.QplyConfig = { siteKey };
const script = document.createElement('script');
script.src = 'https://qply.io/widget.js';
script.async = true;
document.body.appendChild(script);
return () => { document.body.removeChild(script); };
}, [siteKey]);
return null;
}
// Usage:
// <QplyWidget siteKey="YOUR_SITE_KEY" />In app/layout.tsx (App Router):
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script id="qply-widget" strategy="afterInteractive">
{`
window.QplyConfig = { siteKey: 'YOUR_SITE_KEY' };
(function(d,s){
var j = d.createElement(s); j.async = true; j.src = 'https://qply.io/widget.js';
d.body.appendChild(j);
})(document, 'script');
`}
</Script>
</body>
</html>
);
}<script setup>
import { onMounted, onUnmounted } from 'vue';
const props = defineProps({ siteKey: String });
let script = null;
onMounted(() => {
window.QplyConfig = { siteKey: props.siteKey };
script = document.createElement('script');
script.src = 'https://qply.io/widget.js';
script.async = true;
document.body.appendChild(script);
});
onUnmounted(() => { if (script) document.body.removeChild(script); });
</script>Qply is an AI live chat platform built for small businesses. We help Shopify, WordPress, and Webflow stores convert more visitors with AI replies, real-time messaging, and a mobile-friendly agent dashboard — all for a fraction of the cost of enterprise chat tools.
- 🌐 qply.io
- 📘 Documentation
- 🐦 X / Twitter
- 💬 Support
MIT — feel free to adapt these snippets for your own integrations.