Loopana

Quickstart

Get Loopana running in your app in under 5 minutes.

React

1. Install the SDK

npm install @loopana/react

2. Add the Provider

Wrap your app with the LoopanaProvider. You'll need your API key from Settings > API Keys in the dashboard.

import { LoopanaProvider } from "@loopana/react"

function App() {
  return (
    <LoopanaProvider
      apiKey="pk_live_xxx"
      userId={user.id}       // optional, for targeting and A/B testing
      locale="en"            // optional, for translated content
    >
      <YourApp />
    </LoopanaProvider>
  )
}

3. Display a Message

Use the useSlot hook to fetch messages for a slot:

import { useSlot } from "@loopana/react"

function Banner() {
  const { message, dismiss } = useSlot("homepage-banner")

  if (!message) return null

  return (
    <div className="banner">
      <h2>{message.title}</h2>
      {message.description && <p>{message.description}</p>}
      {message.url && (
        <a href={message.url}>
          {message.actionLabel ?? "Learn more"}
        </a>
      )}
      <button onClick={dismiss}>Dismiss</button>
    </div>
  )
}

4. Create a Slot in the Dashboard

  1. Go to Slots and click Create Slot
  2. Enter the name — it must match the string in useSlot("...")
  3. Choose a mode (Stack, A/B Test, or Random)
  4. Add a message to the slot and Publish it

That's it — your app will display the message.

Using Events

If you need different messages for different contexts within the same slot, pass an event filter:

import { useSlot } from "@loopana/react"

function TokenWarning() {
  const { message } = useSlot("notifications", { event: "low-token" })

  if (!message) return null

  return <div className="warning">{message.title}</div>
}

Create a slot with events in the dashboard, then assign each message to an event.

Other Frameworks (Vue, Svelte, vanilla JS)

Install the JS client:

npm install @loopana/js

import { LoopanaClient } from "@loopana/js"

const client = new LoopanaClient({ apiKey: "pk_live_xxx" })
const messages = await client.fetchAll("en")

const banner = messages.get("homepage-banner")
if (banner) {
  const msg = banner.messages[0]
  console.log(msg.title, msg.description)
}

Server-Side (Node.js)

Install the Node client:

npm install @loopana/node

import { LoopanaClient } from "@loopana/node"

const client = new LoopanaClient({ apiKey: "pk_live_xxx" })
const messages = await client.fetchAll("en")

Use this in Next.js server components, API routes, or any Node.js environment.

Next Steps