For developers
Load the script once for the whole app. Client-side navigation is supported: when the URL changes, widgets re-check their display rules, and stories blocks fill in as soon as they appear on the page.
Paste the line into index.html right before the closing </body> tag.
<script src="https://swoopkit.app/loader.js" data-site="SITE_KEY" async></script>Add the script inside <body> in your root app/layout.tsx.
import Script from "next/script";
<Script src="https://swoopkit.app/loader.js" data-site="SITE_KEY" strategy="afterInteractive" />Add the script in nuxt.config.ts.
app: {
head: {
script: [{ src: "https://swoopkit.app/loader.js", "data-site": "SITE_KEY", async: true, tagPosition: "bodyClose" }],
},
},You don't need this for the button, banners or floating stories. Each stories widget has its own block code, you'll find it in the editor under Publish.
In your JSX or component template. Don't give it children: the script adds the content.
<div data-vzhuh="WIDGET_ID" />Open your site in a new tab. Once someone visits a page with the code, your Swoopkit dashboard shows a green “Code installed” mark.
Write to our support team and we'll help or do it for you