Skip to main content

In App Embed Installation Instructions (v2)

Display product updates directly in your application

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

✓

Pop-up & inline style

✓

CSS customization

Advanced

Installation

Simple copy/paste snippet

Installation steps:

  1. Get your embed code

    1. Open your LaunchNotes Management Portal

    2. Navigate to Settings → In App Embed

    3. Configure your widget's Title and Subtitle, then click Create

    4. We automatically will generate a token for you that will be included in your embed code.

    5. Scroll down and select if you'd like either a Popup or Inline embed style type

    6. Click Copy code

      Note: The embed codes for Popup and Inline are different

  2. Add 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.

  3. 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 unread indicator.

  4. Optional: Target Specific Categories

    Show only announcements from certain categories. There are two ways to set this up:

    1. For every embed: In Settings → In App Embed, toggle Categories to ON and select the categories.

    2. For a specific page: Add data-categories to your embed code. For example, to show only billing updates on your billing page, use data-categories="billing".

    data-categories takes a comma-separated list of category slugs, like "api,mobile". Use the API slug column on the Categories page, not the category's display name.

    How the filter works:

    • The embed shows announcements that have any of the listed categories.

    • The unread indicator only counts announcements that match the filter.

    • Only announcements are filtered. Roadmap items and Ideas are not filtered.

    • If you also set categories in Settings, data-categories can only narrow that list. It can't add categories back.

    • Slugs that don't match a category are ignored. If none of the slugs match, the embed won't show any announcements.

    Coming from v1? v1 used a JSON array ('["api","mobile"]'). v2 uses a plain comma-separated list ("api,mobile").

  5. Optional: Add a Unique User Identifier

    1. 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.

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

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

  6. Optional: Add custom CSS

    1. To add custom CSS to your embed, navigate to Settings → In App embed and scroll to the bottom of the page.

    2. 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"
data-categories="api,mobile"
></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 // Your embed ID (starts with emb_app_)
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-categories // Optional. Comma-separated category slugs, e.g. "api,mobile"
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.

You can also change data-categories after the page loads, for example when a user moves to a different part of your app. The embed picks up the new categories without a page reload.

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.

Related Articles
Did this answer your question?