Advanced

Embed your feedback board in an iframe

Embed your full feedback board directly in your website with URL syncing and seamless authentication.

Overview

The iframe embed allows you to display your complete UserJot feedback board within your own website. Unlike the floating widget, this gives users a full-page experience without leaving your site.

Key features:

• Full feedback board experience embedded in your site
• URL syncing between your site and the embed
• Seamless user authentication
• Works with identified users

Basic setup

First, add the UserJot SDK to your page. See the Quick Start guide for installation instructions.

1. Add the container

Add a container element where you want the embed to appear:

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

2. Create the embed

After initializing the SDK, create the embed:

window.uj.embed();

That’s it! The embed will load your feedback board in the container.

Configuration options

Customize the embed behavior:

window.uj.embed({
  container: '#my-container', // CSS selector or element (default: '[data-userjot-embed]')
  path: '/roadmap', // Initial path to load (default: '/')
  theme: 'light', // Theme: 'auto', 'light', or 'dark'
  basePath: '/feedback' // Enable URL syncing (optional)
});

Options explained

URL syncing

URL syncing keeps your website’s URL in sync with the embed’s navigation. This allows users to share direct links to specific posts or sections.

Enable URL syncing

Set the basePath option to your desired URL path:

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

Now when users navigate within the embed:

• Clicking a post → URL becomes /feedback/post/123
• Opening roadmap → URL becomes /feedback/roadmap
• Opening changelog → URL becomes /feedback/updates

Server configuration

For URL syncing to work with direct links and page refreshes, configure your server to serve the embed page for all paths under your base path.

Example: If basePath is /feedback, configure your server so that /feedback, /feedback/roadmap, /feedback/post/123, etc. all serve the same page containing the embed.

User authentication

Users can be authenticated in the embed using identify().

Identify before embed

window.uj.init('YOUR_PROJECT_ID');

// Identify user first
window.uj.identify({
  id: 'user_123',
  email: 'john@example.com',
  firstName: 'John'
});

// Then create embed (user will be logged in)
window.uj.embed();

Identify after embed

You can also identify users after the embed is created:

window.uj.init('YOUR_PROJECT_ID');
window.uj.embed();

// Later, when user logs in to your app
window.uj.identify({
  id: 'user_123',
  email: 'john@example.com'
});

The embed will automatically update to show the logged-in state.

Logout

When users log out of your application:

window.uj.identify(null);

Troubleshooting

Embed not loading

• Ensure init() is called before embed()
• Check that the container element exists in the DOM
• Verify your project ID is correct

Authentication not working

• Call identify() with a valid user ID
• For secure identification, use signed tokens (see Auto-login guide)

URL syncing not working

• Ensure basePath is set in embed options
• Configure your server to handle catch-all routes for the base path
• Check browser console for any errors