Integration Field-Type

In many cases, you will want to have more space for selecting content from a different API similar to how you can select different products in the image below. For this use case, we created an integration field-type starter kit:

Integration Selection

Getting Started

Start by cloning the repository and installing the dependencies.

$ git clone
$ cd storyblok-integration-field-starter
$ npm i

Next, we need to create a new custom field-type in the Partner Portal. Click on Field-types {1} and the New button {2} and enter the name for your integration field-type {3}.

Create new field-type

Next, we need to add the name of our new plugin to the src/Plugin.vue file.


initWith() {
  return {
    // needs to be equal to your storyblok plugin name
    plugin: 'my-integration',
    item: null

Then start the development server.

npm run dev

To preview the field-type open the field-type in Storyblok, change the URL from https to http {1} and click the Enable local dev mode {2}. If your localhost is running, you should see the Open Selection Button {3}.

Integration Starter in Storyblok

Now if you click Open Selection {3}, you should get a full window with a spinning loader, where you will be able to load your integration logic.

Storyblok editing capabilities

Integration Logic

The integration field-type makes use of field-type API events to open and close a modal within Storyblok. These events can be used in any field-type.


openSelection() {
  this.modalIsOpen = true
  this.$emit('toggle-modal', true)

closeSelection() {
  this.modalIsOpen = false
  this.$emit('toggle-modal', false)