Narrative

Moment Widget

Show a selected Moment on your own site.

View on GitHub Download .zip Download .tar.gz

Setup

First you need to register a Narrative Open Platform app.

  1. Sign in to open.getnarrative.com and Create a New App
  2. Add your sites domain to the Redirect URIs, this will also white list this domain in CORS.
  3. Copy your apps Client ID and Client secret

Usage

Grab the UUID for the Moment you want to display, it's the last part of a shared Moment link. Looking something like this 4f0c241562a24bce86a9e24a009c845d

Then add both the jquery plugin and the css file to your site. Lastly add the following to your html.

var clientID = '<Your Client ID>';
        var clientSecret = '<Your Client Secret>';
        var momentUUID = '<The Moments UUID you want to display, needs to be public>';
        $('#nrtv__current-photo').nrtvScrubb(momentUUID, clientID, clientSecret);

And this HTML code

<div id="nrtv__current-photo" class="nrtv__loading">
            <div class="nrtv__progress"></div>
            <div class="nrtv__meta"></div>
            </div>

Demo

See the Pen An example of a scrub-view for a Narrative Explore Moment by Johan Stenehall (@stenehall) on CodePen.