Add Kontent.ai integration

The Kontent.ai integration brings your structured content from Kontent.ai into the composition layer, Uniform Canvas. Team members can now leverage your Kontent.ai content, along with data from any of your other sources, to create experiences without needing a developer.

Before you start

You must the following available to complete this setup:

  • Kontent.ai account with administrator access.
  • A Delivery API key with permissions for content preview and also secure access if the project is configured to require it.
  • Uniform account with administrator access. If you don't already have one, you can request an account at https://uniform.dev/try.
  1. In Uniform, open your project.

  2. Navigate to the Integrations tab.

  3. Scroll to the section Browse integrations.

  4. Click Kontent.ai.

    add-kontentai-integration
    The screen to add the Kontent integration to your project.
  5. Click Add to project.

Now that you've added the Kontent.ai integration there are two ways to bring it's information into Uniform:

Learn more about approaches for connecting to external data.

Uniform recommends you connect your front-end application to any content from your Kontent.ai project, you'll need to configure the data source. Then you can add data types to help connect your Kontent.ai entities to your Uniform components with automatic content fetching and edge caching.

You can also extend the authoring interface using Kontent.ai content with personalization capability by adding a custom element.

Need an enhancer?

While edgehancers are Uniform's preferred method, some projects require more control over content fetching in the application layer. In these cases enhancers and the Kontent SDK are the best choice.

Once you've installed the integration, the next step is to connect your Kontent.ai environment to your Uniform project by creating a new data source.

  1. Navigate to Experience > Data Types. A data type is an element that can be retrieved from a data source, so the first step is to identify a data source.

  2. Create a new data source by clicking the Add data type button and select the "Create new" option under the Kontent.ai label.

    add-data-source
    Add a data type.
    create-kontentai-data-type
    Where to create a new data type from the available data sources.
  3. Enter the credentials.

    configure-kontentai-data-type
    There is a drop down list of sources available to your project.
  4. Name your data source. Choose a name that helps to inform your editorial users where the content is coming from. The name of the Kontent.ai environment is a good option here.

Before you start connecting Kontent.ai data to your Uniform compositions, it's important to first create some data types. Data types define which types of Kontent.ai data editors can use. This could be simple, like allowing an editor to select a single "hero" entity, or more perhaps a more complex query such as "the five latest news article entries."

  1. Go to Experience > Data Types and click the Add data type button from below the Kontent.ai data source that you set-up earlier.

    add-kontentai-data-type
    Add a data type after selecting the data source.
  2. Next, you will want to select and configure an archetype from the options below.

The query archetype will return a list of content entries containing the queried terms, up to the depth set by the editor in Uniform. This can be useful for dynamic queries where the most up-to-date information is needed, such as a "latest content" section.

Once you configure the archetype, you can test to see what JSON data would be returned when it's used in an experience.

test-query-archetype
The data returned searching 'Title.'

The single item archetype will always return a single entry from Kontent.ai, based on a selection by the editor in Uniform. This is useful for non-list elements that render as an independent item, such as a single "hero" entry or "article" entry. It can accept a variable from a dynamic token (such as a slug) and retrieve the corresponding entry.

test-single-item
Select a single item from available data.

The multiple items archetype lets an editor hand pick multiple entries to render as a list. This is useful when a small selection of specific entries is required, such as in a "featured articles" carousel.

test-mulitple-items
Showing the data returned after selecting mutliple items from the source.

The Items by element archetype will return a list of content entries containing the exact matches to queried terms. This can be useful for dynamic queries where the most up-to-date information is needed, such as a "latest content" section.

test-items-by-element
Showing the data returned after searching elements.

Next steps

Now you are ready to bring content directly into your components in Canvas:

  1. Open any composition
  2. Find component which parameter you want to connect to content from Kontent.ai
  3. Click on the connect icon next to the parameter.
  4. You will be prompted to create a new data resource using one of the data types you created.