Embedding pages inline

Embeds render your UserJot pages inside your own layout instead of a floating widget. Use them when you want a full feedback page, roadmap, or changelog as part of your site or app.

Embeds cover your public pages: the board, roadmap, and changelog. The Messages surface from Conversations lives in the widget only and cannot be embedded.

Basic setup

Add a container element to your page:

<div data-userjot-embed style="height: 700px"></div>

Then create the embed:

uj.init('YOUR_PROJECT_ID', { widget: false });
uj.createEmbed();

The embed fills its container, so size the container with your own CSS.

widget: false turns off the floating widget. You can also keep both: the embed and the widget work independently.

Options

uj.createEmbed({
  container: '#my-container', // selector or element, default '[data-userjot-embed]'
  path: '/roadmap',           // which page to show first, default '/'
  theme: 'auto'               // 'auto', 'light', or 'dark'
});

Controlling an embed

createEmbed returns a controller:

const embed = uj.createEmbed({ path: '/' });
 
embed.navigate('/roadmap'); // change the page
embed.destroy();            // remove the embed

Syncing with your URL

If the embed should feel like part of your app's routing, pass basePath. The embed then keeps your browser URL in sync as the user moves around:

uj.createEmbed({
  container: '#feedback-page',
  basePath: '/feedback'
});

With this setup, when a user opens a post inside the embed, your URL becomes /feedback/board/p/some-post, and loading that URL directly opens the embed on that post.

For deep links to work, your router must serve the embed page for the base path and everything under it. With basePath: '/feedback', both /feedback and /feedback/* should render the page that calls createEmbed.

Identity flows in automatically

If you call identify, every embed picks up the identity automatically, including embeds created later. On logout, embeds are signed out too. You do not need to wire anything.

One requirement: signing users into embedded pages runs through Automatic login, so it has to be enabled in your workspace settings. Without it, the server rejects the sign-in exchange and the embed loads signed out, even with a valid signed identity.

uj.identify({ token: 'TOKEN_FROM_YOUR_SERVER' });
uj.createEmbed(); // this embed starts already signed in

Multiple embeds

You can create more than one embed on the same page, each with its own container and page:

uj.createEmbed({ container: '#board', path: '/' });
uj.createEmbed({ container: '#roadmap', path: '/roadmap' });

Embed or widget?

Many products use both: the widget across the app, and an embedded board on a dedicated page.