Storyblok Raises $80M Series C - Read News

Skip to main content

Getting Started with Plugins

INFO:

On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

The way to create a new plugin depends on the type of plugin because field plugins work differently from other kinds of plugins.

Any user of Storyblok can create their own field plugins. They are deployed to Storyblok and then served by Storyblok via a public URL. To learn how to create a field plugin, please refer to the field plugin documentation.

Tool plugins and custom sidebar applications are self-hosted, and can only be created by users who have access to the Partner Portal or Organizations within Storyblok.

This article describes how to create the latter.

Prerequisites

Only those with access to the Partner Portal or Storyblok Organisations can create plugins other than field plugins.

Register a Plugin in Storyblok

If you are a partner of Storyblok, enter the partner portal; otherwise, enter your Organization.

Go to Extensions, and click on New Extension.

Give your app a human-friendly name. This will be visible to end-users.

For the ID field, we want to provide a string of numbers and characters that cannot be easily guessed by an authorized party, because anyone with knowledge of this field will be able to install the app.

If you have OpenSSL installed, open a terminal and generate a randomized string by running.

openssl rand -hex 8

Paste the string into the ID field.

Finally, for the Extension Type field, select either Tool or Sidebar, depending on the type of plugin you'd like to create.

Open the plugin, navigate to the OAuth 2.0 and Pages tab, and note the following fields:

  • Client Identifier and Client Secret. These will be used as environmental variables when you run your app.
  • Index to your page and Redirection endpoint. These will be set depending on the domain you host your application from, and how you configure your app.

Install the App

Open the General tab, and copy the Install Link to your clipboard.

Paste the installation link into the address field in your web browser and hit Enter. Select a space to install the plugin to:

Now, your plugin is installed on your space, but for a user to see it, you will need to run the plugin locally and configure the URLs in the plugin settings.

Create a Repository

Creating a plugin application that authenticates the users requires a full-stack application that connects with Storyblok's OAuth 2.0 service. As such, Storyblok provides a library for authentication and a few starter projects that will help you get up to speed quickly. See the starter projects on GitHub, select a template, and follow the instructions in the corresponding README file.