Add LaunchNotes to your website or app so customers can access announcements, roadmap items, and ideas without leaving your product. The embed appears either inline as part of your page or as a popup drawer triggered by a button or link.
Embed main features:
Announcements | ✓ |
Roadmap items | ✓ |
Ideas | ✓ |
Feedback collection | ✓ |
Category segmentation | Coming soon |
Pop-up & inline style | ✓ |
CSS customization | Advanced |
Installation | Simple copy/paste snippet |
Installation steps:
Get your embed code
Open your LaunchNotes Management Portal
Navigate to Settings → API, Embed & RSS
Click Embed tab
Configure your widget's Title and Subtitle, then click Create
We automatically will generate a token for you that will be included in your embed code.
Scroll down and select if you'd like either a Popup or Inline embed style type
Click Copy code
Note: The embed codes for Popup and Inline are different
Add embed code to your HTML
For the Popup Embed:
Paste the code at the bottom of your page or app, just inside the closing
<body>tag.
For the Inline Embed:
Paste the code in the
<body>section where you want the widget to appear.
Set Up the Trigger or Target Element
Add
data-target="ln-embed"to the HTML element that will either trigger the popup or be replaced with the inline widget.This element will also display the unread indicator.
Optional: Add a Unique User Identifier
If you want to utilize a custom identifier for viewers, update the
data-viewer-id="YOUR_ANON_ID"attribute with a unique, consistent identifier for each user, such as their primary key ID or email address.For added security, consider hashing this value before using it.
Note: This unique user identifier is not required for the unread indicator to function.
Optional: Add custom CSS
To add custom CSS to your embed, navigate to Settings → Customize Page → Custom HTML & CSS
Scroll down to the bottom of the page and the last two boxes have areas to add Custom Embed CSS and Custom Embed Header.
View this video for a walkthrough of setting the embed up on a webpage:
Example Embed Snippet
<launchnotes-embed
data-id="emb_app_YOUR_EMBED_ID"
data-token="YOUR_EMBED_TOKEN"
data-embed-type="popup"
id="ln-embed"
data-viewer-id="YOUR_ANON_ID"
data-unread-indicator-id="YOUR_ANON_ID"
></launchnotes-embed>
<script
id="ln-embed-script"
src="https://embed.launchnotes.io/embed_v2/latest/embed.js"
type="text/javascript"
></script>
Component Parameters
data-viewer-id // Anonymous viewer ID
data-id // The unique html element ID for the embed
data-embed-type // Version of embed: Popup or Inline
data-token // API token
data-unread-indicator-id // Unique ID for user to get unread indicator
data-target // The HTML element ID for the click target
React or Dynamic DOM Updates
If your website or app uses React (or similar frameworks) that dynamically update the DOM, an additional step is necessary to ensure the embed works correctly, particularly for the unread indicator and click handlers.
The embed script automatically attaches a click event to the target you set with the data-target=ln-embed attribute. However, if you use React or something similar that dynamically updates the DOM, you can use our toggle function that is provided through window.launchnotesEmbed.togglePanel() to handle opening and closing the panel. We still require the data-target=ln-embed to attach the unread indicator.
Additional Notes
Content Reflected in the Widget: The embedded widget dynamically displays content from your LaunchNotes Audience Page, including Announcements, Roadmap items, and Ideas.
Unread Indicator Considerations: If your application dynamically updates the DOM, ensure that the unread indicator’s unique user identifier (anonymous-user-id) is retained and the embed container persists. Additional testing in production mode may be required to validate proper functionality in your environment.
