Quickstart

Five minutes from an empty project to a real form on screen. Pick the tab that matches your stack — the console steps are identical either way.

Before you start

Create a form in the Intunix console and note its slug (a short string like nps_q4).
On that form, switch on Available in Web SDK. Without this the SDK is never sent the form, no matter what your code does.
Copy your public client key from console settings. It starts with pk_.

The client key is public

It ships in your JavaScript bundle and is visible to anyone who views source. That is by design — it only grants permission to fetch SDK-enabled forms and submit responses. Do not store it in a secret manager and do not confuse it with a server API key.

React and Next.js

1. Install

bash

npm install @intunix/react

2. Wrap your app

The provider creates the client, initialises it, and mounts the host component that actually renders forms. Put it high enough that it stays mounted across navigation.

app/layout.tsx

import { IntunixProvider } from '@intunix/react'

const API_KEY = process.env.NEXT_PUBLIC_INTUNIX_CLIENT_KEY!

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <IntunixProvider apiKey={API_KEY}>
          {children}
        </IntunixProvider>
      </body>
    </html>
  )
}

Next.js App Router

IntunixProvider uses hooks, so it cannot live directly inside an async server component. Wrap it in your own 'use client' component and render that from the layout.

3. Show a form

Two ways, and you will usually want both eventually.

Manually, from a button — the form opens on click:

components/FeedbackButton.tsx

'use client'
import { useExperience } from '@intunix/react'

export function FeedbackButton() {
  const { show } = useExperience('nps_q4')

  return (
    <button onClick={() => show()}>
      Give feedback
    </button>
  )
}

Automatically, from its trigger — register it on the pages where it should be allowed to fire:

app/checkout/success/page.tsx

'use client'
import { useRegisterForm } from '@intunix/react'

export default function CheckoutSuccess() {
  // The form now fires by itself when its trigger matches on this page,
  // and unregisters automatically when the component unmounts.
  useRegisterForm('post_purchase_csat')

  return <h1>Thanks for your order</h1>
}

4. Tell the SDK who the user is

Optional, but without it every visitor is anonymous and you cannot target by trait. Call it on login and whenever traits change.

code

'use client'
import { useIdentify, useReset } from '@intunix/react'

const identify = useIdentify()
const reset = useReset()

// on login
identify('user_42', { plan: 'pro', role: 'admin' })

// on logout
reset()

Vue 3 and Nuxt

bash

npm install @intunix/vue

Use the component form if you want the host mounted for you:

App.vue

<script setup lang="ts">
import { IntunixProvider } from '@intunix/vue'
</script>

<template>
  <IntunixProvider :api-key="apiKey">
    <RouterView />
  </IntunixProvider>
</template>

Then in any descendant component:

FeedbackButton.vue

<script setup lang="ts">
import { useExperience, useRegisterForm } from '@intunix/vue'

const { show } = useExperience('nps_q4')

// optional: let this form auto-trigger while this component is mounted
useRegisterForm('post_purchase_csat')
</script>

<template>
  <button @click="show()">Give feedback</button>
</template>

Or the plugin form, if you prefer app-wide installation. You then render <ExperienceHost> once yourself:

main.ts

import { createApp } from 'vue'
import { createIntunix } from '@intunix/vue'
import App from './App.vue'

const intunix = createIntunix({ apiKey: 'pk_live_xxx' })

createApp(App).use(intunix).mount('#app')

Any website — script tag

No build step, no framework. Paste this into <head>. The stub queues any calls made before cx.js finishes loading, so you can call it on the very next line.

index.html

<script>
(function(w,d,s,u){
  w.intunix = w.intunix || function(){ (w.intunix.q = w.intunix.q || []).push(arguments) };
  w.intunix.l = +new Date;
  var js = d.createElement(s), f = d.getElementsByTagName(s)[0];
  js.async = 1; js.src = u;
  f.parentNode.insertBefore(js, f);
})(window, document, 'script', 'https://cdn.intunix.com/sdk/cx.js');

intunix('init', 'pk_live_xxx', { register: ['nps_q4'] });
</script>

Every client method is available as a command string:

code

intunix('identify', 'user_42', { plan: 'pro' });
intunix('track', 'checkout_completed', { value: 99 });
intunix('showForm', 'nps_q4');
intunix('reset');

Verify it works

If nothing appears, work through this in order — it is almost always one of these:

Turn on debug logging: init(key, { debug: true }). The SDK then explains in the console why a form was skipped.
Check the Network tab for GET /sdk/experiences. If the form is missing from the response, the problem is the console toggle or your register list — not your code.
If the form loaded but will not show, you are being blocked by targeting, eligibility, or cadence. Troubleshooting walks through each.

Testing a form repeatedly

Cadence applies to manual showForm() calls too, so a form set to once will open exactly once and then silently stop. While developing, set the form's cadence to always in the console, or clear the SDK's localStorage keys between attempts.

Quickstart

Before you start#

React and Next.js#