Set up a remote source

This article explains how to use a 3rd party system as a remote source in Prepr.

Prepr allows you to use any external system as a remote source to reference images, videos, or other content in your content items. You can choose to connect to one of the predefined sources, such as Commerce Layer, Commercetools, and Typeform systems, or add a custom one. See the detailed explanation below.

Add a custom remote source

Important

This option requires setting up the API endpoint that Prepr will use to access your external system. Learn more about custom integration.

To add a custom remote source, follow these steps:

  1. Click the Schema tab to open the Schema Editor.
  2. On the Schema Editor page, navigate to the Remote content section and click Add source.
  3. In the opened dialog window, choose to add a custom source.

Custom remote source

  1. In the next screen, name and describe the source as follows, then click Add.

Field
Description
Display nameA unique name to identify this source in Prepr.
Type nameA name used for accessing this source through the API. The value is generated automatically and matches the Display name you specified.
Base URLThe endpoint URL that is used to make the API calls. Refer to your external system API specification.
Domain(s)An external system domain to be allowed in Prepr. It guarantees Prepr will use only domains approved for authorized access to data.
HeaderAdd the key-value pair to pass additional information about your API request. This key-value array will be returned within the Content item response.
ButtonA unique name to identify this source in a content item.
IconAn icon to identify this source in a content item.
  1. Add fields to your remote source in Prepr and map them to the corresponding fields in the external system. Prepr will use those fields to retrieve and store content from your external system.

To add fields to the remote source, drag and drop the desired field type from the list on the right into your source. You can choose from the following field types:

Select a field

Then, set the Display name to the Prepr field name and set the Source API ID to the corresponding field name from your external system:

Fill in a field

See what's next to complete the setup.

Connect to a pre-built remote source

Important

An additional configuration is required on the chosen external system side. Follow the corresponding guidance in Integrations.

To connect to a pre-built remote source, follow these steps:

  1. Click the Schema tab to open the Schema Editor.
  2. On the Schema Editor page, navigate to the Remote content section and click Add source.
  3. In the opened dialog window, choose to connect to the desired source. Prepr supports native integrations with Commerce Layer, Commercetool, and Typeform.

Pre-built remote source

  1. In the next screen, name and describe the source as follows, then click Add.

Commercetools

Field
Description
Display nameA unique name to identify this source in Prepr.
Type nameA name used for accessing this source through the API. The value is generated automatically and matches the Display name you specified.
Project keyThe identifier of your Project. Copy the 'project_key' value from your API Client information.
Client IDYour client credential that is used to obtain an access token. Copy the 'client_id' value from your API Client information.
SecretYour client credential that is used to obtain an access token. Copy the 'secret' value from your API Client information.
ScopeThe scope defines the endpoints to which a client has access and the permissions. Copy the 'scope' value from your API Client information.
API URLThe endpoint URL that is used to make the API calls. Copy the 'API URL' value from your API Client information.
Authorization URLThe authorization URL that is used to obtain an access token. Copy the 'Auth URL' value from your API Client information.
Display localeLocale defines content language. Select a preferred language to use in the API requests to Commercetools.

Commerce Layer

Field
Description
Display nameA unique name to identify this source in Prepr.
Type nameA name used for accessing this source through the API. The value is generated automatically and matches the Display name you specified.
Base URLThe endpoint URL that is used to make the API calls. Copy the value from the Commerce Layer API specification.
Client IDYour client credential that is used to obtain an access token. Copy the 'client_id' value from your Integration API credentials.
SecretYour client credential that is used to obtain an access token. Copy the 'client_secret' value from your Integration API credentials.

Typeform

When connecting to Typeform, log in to your Typeform account and grant Prepr permissions to retrieve the Typeform data.


Once you've connected to one of the pre-built remote sources, Prepr will automatically create the necessary fields based on that integration (see the example below).

Pre-built source fields

See what's next to complete the setup.

What's next?

Once you've set up the remote source, proceed with the following steps:

  1. Add the remote source to your model using the Remote content field.
  2. Add remote content to your content items.
  3. Retrieve data using the API from your front end.

Note

Prepr will synchronize your remote content automatically to keep it up to date.