The LaunchNotes embed provides you with an additional channel to share announcement updates with your users. It allows you to easily integrate LaunchNotes notifications into any web app or relevant web property.
We currently offer two types of embedded applications; the Pop-up embed, and the inline embed. Both applications leverage the LaunchNotes public API.
💡 This article will cover the Pop-up Embed, for information on the Inline Embed,
visit the Inline Embed help article.
Pop-up embeds are a great way of showing product updates to your users within your app.
The pop-up embed is hidden by default and can be toggled by clicking an element in your application. When clicked, a list of your most recent Announcements will be shown.
When an announcement card is selected within the embed, the full announcement will show in a new window:
The pop-up embed supports an unread indicator. This takes the form of an icon or mark next to the toggle selector to indicate that there are unread updates on the widget. This will disappear once the widget is clicked and opened.
The second way the unread indicator works is by highlighting the individual announcements in the widget that have not been read -- these will have bolded text and a darkened background. This highlight will only disappear when the announcement itself is clicked into.
First, head to Settings on the Admin nav bar, then API & Embed, where you'll be able to create a new published API token. We recommend creating a specific API token for each place you intend implement the embed.
Next, add the following scripts in the head tag on your site:
<script type="module" async="" src="https://embed.launchnotes.io/latest/dist/esm/launchnotes-embed.js"></script>
<script nomodule="" async="" src="https://embed.launchnotes.io/latest/dist/esm/launchnotes-embed.js"></script>
With these scripts installed, you can now implement your pop-up embed wherever you'd like. Simply add the embed's HTML tag with the relevant properties, and you're ready to go!
categories='["meta-slug", "another-cat-slug", "third-cat-slug"]'
subheading="The latest features, improvements, and bug fixes"
subheading-color="rgba(255, 255, 255, 0.8)"
Your public API token
Your project ID - this can be found in the URL of your account admin, and will start with "pro_", for example:
You can pass in the categories that you'd like different groups of users to see, by mapping these user types to the specific category slugs, which are then listed in a JSON array as shown in the snippet above.
Category slugs can be found under the Categories tab under your project Settings.
A unique CSS selector targeting the link or button you want to use to show and hide the pop-up widget
The title text. Use this to personalize the messaging for your users.
The title text color.
The title sub-heading text.
The title sub-heading text color.
The background color of the heading and subheading. This can be a hex, rgb, rgba color or a gradient.
Placement of the pop-up relative to the toggle selector. We use Popper to position the unread indicator and the supported values are
true to show an unread indicator when you post new announcements. Defaults to
A unique user identifier used to determine whether or not there is an unread announcement for the viewer. This property is required for the unread indicator to work. This can be something like the user's primary key ID, email address, or some other non-changing value. For additional security feel free to hash this value before sending.
Placement of the unread indicator relative to the toggle selector. We use Popper to position the unread indicator and the supported values are
The background color of the unread indicator.
The text color of the unread indicator.