Installing the widget | Yokaify Docs

Platform-specific walkthroughs

This page is the quick overview. For step-by-step instructions with platform gotchas, use the dedicated guide for your stack:

Then run the verification checklist to confirm everything is live.

The snippet

Your dashboard gives you a one-line script tag with your site key already filled in. Paste it just before the closing </body> tag of your shared template — that's the entire installation.

data-site-key (required) — your site's public key from the dashboard.
data-api-base (optional) — override the API endpoint. You normally don't need this.

Add the snippet once per page. Loading it twice will try to mount two mascots.

Shopify

In your admin, go to Online Store → Themes → Edit code, open theme.liquid, and paste the snippet just before </body>. It applies to every page of your storefront.

WordPress / WooCommerce

Use a header-and-footer code plugin (or your theme's footer settings) and paste the snippet into the footer area so it loads on every page.

Webflow

Go to Project Settings → Custom Code, paste the snippet into the Footer Code field, and publish.

Custom HTML

Paste the snippet before the closing </body> tag of your template. That's it.

React / Next.js and other SPAs

Add the script once in your root layout. In Next.js, use the next/script component with strategy="afterInteractive". Yokaify patches the History API, so client-side route changes are detected automatically — you don't need to re-initialize it on navigation.