Skip to main content
All CollectionsIntegrationsEmbed & APIEmbed
Embed Installation Instructions
Embed Installation Instructions

Installation instructions for the LaunchNotes Embed (v2 2024)

Teddy Fischer avatar
Written by Teddy Fischer
Updated over a month ago

Installing the LaunchNotes Embedded Widget on Your Website or App

The LaunchNotes embedded widget integrates product updates seamlessly into your website or app. It can be set up as either an inline element or a popup drawer, with an optional unread indicator to capture user attention.

Steps to Install the Embedded Widget

  1. Copy and paste the embed code: Obtain the embed code from the LaunchNotes Management Portal and insert it just before the closing </body> tag of your website or app’s HTML.

  2. Add the trigger or target attribute: Include data-target="ln-embed" as an attribute to the HTML element that will either trigger the popup or display the inline embed.

Detailed Installation Instructions

  1. Access the Embed Settings

    1. Log in to your LaunchNotes Management Portal.

    2. Navigate to Settings → API, Embed & RSS → Embed.

  2. Configure the Embed

    1. Set up the Title and Subtitle for your widget, and click Save.

  3. Copy the Embed Code

    1. Choose the appropriate embed type (Popup or Inline) and click Copy code.

      1. Note: The embed codes for Popup and Inline are different.

  4. Add the Embed Code to Your HTML

    1. For the Popup Embed:

      1. Paste the code at the bottom of your page or app, just inside the closing <body> tag.

    2. For the Inline Embed:

      1. Paste the code in the <body> section where you want the widget to appear.

  5. Set Up the Trigger or Target Element

    1. Add data-target="ln-embed" to the HTML element that will either trigger the popup or be replaced with the inline widget.

    2. This element will also display the optional unread indicator if configured.

  6. Optional: Add a Unique User Identifier

    1. If you want to enable the unread indicator, update the anonymous-user-id="YOUR_ANON_ID" attribute with a unique, consistent identifier for each user, such as their primary key ID or email address.

    2. For added security, consider hashing this value before using it.

    3. Note: This unique user identifier is required for the unread indicator to function.

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.

Did this answer your question?