Native external references 

Overview 

The Native external references feature allows you to seamlessly integrate content from external sources directly within your content model. By leveraging existing reference fields and the App Framework, you can link to third-party systems and pull content directly into Contentful without the need to create a custom frontend app.

NOTE: The Native external references feature is available for customers on our Premium plans and above.

Get started with Native external references

Important: To access the Native external references feature, you must first enable orchestration for the spaces you want to link external content from. For more information on how to enable spaces for orchestration in the web app, see About content orchestration.

To use the Native external references feature, you must first create a new app within Contentful through the command line interface (CLI). This app acts as a bridge between your Contentful space and the external system you want to integrate, like an e-commerce platform.

Once the app is created, you have to:

  1. Define the Resource Provider.
    In your app, you'll specify the external system you’re connecting to, such as Shopify. This system becomes your Resource Provider.

  2. Define Resource Types.
    Next, you'll outline the types of resources you want to link to, such as products, collections, or categories. For example, if you're working with Shopify, you might define "Products" as a resource type.

  3. Add Resource Types to Reference Fields.
    After defining your resource types, you’ll add these as allowed sources in a Reference Field within your content model. This step is done using the native Contentful UI, so there’s no need to build a custom UI for your app. Content editors can then link to external resources directly from within the familiar Contentful interface.

  4. Create a Contentful Function.
    Finally, you’ll define a function in your app that gets called when a content editor needs to pull in specific resources — like a list of "sweaters" from the Shopify API. This function retrieves the necessary data and makes it available in the content editor, allowing seamless integration of external content.

  5. Reference External Resources.
    Once your App and Contentful Function are set up, content editors can use the Reference Fields to link to both external resources. In the Contentful content editor, they can seamlessly search for and select resources from the defined Resource Types, as well as link to entries from other spaces, all within the same field. This flexibility allows for a unified content management experience, integrating external data and cross-space content effortlessly.

For a more detailed description on how to use the Native external references feature, see the Create an app to support Native external references tutorial in the Developer Documentation.

Use cases

  • Product stories

    • Content creators putting together product stories can easily identify the specific products and videos they want to feature on the pages they are building. They can navigate the external resources available on the external provider to identify exactly which products and which videos to use, and persist those choices with the page.

  • Content enrichment 

    •  Digital teams can build a digital experience that brings together content from multiple sources. All in one UI.

  • Custom integrations

    • Developers can provide their own integrations which work seamlessly with the native external resource management experience.

  • Digital Asset Management platforms

Comparison between Custom external references and Native external references

Contentful offers a number of powerful tools, such as the Custom external references and Native external references features, that enable you to achieve your goals while boosting the productivity of digital teams and developers. Both features expand the platform’s capabilities and streamline workflows. Below is a side by side comparison to better understand which feature best suits your needs.

Custom external references

Native external references

User interface (UI)

Different UI for each app. Based on the developer building the app.

Uses the Contentful UI. The editor does not have to switch context between apps UI.

Coding

Developers need to create a custom front end as well as a function to connect to an external system.

Developers need to prepare only the function that connects to the external system as front end is provided.

Integration with Contentful features

Not available

Native integration with current and future Content features and products.

Mix cross-space and external references

Not available

The editor can reference both external and cross-space content from the same reference field.

Next steps