---
title: Integrate external content sources with CMS (SaaS)
slug: cms-saas/docs/integrate-external-resources
docTags: 
createdAt: 2026-07-30T20:18:10.000Z
---

Optimizely Content Management System (SaaS) can use external content sources without duplicating or migrating the content, which dramatically reduces operational overhead. This topic describes how to integrate and manage external resources within the CMS (SaaS) environment. It covers connecting external content sources like DAM systems, PIMs, or other third-party applications, setting up mappings, and managing content types to enable seamless access to external content.

## Part 1 – Configure a data sync

:::hint{type="info"}
**Note**
Before you begin, ensure that the external application (for example, Bynder, Shopify) is installed and configured within your Optimizely Connect Platform (OCP) instance. For details on installing apps, see [App Directory Overview](docId\:kxAXlnJ4jG30wcVnhkwwy) in OCP documentation.

Currently, all external applications are grouped under **OCP App** in the source selection. These may be later separated into individual source groups, such as Bynder or Shopify, for clearer identification.
:::

To use external content in Optimizely CMS (SaaS), configure a data sync. This involves defining your external data source, setting Optimizely Graph as the destination, and mapping content types for seamless integration.

1. In Optimizely Connect Platform (OCP), go to **Data Setup > App Directory** to display the available integration apps.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/gClgd1ju9HaDSOe8R_G2M_5260212871e12d50afb2cbe9af1bed9ff8d1addac24a77de706265bfe842244f-external-content-01.png)

2. Select the desired app, for example, Bynder.
3. Select the **Sync Manager** window, which displays sources that are already connected.
4. Click **New Sync**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/4aUq0xTsx6fhPjtptVpuK_3cbc3b46097bc8dd17ec257214d3596462883b639e94c0b3d4045bbf1e11d5bf-external-content-02.png)

5. On the **Create a new sync** configuration page, define the following:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/stnST6ybMJuaO79NGKRUu_06156d7bae6d3aa2c14e7db7120e3e55ff69ff07bf86d48634576bec0b989597-image.png)

:::Paragraph{listStyleType="disc" indent="2"}
**Sync Name** – Enter a descriptive name for your sync in the **Sync Name** field (for example, *BynderImage*).
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Source** – Select a source of the data, for example, the **OCP App**.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**App** – Select the external application, for example, **Bynder**.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Object** – Select the type of content you want to sync, for example, **image**.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Destination** – Select the Optimizely product, for example, **Optimizely Graph**, as the destination to sync data with.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Instance** – Select the instance, for example, **Optimizely ExtC Demo**.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Content Type** – Select from any of your existing schemas in Optimizely Graph, or you can create a content type, for example, **BynderImage**. To create a content type, select **Clone Source Schema** from the dropdown and fill in the **Add New Object** window as shown in the following example. Click **Apply**. Once created, select your new content type (**BynderImage**) from the dropdown.
:::

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/J02JOFd0RmLfVqVhs-TPm_31ff93db5d4c43e3944eb48f0e917868b20a57eedb93b874de326931ca09e8e2-external-content-08.png)

:::Paragraph{listStyleType="disc" indent="2"}
**Make available in CMS content** – Select this option to use synced content in CMS (SaaS).
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Status** – Select the content status you want. For example, select **Published** to ensure assets coming to CMS (SaaS) are published assets.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Language** – Select the language as required, or **Neutral**.
:::

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/zgrgARE51_Fmih-XjcvWN_3fa3a777385e441edfa3b3c450cd5c5f6a85ddd80453765f030898a8addcfd80-external-content-09.png)

6. Scroll down to the **Field Mappings** section to connect source fields with matching destination fields. Fields that are indicated with a red asterisk are required. For example, click **Select source field** that corresponds to Optimizely Graph's **Mime Type**.  The **Select Source Field** window displays.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/jiBuTTFeS3bqFqgUgIcN-_d934ef93fa7e918fee9c529d490f91aa6fc9ebedca3cb432117cc70c99b4079c-image.png)

7. Select the source field you want to map. For example, select the Bynder source field **Type** to map to Optimizely Graph's **Mime Type**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/EuIo65S_d2Km-r5AY0RWv_925888f36b656b075d52fa5cb72122868b7a4672c47b820bf95fba156d70de81-image.png)

Continue selecting matching fields until all required fields are mapped.

8. Click **Save** to create the sync, which displays as **Active** in the **Sync Manager** window.

:::hint{type="info"}
**Note**
When the sync is created, everything that gets added, deleted, or modified in Bynder is automatically synced by OCP and made available in your CMS.
:::

9. Select **More** (**...**) > **Trigger Now** to immediately trigger the initial data sync to make the assets from the source available to the CMS.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2XqXr2Q0EH59KqHlwYtAq_e5aacca5bbad4d86cf6b2bbc4a05ac8bae9155efbdedbc73451919e2831fd0fb-azza.png)

## Part 2 – Use synced assets in CMS (SaaS)

Once your data sync is complete, you can immediately access and use individual synced assets, such as images, directly within your CMS. This is useful for scenarios where you need to select a single asset without requiring a full content type mapping to a CMS block.

After configuring your data sync, map the external content type to an existing CMS content type to ensure the synced content is usable. This mapping lets you integrate and display external assets directly within your CMS pages, for example, replacing images in a **Teaser** block.

