The LaunchNotes embed provides you with two additional channels to share Announcement updates with your users. Our embed feature allows you to easily integrate LaunchNotes notifications into any web app or relevant web property. With embed, you can not only ensure that the right message is reaching the right audience at the right time but also doing so in context, regardless of where your users may be.

We currently offer two types of embedded applications:

  • Pop-up embed

  • Inline embed

Both applications leverage the LaunchNotes public API.

The pop-up embed

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, your most recent Announcements will be shown determined by the project view that you choose.

When a release card is selected within the embed, the full release will show in a new window:

Installation

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" src="//unpkg.com/@launchnotes/embed/dist/launchnotes-embed/launchnotes-embed.esm.js"></script>
<script nomodule src="//unpkg.com/@launchnotes/embed/dist/launchnotes-embed/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!

<launchnotes-embed
token="public_fqe2Gasd1pUBFrPxVTtawYl9g5i"
project="pro_4flZZoOkasdtFBaP"
toggle-selector="#whats-new-link"
heading="Hi there"
heading-color="#FFF"
subheading="These are our favorite updates"
subheading-color="rgba(255, 255, 255, 0.8)"
primary-color="lightblue"
></launchnotes-embed>

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

primary-color

A background css value. This can be a hex, rgb, rgba color or a gradient.

heading

The title text. Use this to personalize the messaging for your users.

heading-color

The title text color.

subheading

The title sub-heading text.

subheading-color

The title sub-heading text color.

toggle-selector

A unique CSS selector targeting the link or button you want to use to show and hide the pop-up widget

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.

The same as 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 published 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" src="//unpkg.com/@launchnotes/embed/dist/launchnotes-embed/launchnotes-embed.esm.js"></script>
<script nomodule src="//unpkg.com/@launchnotes/embed/dist/launchnotes-embed/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!

<launchnotes-embed-inline
token="public_fqe2Gasd1pUBFrPxVTtawYl9g5i"
project="pro_4flZZoOkasdtFBaP"
limit="5"
></launchnotes-embed-inline>

Required properties

token

Your public API token

project

Your project ID

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:

  1. Typescript may recommend using camel-cased props. All props in the embed component are lower case, delimited with dashes.

  2. You must provide your own toggle element and provide a toggle-selector to the launchnotes-embed component.


❓ If you have any questions on the above or feedback on this article, please don't hesitate to get in touch with us at hey@launchnotes.io, or on live chat.

Did this answer your question?