Widgets

Embed ProductBridge feedback widgets into your website or application. Choose from popup, sidebar, inline, custom trigger, iframe, and direct URL embed types.

Collect Feedback Directly in Your Product

ProductBridge widgets let users submit feedback without leaving your website or application. Choose from multiple embed types to match your UI — a floating button, a sidebar panel, an inline form, or a custom trigger. Each widget is configured in Settings > Widget & Embeds.

Embed Types

A floating feedback button appears in the corner of your page. When clicked, it opens a popup form where users can submit feedback.

This is the most popular embed type — it is non-intrusive, always accessible, and requires no changes to your page layout.

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://productbridge.io/sdk/pb-widget.js';
    s.async = true;
    s.onload = function() {
      ProductBridge.init({
        organizationId: 'YOUR_ORGANIZATION_ID',
        position: 'bottom-right',
        theme: 'auto',
        defaultTab: 'feedback',
        buttonColor: '#3B82F6',
        buttonText: 'Feedback',
      });
    };
    document.head.appendChild(s);
  })();
</script>

Configuration options:

Option	Type	Description
`organizationId`	string	Your ProductBridge organization ID (required)
`position`	string	Button position: `bottom-right`, `bottom-left`, `top-right`, `top-left`
`theme`	string	Color theme: `auto`, `light`, `dark`
`defaultTab`	string	Default tab to show: `feedback`, `roadmap`, `changelog`
`buttonColor`	string	Hex color for the floating button
`buttonText`	string	Text displayed on the button

Set theme: 'auto' to match your website's light/dark mode automatically.

Inline Embed

Embed the feedback form directly into your page layout. The widget renders inside a specific container element, making it part of your page content rather than an overlay.

<div id="productbridge-inline"></div>
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://productbridge.io/sdk/pb-widget.js';
    s.async = true;
    s.onload = function() {
      ProductBridge.init({
        organizationId: 'YOUR_ORGANIZATION_ID',
        target: '#productbridge-inline',
        theme: 'light',
      });
    };
    document.head.appendChild(s);
  })();
</script>

Use the target option to specify the CSS selector of the container element where the widget should render.

Custom Trigger

Attach the feedback form to any element on your page — a button, link, or menu item. The form opens when the user clicks your custom trigger element.

<button id="my-feedback-btn">Give Feedback</button>
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://productbridge.io/sdk/pb-widget.js';
    s.async = true;
    s.onload = function() {
      ProductBridge.init({
        organizationId: 'YOUR_ORGANIZATION_ID',
        trigger: '#my-feedback-btn',
        theme: 'auto',
      });
    };
    document.head.appendChild(s);
  })();
</script>

Use the trigger option to specify the CSS selector of your custom button or element.

iFrame Embed

Embed the full ProductBridge feedback experience in an iframe. This gives you the most isolation from your page styles and is useful when you want a fully contained widget.

<iframe
  src="https://productbridge.io/embed/YOUR_ORGANIZATION_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;">
</iframe>

Direct URL

Use a direct link to your ProductBridge feedback page. This is the simplest option — just link to your portal URL from anywhere in your app, help docs, or emails.

https://feedback.productbridge.io/YOUR_ORGANIZATION_SLUG

No script tags or embeds required. Users click the link and land on your branded feedback portal.

The widget can display multiple modules depending on your configuration:

Module	Description
Feedback	The feedback submission form with categories and file attachments
Roadmap	A read-only view of your public roadmap inside the widget
Changelog	Latest product updates and release notes

Set the default module using the defaultTab option, or let users switch between tabs inside the widget.

API Keys

Each widget installation requires an organization ID. You can find your ID and manage API keys in Settings > Widget & Embeds > API Keys. Use different API keys for different environments (development, staging, production).

Your organization ID is public and embedded in client-side code. It is safe to expose — it only grants read/submit access to public-facing features. Sensitive operations require authenticated API keys.

Customization

Customize the widget appearance from Settings > Widget & Embeds:

Button color — Match your brand colors
Button text — Change the label (e.g., "Feedback", "Ideas", "Help")
Position — Place the button in any corner of the screen
Theme — Auto, light, or dark mode
Language — Localize the widget interface
Modules — Choose which tabs to show (Feedback, Roadmap, Changelog)

Preview

Use the Preview tab in Settings > Widget & Embeds to see a live preview of your widget configuration before deploying it to your site.

Was this page helpful?

Last updated today

Built with Documentation.AI