Storyblok JavaScript Bridge

To build a bridge between Storyblok and your website there needs to be included a script on your page. This script will then communicate via iframe with Storyblok to tell the editing interface which component needs to be opened when the user clicks on it.

Direct <script> include

<script src="//app.storyblok.com/storyblok-latest.js" type="text/javascript"></script>
<script type="text/javascript">storyblok.init()</script>

Usage

storyblok.init(config)

config Object
  • accessToken String: The private token of the Content Delivery API to receive draft versions of content. You can find it in your space dashboard at https://app.storyblok.com.

Example

storyblok.init({
  accessToken: 'xf5dRMMjltLzKOcNgMaU9Att'
})

Events

Those events will be called if your website is opened in the Storyblok side by side editing interface and the Storyblok bridge got initialized.

EventWill be emitted
changeafter the user saves the content
publishedaAfter the user clicks publish
unpublishedafter the user clicks unpublish
enterEditmodeafter the editor has been initialized in the editmode

Functions

storyblok.isInEditor() and pingEditor()

With this functions you can check if your user has opened your page inside Storyblok.

Example

storyblok.pingEditor(() => {
  if (storyblok.isInEditor()) {
    // getStory('draft')
  } else {
    // getStory('published')
  }
})

storyblok.get(query, success, error)

Get a single content entry in the frontend.

  • query Object
    • version String: ‘draft’ or ‘published’. Default is ‘published’
  • success Function: Success callback
  • error Function: Error callback

Example

storyblok.get({
  slug: 'home', 
  version: 'draft'
}, (data) => {
  var story = data.story
})

storyblok.getAll(query, success, error)

Get a multiple content entries

  • query Object
    • with_tag, String
    • starts_with, String
    • version, String
    • sort_by, String
    • filter_by, String
    • per_page, String
    • page, String
  • success Function, Success callback
  • error Function, Error callback

Example

storyblok.getAll({
  version: 'draft'
}, (data) => {
  var story = data.story
})

Documentation