Idiomatic way of modelling overlay content in Storyblok


I have a client that wants to display some overlays with some rich text content when clicking on an arbitrary link in another rich text blok which is in the body of a page.

We’re using NextJS with Storyblok.

Idea A

The first idea was to add a “overlays” key to our “page” content type. The overlays would only accept bloks of the component type “Overlay” and those would have an id, headline and richtext content.

Since we define the overlays in the page, we can guarantee that the content is there on page render.

In the rich text they could then just create a regular link and link to a url in which they use a pattern like “#overlay-something” to indicate that clicking this link should open the overlay with the id “something”. We’d have to add click listeners to all links (or just the ones with the specified pattern) and render (or unhide) the overlay with the specified content on click.

Idea B

Create a top level content type for Overlays, and put those in a folder called “overlays”.
Then we do an internal link to the specific overlay from the rich text.

In this case we’d have to scan through all the bloks in the body, and their rich text content to see if there are any links to an overlay, and fetch those overlay stories before render the page (passing in something like overlayStores as props to the page).


I’m leaning towards Idea A as that would keep the overlay content with the page, and it wouldn’t be necessary to scan through all bloks to look for potential links to overlays, but am I missing some more idiomatic approach to modelling this problem with Storyblok & NextJS?

Hello @kallebertell,

I discussed your case with my colleagues and Idea A should be the one fitting your requirements.

Best regards