Install Widgets

How to get there: Click Widgets in the sidebar (under Share) → click a board card or pick another widget kind.

ProductLift widgets let your users interact with your boards, submit feedback, or see your changelog without leaving your app or website. With single sign-on, they don't even need to log in to ProductLift.

You can run multiple widgets side-by-side, for example a roadmap embed and a changelog popup.

Widget kinds

When you open the Widgets page, the create flow is board-first:

• Embed a board -- the top section shows your existing boards as cards. Click any board to instantly create an embed widget for it. Embeds display the board inline on your page.
• More options -- below the board cards, three other widget kinds are available:
  • Board Sidebar -- the board slides in from the side of the page when triggered.
  • Feedback Form -- a popup or sidebar form for users to submit feedback or bug reports.
  • What's New Popup -- a compact changelog popup that surfaces recent updates.

The list page shows your existing widgets as clean rows; click a row to open it.

Editing a widget

Each widget's edit page has three tabs (in this order):

1. Installation -- the default landing tab. Pick your platform, copy the embed code, and follow per-platform instructions.
2. Settings -- change widget name, board, header title, post types, capture options (console log, screenshot, system info), appearance toggles (navigation menu, board bar, breadcrumbs), and default status/category.
3. Preview -- see a live preview of how the widget will look.

Per-platform installation

On the Installation tab, the Where will you install this widget? picker has presets for the most common platforms:

• HTML / JavaScript (default if you don't pick anything else)
• WordPress
• Wix
• Squarespace
• Webflow
• Framer

A "More platforms" group adds:

• Shopify
• BigCommerce
• React
• Vue.js
• Next.js

Each platform shows a tailored hint and (for embed widgets) the simplest install method, usually an iframe code block with an inline Copy button. For sidebar/popup widgets the page shows the SDK trigger snippet.

For embed widgets you can also expand Install via SDK to use the JavaScript SDK instead of an iframe (gives you SSO, dynamic resizing, and more control).

Sidebar widget

Sidebars slide in from the side of the page on demand. Add a trigger button or link, and the widget opens over your current page.

Embed widget

Embed widgets render the board inline on a page of your choice. Just paste the iframe (or SDK) code into the area where you want the board to show up.

You can fully customize the embedded design with Custom (S)CSS.

Single sign-on

With single sign-on (SSO), your users don't have to create a separate ProductLift account. The widget recognizes them automatically.

The Installation tab has a collapsible Single Sign-On section with three options:

• WordPress (recommended for WordPress sites) -- drop a snippet into your theme's functions.php or a custom HTML plugin.
• JavaScript SDK -- the easiest option for most sites: it generates the SSO token client-side. Add data-productlift-link to your links/iframes for it to attach.
• Server-side JWT token -- generate a token on your server and pass it as ?sso=TOKEN on the SDK URL or any link.

See the Single Sign-On guide for the full reference.

Unread badge for changelog widgets

When a widget points to a changelog board and the user is identified via SSO, ProductLift can mark the trigger element when there are new posts the user hasn't seen yet. The Installation tab shows an Unread badge link with a copy-able starter CSS snippet. Paste it into your stylesheet to render a red dot on the trigger; the dot clears once the user opens the changelog.

See Changelog widgets for the full description.

Installation in Vue

Below is an example of how you can add a ProductLift widget in a Vue 2 app using the SDK with a server-issued SSO token:

export default {
    data: () => ({
        productlift_sso_token: null,
    }),
    async created() {
        this.$http.get('/user/' + this.$auth.user().id + '/productlift_token')
            .then(({data}) => {
                this.productlift_sso_token = data.token

                let ProductLiftScript = document.createElement('script')
                ProductLiftScript.src = 'https://your-portal.productlift.dev/widgets_sdk?sso=' + this.productlift_sso_token
                ProductLiftScript.defer = true;
                document.head.appendChild(ProductLiftScript)
            })
            .catch(error => {
                console.log(error.response)
            })
    },
}

Installation in React

Below is an example of how you can add ProductLift widgets in React (thanks to Mike!).

function useProductLift() {
    async function init_widgets() {
        return new Promise(async (resolve) => {
            const { data } = await fetch('/productlift/widgets', { method: "POST" });
            let ProductLiftScript = document.createElement('script');
            ProductLiftScript.src = data;
            ProductLiftScript.defer = true;
            document.head.appendChild(ProductLiftScript);
            resolve(true);
        });
    }
    return init_widgets;
}

function FeedbackTrigger() {
    const [ready, set_ready] = useState(false);
    const init_widgets = useProductLift();

    function init() {
        init_widgets().then(() => set_ready(true));
    }

    useEffect(() => { init(); }, []);

    if (!ready) return null;

    return <a href="#" data-productlift-sidebar="WIDGET_UUID">Open Widget</a>;
}