As an optional extra to your hosted release notes site, you can embed your latest releases as a modal on your marketing site or application.

There are two main outputs from this installation, you can check them both out here:

• Release Notes Modal
• Latest Release Banner

To do this, you'll need to install a small snippet of code on your site which you can find here:

https://app.releasenotes.io/installation

NB. For the badge to appear, you will need to ensure you update the selector in the config options.

Installation

To get started, you'll first need to install the initial snippet. If you follow the installation link above you'll be able to copy and paste the exact code there, but you can also see a sample below.

<script>
(function (w,d,s,o,f,js,fjs) { w['ReleaseNotesWidget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }
(window, document, 'script', 'rnw', 'https://s3.amazonaws.com/cdn.releasenotes.io/v1/bootstrap.js'));

rnw('init', { 
    account: '[YOURSUBDOMAIN].releasenotes.io',
    selector: '.rn-badge', // change the CSS selector to apply the badge and link to
});
</script>

NB. You'll need to change [YOURSUBDOMAIN] with the subdomain for your account.

Customising the Popup or Banner look & feel

You can restyle the modal or banner by overriding the styles with your own custom CSS file. To add custom styles, simply create & host your CSS files and reference them from the init call as shown below.

rnw('init', {
    account: '[YOURSUBDOMAIN].releasenotes.io',
    selector: '.rn-badge',
    modal_css: 'https://example.com/my_custom_modal.css',
    banner_css: 'https://example.com/my_custom_banner.css'
});

Going further

If you'd like more control control, you have the following options available to you when making the init call

rnw('init', {
    account: '[YOURSUBDOMAIN].releasenotes.io',
    selector: '.updates', // changes the selector to apply the badge and link to
    title: 'Latest Updates from ACME', // changes the CSS main title
    title_link_disabled: true, // removes link from the modal title. If not set or false, title will link to https://[YOURSUBDOMAIN].releasenotes.io
    auto_show_unseen: true // if enabled, the release notes will auto open if the user has unseen releases,
    banner_css: 'https://yoursite.com/banner-styling.css',
    tag: 'some-tag', // optional
    jwt: 'valid-user-jwt' // optional
});

Hiding the badge

If you'd like to hide the badge, just set the selector to null.

You can then open the modal using JavaScript at will as below.

Filtering by Tag

If you would like to limit the modal to only show releases for a certain tag, add the tag attribute when calling init. If you want to show all releases, simply leave this attribute off.

For example, the following example will only show releases with the tag admin.

rnw('init', {
    account: '[YOURSUBDOMAIN].releasenotes.io',
    tag: 'admin'
});
// displays all releases with a tag `admin`

Filtering by multiple tags can be done by providing a comma seperated list as shown below. This will return all releases that have 1 or more of the tags provided (e.g. admin or superuser in the example below.)

rnw('init', {
    account: '[YOURSUBDOMAIN].releasenotes.io',
    tag: 'admin, superuser'
});
// displays all releases tagged with `admin` OR `superuser`

Allowing a user to view private releases

In order for the user to view any private releases, you'll need to generate and share a JWT which identifies that user securely so we can know they are logged in and can view the private releases.

To generate the JWT, you will need to get your account secret from the main project settings page, in the SSO management area (see below).

The following is some sample PHP code that shows how the JWT can be generated.

$secret = 'YOUR-SECRET';

$token = array(
  "iss" => "https://yoursite.com",
  "iat" => time(),
  "exp" => time() + 300, // in seconds, so this is 5 minutes
  "name" => $user->name,
  "email" => $user->email,
);

$jwt = JWT::encode($token, $secret, 'HS256');

Armed with your JWT, you can then use this in the init config when installing the widget on your site. 

rnw('init', {
    account: '[YOURSUBDOMAIN].releasenotes.io',
    jwt: '[DISPLAY_JWT_HERE]'
});

Opening the modal with JavaScript

If you'd like to control the opening of the modal with JavaScript from your own code, you can call the following:

rnw('show');

If you know the ID of the release you would like to show, you can send this as an optional second parameter like this:

rnw('show', 'A1B2C');

Release Banners

Adding a release banner

This is super simple, once you have the main script above added in, simply add the following HTML where you'd like the banner to appear:

<rn-banner></rn-banner>

You also have the option to override many parts of the banner if you need, as below:

<rn-banner
    type="feature"
    background-color="blue"
    border-radius="0"
    button-text="Check it out"
    font-family="'Courier New', Courier, monospace"
    margin="0"
    prefix="Latest Release"
    prefix-background-color="red"
    shadow="none"
    text-color="#FFF"
    target="modal"
    tag="some-tag"
>
</rn-banner>

Filtering by Tag

If you would like to filter the banner to only show releases for a certain tag, simply add the tag attribute, and assign it the tag to filter. 

<rn-banner tag="some-tag"></rn-banner>

Tip: If you want to have even further control, you can set the banner_css variable in the init settings when installing the script initially to load your own CSS file within each of the banners.