Skip to content
rolloutrolloutrollout docs

Quickstart

  1. Install the SDK.

    Terminal window
    npm i @rollout/js

  2. Get a publishable key and allow your origin. In the dashboard, open your project’s Settings → API keys. Create a publishable key (pk_live_…) and add your app’s origin under Allowed origins, for example https://app.example.com. Browsers can only use the key from those origins.

  3. Create a signing secret. Under Settings → Identity, generate a signing secret. Keep it on your server; it proves which user a request is for.

  4. Issue identity tokens from your server. Add an endpoint that returns a short-lived token for the signed-in user:

    // Node, with the `jose` package
    import { SignJWT } from 'jose'
    

    const secret = new TextEncoder().encode(process.env.ROLLOUT_SIGNING_SECRET)
    

    app.get('/api/rollout-token', async (req, res) => {
      const token = await new SignJWT({ org: req.user.orgId })
        .setProtectedHeader({ alg: 'HS256' })
        .setSubject(req.user.id)
        .setExpirationTime('1h')
        .sign(secret)
      res.type('text/plain').send(token)
    })

    See Identity for all claims, and for using your auth provider’s tokens instead.

  5. Add the widget with a bundler or a script tag, as shown below.

import { defineFeedElement } from '@rollout/js/ui'


defineFeedElement() // registers <rollout-feed>


const feed = document.querySelector('rollout-feed')
feed.token = () => fetch('/api/rollout-token').then((r) => r.text())
<rollout-feed project-key="pk_live_…" api-url="https://api.rollout.so" theme="auto"></rollout-feed>

The widget shows a bell with an unread badge. Clicking it opens the feed; opening an announcement marks it read.

Next steps

Section titled “Next steps”