Sounding out on Storyblok: Crafting a Spotify Field Type
Storyblok is the first headless CMS that works for developers & marketers alike.
Storyblok has field types like rich text, asset, and single/multi-select, which support a lot of fields you need. However, sometimes you need something more specific such as data from an outside source. For this, you can create a custom field-type plugin.
Over the years, I've worked with Spotify data that I needed to incorporate into various applications. Since Storyblok is my go-to CMS, adding the Spotify search feature as a field-type plugin made sense. Spotify is the main platform for podcasts at the moment, adding podcasts widgets to your content could improve the quality of your website. Some of our clients are already using the plugin to search for their podcasts episodes.
What is the field type plugin?
Field-type plugins will show just like default field types in the Storyblok in the right sidebar of the editor.
Unlike monolithic CMSs such as WordPress, plugins won’t affect the performance or security of your website. Since the plugin is part of the CMS and not the frontend codebase, it will never affect your website.
The plugin will be embedded in the Storyblok sidebar using an iFrame which communicates with the parent using messaging events. Having the plugin in an iFrame is actually great because it can't mess up the CMS! If the plugin is not developed properly, the rest of the CMS will not be affected.
Creating a fieldtype plugin is done using VueJS which is rendered within Storyblok. Developing the plugin can be done directly in the browser or locally using the Storyblok field type local editor.
Are you a React developer? The plugin can also be created with React using this tutorial
For styling the field type plugin, it is recommended to use the UIkit used for Storyblok's default field types.
More on how to create a field-type plugin found here
What do you need a field-type plugin for?
You might already be using the field-type plugin without knowing it! The Storyblok team created several free-to-use field type plugins including the SEO meta tags and the Colorpicker that I use for almost all my Storyblok websites.
Suppose your Nuxt + Storyblok website has a page with relevant Spotify podcasts on topics you love. Displaying the podcasts on the front end can be done using an iFrame with an embedded URL from Spotify. In Storyblok, however, you would have to manually insert the Spotify ID into a text field, which is not great due to a lack of visual feedback.
For a better experience than manually inserting a Spotify ID, you could create a search field to find these podcasts, which you could create with the Storyblok custom field-type plugin. After I first added the plugin to a project, the first artist I looked for was Steely Dan, my favorite band.
How to use the field type plugin?
Developing the field-type plugin is fun but could be tricky, especially when fetching 3rd party data (like Spotify podcasts) is involved. Retrieving and parsing the data from an API endpoint can be easy, but receiving the access token and storing it accordingly can be challenging.
That’s why I created a tutorial on how to set up a field-type plugin to fetch Spotify data. If you're interested in reading through the tutorial for creating the Spotify field-type, I invite you to read the tutorial here.
