How to customize a headless SaaS CMS

Users coming from an open-source CMS are used to a great level of customization within the administration panel: dashboards, custom tools and fields, UI changes, and more have made these legacy solutions successful.

Compared with open-source CMSs, a closed-source headless SaaS CMS such as Storyblok might give the impression that it offers no room for personalization. Having no access to the code base may lead you to think that there is no way to alter any part of the platform. The reality is quite different. Let’s briefly go over the most common types of customization and how they can be accomplished with Storyblok.

What is the value of the customization?

CMSs are generally designed with the editing experience in mind, providing features that make content management and user collaboration smoother. Basic functionalities are not always enough, which is precisely why the ability to extend them is very important. For many projects, customization is essential because users would otherwise be too limited, and their efficiency would be excessively reduced.

The most frequent cases are:

• Editors' empowerment. This has a great impact on the productivity of editors and the quality of their work.
• Integration of third-party tools. These can be vital to a project’s success (e.g., eCommerce integrations, DAMs, analytics, search).
• UI Branding. This is very desirable for some clients, especially for agencies and enterprises.

Content modeling

Editors need the freedom to structure content as logically and efficiently as possible. This does not mean they should have maximum flexibility to create content; they just need the right amount of freedom.

You need to invest a lot of time in thinking about how your content structure at the beginning of a project because restructuring later, as easy as it may be on a headless platform, will still be more time-consuming.

Using a CMS that gives you a lot of flexibility for content modeling is really crucial to achieving the best configuration for your editors.

Connected to content modeling, there are also some aspects that are related to the customization of the UI. When you repeat the same operations several times a day while working you content, you are looking for efficiency even in the details. Therefore, editors have to be helped to identify the right components to use for their pages.

It may seem trivial, but if this aspect is underestimated, your content teams might struggle with content insertion. Each CMS may have different customization options for the presentation of component lists.

Custom fields

Every CMS has a set of default fields that can be used to create components. Usually, the basic fields allow for text, rich text, numbers, assets, links, and references to entries in the CMS.

These fields are fine for most cases, but for some projects, you need to offer your editors something more: e.g., map pickers, icon selectors from specific libraries, product selectors from eCommerce platforms, assets for an external DAM or forms from services such as Hubspot, and many others.

In these cases, the solution is a custom field plugin that extends the set of pre-existing fields in the CMS. Most headless platforms have this functionality.

Storyblok provides users with tools for creating custom field plugins . There is also a dedicated CLI for generating and deploying new fields.

Fields then can also be created in the free Community plan . Organizations and partners can share field plugins among all members of their teams.

Extending the editing interface

This is the interface most used by editors during their daily work, and any tool that can give them more power is valuable.

Some very common use cases are:

• Content manipulation: this type covers all those tools that can interact with and modify the page content. For example, tools for translation or content generation with AI.
• Content review: these tools allow you to check the content of a page from a specific point of view. For example, you can assess the degree of accessibility of the page and provide suggestions for improvements, or check whether the content is SEO-friendly (somewhat like the popular Yoast tool does).
• Shortcuts for certain actions or to find data: this category is very broad. It includes tools such as one for keyword suggestion or consulting Google Analytics statistics related to the current page.

Storyblok allows you to extend the editing interface via tool plugins . These are standalone applications that are embedded within iframes, which communicate with Storyblok by means of cross-window communication, and via the API.

Custom dashboards inside the CMS

A very useful feature is the ability to create completely custom pages in the administration panel. In its simplicity, this customization allows you to create any interface within the CMS, allowing editors to stay within the platform even to use third-party services

Here are some use cases:

• Reporting: internal statistics dashboards or third-party platforms, such as Google Analytics , can be integrated.
• Space-wide operations: link checking , finding outdated content, and any other tool that involves analyzing the content of the project.
• Integration of external DAMs.
• Interfaces to quickly edit subsets of fields on project pages, e.g., page metadata, in order to allow an SEO specialist to quickly update them from a dedicated interface.

Storyblok provides Enterprise partners and customers with space plugins , which enable this type of extension. These plugins can be built with any technology, and they interface with the current project, interacting with its content via API.

UI branding

For some companies, personalizing the colors and logo of the CMS interface and replacing the original ones with their own is important to provide a branded experience for their editors. It is also useful for agencies to white label the platform.

SaaS product interfaces are not easily customizable by nature. The only way to do this is through settings or solutions provided directly by the platform.

Storyblok provides a simple and effective solution that allows whitelabeling the CMS, which can be used to change the logo, colors, and CSS properties of UI elements.