Better headless preview experience with Web Spotlight
Developers like headless CMSs for their flexibility, but content editors are often complaining about missing WYSIWYG capabilities.
How can we better integrate the website front-end with headless CMS to improve the experience of content editors? After all, ensuring a good content editing experience allows us to keep working with the headless CMS we like.
In this article, we will review the common drawbacks of headless CMS previews, the benefits of the new feature called Web Spotlight that enables live content editing experience, and a showcase of how to enable and use it.
What are the drawbacks of headless CMS previews?
The most common approach to a preview mode within a headless CMS is to simply open a URL in a new window. This is the absolute bare minimum and hardly even counts as functional. Opening a preview URL could be done manually by the content editor, the “feature” is simply a shortcut.
This separation of content editing and content preview leads to a very frustrating experience for content editors. They hate:
- Navigating the website and content repository independently.
- The mental overhead of understanding the abstract content structure often used while working with a headless CMS.
Whilst I know we developers have our own problems, but ensuring a good content editing experience allows us to keep working with the headless CMS we like.
What is Web Spotlight and how does it help?
Web Spotlight is a new addition to Kentico Kontent which lets you create web pages and see them right in your editor, providing immediate visual feedback.
It achieves this by enabling these features:
- Navigate the hierarchy of a website via the content tree
- Manipulate the website hierarchy via the content tree
- Preview changes via an embedded preview window
- Live-edit pages from the embedded preview window
This allows us to combine the editing and preview experiences within the same interface with only small adjustments on the implementation side.
How do I try out Web Spotlight?
First of all, you must purchase the Web Spotlight add on via the Kentico Kontent support team or your account manager.
Then, you will be able to access a new section via the main navigation. The globe icon will open the Web Spotlight section, and you will be greeted with a modal explaining the first steps.
Firstly, you will need to initialise the new feature by clicking the button in the modal. This will make the following changes to your project:
- Create a new Homepage content model
- Create a new Page content model
- Allow usage of the new Subpages element type
The new homepage content model is the root of your new content tree. You need to adjust it with any additional fields your project needs and create a root content item based on it.
The new page content model is optional, this can be used to represent a standard page on your website. However, if you already have an existing content model then you can update that instead.
To update an existing content model to work with the content tree, you will need to use the new Subpages element type. This can be added to a content model in the same way as any other fields. I’d recommend naming the new field “Subpages” to keep consistent with the new homepage model.
After you have updated your content models and created a new homepage content item you can begin using the Web Spotlight content tree. This new view of your content will allow you to visualise your website structure and interact with it by moving existing items around or creating new subpages directly from the parent.
That is great, but it’s hardly ground-breaking in isolation. The structure the new subpages element represents was already achievable using the linked pages element type and the content tree is a handy visualisation for content editors. The true power of Web Spotlight comes from the new Embedded Preview and the Smart Link SDK.
Turn on the Embedded Preview
Embedded Preview is the approach Kontent takes to include your website directly in their headless CMS. This is done using a combination of preview links and an iframe.
To enable the embedded preview you will need to set up preview links in your project settings. The URL can include placeholders to include the URL slug or language codename as required.
The generated URL will be loaded in an iframe within the Kontent interface to make the preview experience more seamless.
Tip: Ensure you have the appropriate X-Frame-Options and Content-Security-Policy headers configured for your website, otherwise the embedded preview will not load.
Content-Security-Policy: frame-ancestors https://app.kontent.aiNow, whilst you can already benefit from the embedded preview window, the final step is to enable editable elements via the Smart Link SDK.
Add Smart Links
The Smart Link SDK is a package provide by Kentico Kontent to enable shortcuts on your preview window. These shortcuts will allow your editors to edit content without leaving the Web Spotlight interface.
This will require making changes to the output HTML of your website, meaning this is compatible with all platforms and frameworks. The website I used as an example was developed using Gatsby and the setup is outlined in the Smark Link SDK readme.
Once this has been included in your website you can annotate the pages and elements to link them to your content items. This is done using a series of data attributes.
Firstly, you need to annotate your body element with the Project ID and Language Codename.
Secondly, you need to annotate an element with the Content Item ID it is associated with. For example, if the entire content of a page is managed through a single content item then it would be logical to include the data attribute at the highest level. Alternatively, if a particular section of a page is managed using a particular content item then that section should include the data attribute.
Finally, you can also annotate elements with the Element Codename, this will allow Kontent to pre-select the appropriate field when the element is clicked, for example allowing a title or summary to be selected directly.
Once you have annotated your mark-up with the appropriate data attributes you should be able to enable Show editable elements in Kontent and see areas highlighted in the preview window.
I implemented Web Spotlight in my blog during a live stream, check out the recording on YouTube or try it out for yourself in Kontent.
