Install

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.

<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#

npm install @wolfigs/webnak

React#

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#

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.

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

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

WordPress#

There is an official plugin in the WordPress plugin directory, so you install it the same way you install anything else. No theme editing, no FTP, and no code.

1. 1

   Install and activate

   In wp-admin go to Plugins → Add New, search for Webnak, then install and activate it.

2. 2

   Paste your site key

   Open Settings → Webnak and paste the key from your dashboard. It looks like ilk_….

3. 3

   Enable it

   Leave Data server blank unless you run your own, tick Enabled, and save.

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.