Quickstart

You need two things from your Namakina contact before you start: a landing page id and its publishable key, and a GitHub personal access token with the read:packages scope if you are installing from npm.

Your page's host also has to be on the permitted list for your partner. If it is not, every session is refused with a 403 and the widget never appears — with nothing on the page to say why. Ask for it at the same time as the key.

1. Point npm at the registry

@namakina/landing-page is published to a private GitHub Packages registry, not public npm. Add this to the .npmrc beside your package.json:

@namakina:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

GITHUB_TOKEN is a token issued against your own account, which we then grant read access to the package. Keep it in your environment or your CI secret store — never commit it.

npm install @namakina/landing-page

No build step?

A prebuilt browser bundle is hosted for you at sdk.namakina.com — see option B below. It also ships at the @namakina/landing-page/iife subpath if you would rather host it yourself.

2. Tag the form

Three attributes on the <form> element:

<form
  action="/lead"
  method="post"
  data-nam-landing-page="acme-quote"
  data-nam-key="lp_live_xxxxxxxx"
  data-nam-goal="Get a free, no-obligation quote for protecting your home — a local
                 specialist calls you back within a business day."
>
  <!-- your existing fields, untouched -->
</form>

Attribute	What it is
data-nam-landing-page	The landing page id we registered for this form. The SDK refuses to start without it.
data-nam-key	The publishable key for that page. It is safe in page source.
data-nam-goal	What finishing the form gets the visitor, in their own words, in one sentence. Strongly recommended.

The goal is the visitor's outcome, not your instructions to the agent. What to collect is read off the form itself.

Everything else is optional and covered in Tagging the form.

3. Start it

A. From npm

<script type="module">
  import { init } from '@namakina/landing-page';

  init({
    intakeUrl: 'https://intake.<namespace>.core.namakina.com',
    messagingUrl: 'https://messaging.<namespace>.core.namakina.com',
  });
</script>

init() returns how many tagged forms it took on. It returns 0 and logs one console.warn if either URL or the key is missing — it will not start half-configured.

B. A script tag

For a static page with no build step. The bundle boots itself from Namakina's hosted CDN: it reads its configuration from its own data- attributes and calls init() on DOMContentLoaded, so there is nothing else to write:

<script
  src="https://sdk.namakina.com/landing-page/v1/landing-page.js"
  data-intake-url="https://intake.<namespace>.core.namakina.com"
  data-messaging-url="https://messaging.<namespace>.core.namakina.com"
  defer
></script>

v1 is the current release's compatibility channel, not the package's semver — it moves forward on its own schedule and always matches the wire protocol your namespace speaks. It exposes the same functions on window.NamakinaLandingPage if you need them later.

4. Check it

Load the page. Within a second or so the fields should give way to a short conversation.

If nothing happens, the console says which of the three it was, and the network tab separates a bad key from a bad origin in one request. Troubleshooting has the table.

To force a side of the holdout while testing, append ?nam_arm=assist or ?nam_arm=control. The override is honoured only where ALLOW_ARM_OVERRIDE is set, which a deployed namespace cannot do, so it does nothing in production and cannot skew the measurement.

Where to go next

• Tagging the form — every form-level attribute
• The fields — help text, pictures on answers, locking a field
• Layouts — inline, or a full-height panel that docks back at the end
• Theming — what is sampled from your page, and what you can override