Iframe embed

Use the iframe embed when you want the full public UserJot experience inside your own page instead of the floating widget launcher.

This is the better fit when you want:

Before you start

The embed works through the browser SDK, so load the SDK and call init(...) first.

Unlike the floating widget, the embed needs a real container with an explicit height. The iframe fills that container.

<div
  data-userjot-embed
  style="width: 100%; min-height: 720px;"
></div>

Basic setup

Initialize the SDK, then create the embed inside onReady:

<script>window.$ujq=window.$ujq||[];window.uj=window.uj||new Proxy({},{get:(_,p)=>(...a)=>window.$ujq.push([p,...a])});document.head.appendChild(Object.assign(document.createElement('script'),{src:'https://cdn.userjot.com/sdk/v2/uj.js',type:'module',async:!0}));</script>
<script>
  window.uj.init('YOUR_PROJECT_ID', {
    onReady: () => {
      window.uj.embed();
    }
  });
</script>

Calling embed() before initialization finishes can fail, so onReady is the safe default.

Embed options

const embed = window.uj.embed({
  container: '#feedback-embed',
  path: '/roadmap',
  theme: 'light',
  basePath: '/feedback',
  onReady: () => {
    console.log('Embed ready');
  },
  onError: (error) => {
    console.error('Embed failed:', error.message);
  }
});

Options

Programmatic control

embed() returns a controller:

const embed = window.uj.embed();
 
embed?.navigate('/updates');
embed?.navigate('/roadmap');
embed?.destroy();

You can also tear down the current embed globally:

window.uj.destroyEmbed();

URL syncing

If you set basePath, the parent page URL stays in sync with navigation inside the embed.

window.uj.embed({
  basePath: '/feedback'
});

Examples:

Your app or site must serve the same embed page for requests under that path. For example, if you choose /feedback, your router should send /feedback/* to the page that contains the embed.

Identification and authentication

The embed works with identify(...), just like the widget:

window.uj.init('YOUR_PROJECT_ID', {
  onReady: () => {
    window.uj.identify({
      id: 'user_123',
      email: 'john@example.com'
    });
 
    window.uj.embed();
  }
});

If the user logs in later, you can identify them after the embed already exists:

window.uj.identify({
  id: 'user_123',
  email: 'john@example.com',
  signature: 'SERVER_GENERATED_SIGNATURE'
});

That lets the embed pick up the authenticated state without recreating it.

When to use embed vs widget

If you only need links to your public board, roadmap, or updates pages, use /support/share-your-board instead.