PPulseBack to Home
Back to Docs

Widget Guide

Embed the Pulse widget directly in your application to show changelogs, collect feedback, and display announcements to your users.

Quick Start

Add the Pulse widget to any web page with a single script tag. Place it just before the closing </body> tag:

<script
  src="https://pulse.g8n.ai/api/widget/widget.js"
  data-pulse-project="YOUR_PROJECT_SLUG"
></script>

Replace YOUR_PROJECT_SLUG with your project's slug from the Pulse dashboard. If you are running a self-hosted instance, replace the script URL with your own domain (e.g. https://your-domain.com/api/widget/widget.js).

Shadow DOM Isolation

The Pulse widget renders inside a Shadow DOM, which means it won't interfere with your existing styles and your styles won't affect the widget. This ensures a consistent look and feel regardless of your application's CSS.

What the Widget Includes

Once embedded, the widget provides your users with:

  • Changelog— A chronological feed of your project's updates, auto-generated from your GitHub activity
  • Feedback— A form for users to submit feature requests, bug reports, and general feedback
  • Announcements— Banners and modals for important updates and notifications
  • Roadmap— A view of planned, in-progress, and completed features with upvoting

Configuration Options

You can customize the widget behavior by adding data attributes to the script tag:

<script
  src="https://pulse.g8n.ai/api/widget/widget.js"
  data-pulse-project="YOUR_PROJECT_SLUG"
  data-pulse-position="bottom-right"
  data-pulse-theme="dark"
  data-pulse-features="feedback,changelog,announcements"
  data-pulse-user="user-123"
></script>

data-pulse-project

Required.Your project's slug from the Pulse dashboard. The widget will not load without this attribute.

data-pulse-position

Controls where the widget button appears. Options: bottom-right, bottom-left, top-right, top-left. Default: bottom-right.

data-pulse-theme

Controls the color theme. Options: light, dark. Default: light.

data-pulse-features

A comma-separated list of features to enable. Options: feedback, changelog, announcements. Default: feedback,changelog,announcements (all enabled).

data-pulse-user

An optional user identifier for tracking feedback and changelog views per user. When set, the widget tracks which changelog entries a user has seen and sends the ID with feedback submissions.

data-pulse-api

Override the API base URL. By default, this is derived from the script's src URL. Only needed if your API is hosted at a different location than the widget script.

Framework Integration

For React, Next.js, or other SPA frameworks, you can load the widget script dynamically:

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://pulse.g8n.ai/api/widget/widget.js";
  script.setAttribute("data-pulse-project", "YOUR_PROJECT_SLUG");
  script.async = true;
  document.body.appendChild(script);
  return () => {
    document.body.removeChild(script);
  };
}, []);

Need Help?

If you have questions about widget integration, reach out at support@g8n.ai.