1. In Content Manager, select **OCP**.  Content Manager displays only the content synced with OCP. You can select other content sources.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/sZm6A3WocpUmxxjEiYaZJ_b7ac545cf77e74c1c1e26e643cde01da39abd189b15d84a39f26d516d560ed37-image.png)

You can use filters to further refine the display. Clicking **BynderImage** displays the images synced between OCP and CMS (SaaS).

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/6AQw8lpANL-OBrt7RfrLO_431564cda19b5584ac3b128efc807f3713c83a3b64d8fca1085043ab3af435de-image.png)

2. In the Visual Builder editor, the **Teaser Block** shows an image to replace with an image from your **BynderImage** content.  Select **More** (**...**) > **Replace**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/FobRkku_kwq4SCoLgGYjO-20260722-181224.png)

The **Primary Image** window displays.

3. Select the desired image. **Details** display in the right panel.

:::hint{type="info"}
**Note**
When the image picker displays, you see images from all configured sources that match the image base type, including those from your DAM, CMS, and other integrated platforms.
:::

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/SLqNKoijIJI0o-2IThl7d_e83a6d4ba0b8421e2461afda0cc24e018bdc0eabb77e4e4ea9062591ce789717-external-content-14a.png)

4. Click **Select Image**. Visual Builder replaces the image and displays it in the **Teaser** block.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2p2ftqsCAhBz6GIQq89KQ_34ab8251e2f971143b83d0b8e324134889449602dcc701f926b63e5b2a1fe12e-external-content-17.png)

## Part 3 – Create content type mappings and map properties

After configuring your data sync, you must establish a content type mapping and then map individual properties. This two-step process links your external content type to a CMS content type and ensures that specific data points from your external source populate the corresponding fields within your CMS, making the synced content usable. Learn more about [connecting content sources](docId\:U0XZZaECW4DdpG6GE8eG-).

1. Go to **Settings** > **Content Types** and select the CMS content type to map, for example, the **Teaser**  block.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/vaCjrmekEV0yCpuqAxGrV_ed6f80f532ab58bdef8a42f80ca1e64883db328dfd131e106ed6e1369b9dc3aa-image.png)

2. In the **Teaser Block**, select the **Mappings** tab.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/et6DFeGcmcHOYHqIOLDxi_3aeeef0a38318538afd8842d044fad80d0af17a31a77710776ee9535a901371c-image.png)

3. Click **Create Mapping** in the **Mappings** window.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/qr4jPnTOapV7uPMLMemdK_8777bbf0e0679485d8bbebefd96f7004eb98e874ebb59c67f401eb5cb1f561f7-image.png)

4. Click the highlighted selector to ensure the **Source Content Type** is active and required.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/7Nzyc7XfFdiXAK5P5fEro_c5e7257462f3b939e9513b42ce573b77f9b6eb2a2e03f0aedf56024a3c3fddb8-image.png)

:::Paragraph{listStyleType="disc" indent="2"}
**Source Content Type** – Select the synced external content type, for example, **ShopifyProduct**.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Target Content Type** – Select your CMS content type, for example, **Teaser Block**, which is selected by default.
:::

5. Click **Create Mapping**. The **Map Properties** window displays the fields available for mapping.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/--_bmgZtdmQnj2pslWn3z_137ac6781740b66ddacfa3f256dc5513ea0dbcdb55099bd8f9b8f07b32d8b7d0-image.png)

6. The **Map Properties** window displays a list of target properties from your CMS content type (**Teaser Block**). It also displays properties without a match. For each **Target** property, select the corresponding **Source Property** from the external content type.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/6o2mZqE4TL8scWm-tW14h_f3be5b57ae204b057155cf5c3c311a88ee62fdc5b24ab40420fbcc2d63e052d1-external-content-27.png)

:::Paragraph{listStyleType="disc" indent="2"}
**Title** – Select **\_itemMetadata / displayName**.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Primary Image URL** – Select **image\_url**.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Body** – Select **body\_html**.
:::

## Part 4 – Use mapped content in CMS blocks

After configuring the data sync and mapping properties, you can use the synced content directly within your CMS pages. Add a content block that uses your mapped content type, and connect to the external content. The data from your external source will then automatically populate the block.

1. Go to a CMS page to use the synced content.
2. Add or select a content block that uses your mapped content type, for example, a **Teaser Block**.
3. For fields that are mapped to external content, for example, the **Primary Image** field, select **More** (**...**) > **Connect Content**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/MWqcNjnoVf_12BseqXODV_9ffbe8f5df59505d9987603bb4769d8eed00eb7fdf60119d9392c9ee8fce9770-image.png)

4. Content items synced from your external source display in the **Connect Content** window. Select the desired content item, for example, **Anchor Bracelet  Mens**, and click **Connect Content**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/0YZA1cMIWg-3vXs5XBxLD_ee09ffebe35c9e23626a159ffddaaea838276844af74774188adde75c5bcf6b8-image.png)

The data from your external source automatically populates the CMS content block, including images, titles, and body text.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-XpsniboNN2lqGBGHzqr__4f66bcf28aaf584d144722bf60c899573f6f94c356e1c66c20d5532950916024-external-content-32.png)