The LaunchNotes inline 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 Inline Embed, for information on the Inline Embed,

visit the Pop-up Embed help article.

The inline embed

The inline embed is a more direct way of showing product changes and is great for embedding your announcements on a dedicated page within your app, such as on your sign-in screen, or in context with a specific feature.

Similar to the pop-up embed, the inline embed shows announcements that can be selected to reveal the full announcement body in a new window within your app:

Installation

First, head to Settings on the Admin nav bar, then API & Embed, where you'll be able to create a new API token. We recommend creating a specific API token for each place you intend to implement the embed.

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 inline embed wherever you'd like. Simply add the embed's HTML tag with the relevant properties, and you're ready to go!

<launchnotes-embed-inline
token="public_fqe2Gasd1pUBFrPxVTtawYl9g5i"
project="pro_4flZZoOkasdtFBaP"
categories='["meta-slug", "another-cat-slug", "third-cat-slug"]'
limit="5"
></launchnotes-embed-inline>

Required properties

token

Your public API token

project

Your project ID - this can be found in the URL of your account admin, and will start with "pro_", for example:

Optional properties

limit

The maximum number of announcements to request and render

Integrating with React & Typescript

To make sure the embed web component is available to your application, you'll need to define the custom element. Add the following to your entry point:

import { defineCustomElements, JSX as LocalJSX } from '@launchnotes/embed/dist/loader';
defineCustomElements(window);

If you're using Typescript, you'll need to extend the JSX type to support web components like so:

type StencilToReact<T> = {
[P in keyof T]?: T[P] & Omit<HTMLAttributes<Element>, 'className'> & {
class?: string;
};
} ;

declare global {
export namespace JSX {
interface IntrinsicElements extends StencilToReact<LocalJSX.IntrinsicElements> {
}
}
}

A few things to be aware of:

Typescript may recommend using camel-cased props. All props in the embed component are lower case, delimited with dashes.
You must provide your own toggle element and provide a toggle-selector to the launchnotes-embed component.