Install

Add one script tag, or the npm package, to the site you already ship.

One script tag, or the npm package if you would rather not hand-edit HTML. Both do the same thing: load the connector with your site key.

The script tag#

Put it in <head>, or just before </body>. Placement does not change behaviour; the loader waits for the DOM either way.

Your page template

<script src="https://cdn.wolfigs.com/webnak.js" data-site="ilk_your_site_key"></script>

Your site key is in the dashboard under the site’s Install settings. It is public by design: it identifies the site in every visitor’s page, and it grants nothing on its own.

The npm package#

Terminal

npm install @wolfigs/webnak

React#

app/layout.tsx

import { Webnak } from "@wolfigs/webnak/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Webnak siteKey="ilk_your_site_key" />
      </body>
    </html>
  );
}

Vue#

main.ts

import { WebnakPlugin } from "@wolfigs/webnak/vue";

createApp(App).use(WebnakPlugin, { siteKey: "ilk_your_site_key" });

There is also a useWebnak(options) composable if you would rather install it for the lifetime of one component.

Anything else#

initWebnak(options) injects the script and returns a function that removes it again.

main.js

import { initWebnak } from "@wolfigs/webnak";

const remove = initWebnak({ siteKey: "ilk_your_site_key" });

WordPress#

Install the Webnak plugin, then paste your site key into Settings → Webnak. No theme editing and no code.

Check it worked#

The dashboard’s Verify installation button loads one of your pages and reports what it found. It reads the live page rather than trusting the snippet you copied, so it catches a tag that never made it to production.