Step 1: Create Connector to Index Data

Prerequisites

Prior to starting, you will need to cofigure the Custom Entity Types and Custom Fields that align with your Storyblok content structure. The custom entity types should be marked as Enabled in Knowledge Graph > Configuration.

Create Connector

1. Click Knowledge Graph in the navigation bar and click Connectors.
2. Click on the + Add Connector button.
3. Click on the Storyblok source. You will be directed to the Connector Settings page.
4. Enter the API Key.
   • You can generate an API Key in your Space Dashboard at app.storyblok.com . Create a Preview API token to access both draft and published content entries in your space.

5. Enter the Story Slug.

   • This is the leading prefix in the full slug for the content type that you want to pull in. Include the backslash in your input, e.g. articles/ or authors/.

   • You can locate your slug by following this Storyblok Access Data guide. Navigate to the Published JSON of a story within the unique content-type folder. Identify the full_slug value of the story and note down the prefix as your Story Slug.

     • Published JSON Output Example:

       "slug": "sarah-saturn",
       "full_slug": "authors/sarah-saturn",

6. You’ll be redirected to the Specify Selectors screen. Click Add Default Selectors to pull in all available content fields

7. You can use transforms to reformat or extract data from each returned field as needed. For more details on that available transforms, visit the Transforms reference documentation.

8. Once you have configured your selectors, you will map the data to entities on the Map Data screen. First, select the Entity Type that you want to map the data to.

9. Next, map any data added to your entity fields. To learn more about mapping fields, read the Load - Map & Run training unit.

10. Finally, click Save and give your connector a name. You can either save the connector to run later or click Save & Run Now to run the connector upon creation. You can schedule your Storyblok data connector to run at whichever frequency you see fit in the Connector Summary section.

Repeat steps 1 - 8 for each content type you would like to pull into the Knowledge Graph (i.e. different Story Slugs or different accounts). Alternatively, if you are using the same Storyblok account for each connector, locate your original connector on the Connector home page. Click on the drop-down button and select Duplicate to create a copy. Edit the configuration of the copy with your new Story Slug and/or Storyblok API Key.

Next Steps

Once you have created the connector, and all of the relevant data is pulled into the Knowledge Graph, you can leverage the data however you’d like.

One common use case is indexing this data into Search, so you can create a Search experience, and integrate it into your Storyblok frontend.

For steps on how to do this, visit the following resources:

1. Create Search Results Landing Page.

   • To use a JS Snippet to iFrame the SERP in a page that you create and host, see Step 1 of our Search Integration — Creating Search Results Page Guide guide.
   • Use the Yext React Library to build your own results page.

2. Add Searchbar to the header of your pages.

   • If you want a full overview of the Search experience creation process and Frontend setup, see the Search UI React Quick Start Guide guide.
   • If you are already setup with a Search experience, reference the Search — Headless React guide.