Creating Dynamic Carousels with the JSON Data Feed API (In-Editor)

ResponsiveAds also supports connecting a carousel directly to a JSON feed from within the editor, without touching the Custom Code Editor. Using the Data Source Settings panel, you can map individual slide elements (images, CTAs, click-throughs, text) to properties in your JSON feed by name. The carousel then renders one slide per item in the feed, using a single template slide as the design reference.

This approach is ideal when you already have a JSON endpoint and want a fast, no-code way to wire up dynamic slides.

Why Use the In-Editor JSON Feed API?

• No custom code – elements are connected through the editor UI.

• Template-driven – design one slide, the feed generates the rest.

• Property-based mapping – fields in your feed map directly to elements by name.

• Live updates – content changes in your feed flow into the creative automatically.

How It Works

A carousel contains one template slide that defines the layout. Each element inside that slide (image, CTA, click-through, text) is bound to a property in your JSON feed. When the ad serves, the carousel duplicates the template slide once per item in the feed and populates each copy with the corresponding values.

Example feed item properties:

• image_url – the slide image

• click_through_url – the destination URL for the slide

• brand – text used for the CTA label or other text fields

• Additional custom properties as needed

Preparing Your JSON Feed

Your feed should return a list of items, where each item is an object containing the properties you want to bind to slide elements. The property names you use in the feed are what you'll reference inside the editor, so keep them consistent (e.g. image_url, click_through_url, brand).

Once your feed is live, copy the feed URL to your clipboard.

Enabling Dynamic Slides on the Carousel

1. Open your creative in the editor.

2. Select the Carousel element in the left-side panel.

3. In the right-side panel, open the Setup section and find Data Source Settings.

4. Enable the Dynamic Slides toggle.

5. Under Select Data Source Type, choose JSON Data Feed API.

6. Paste your feed URL into the input field at the top.

The carousel is now connected to your feed. Next, bind each element inside the template slide to a property.

Handling CORS

Because the ad fetches your JSON feed directly from the browser at serve time, the feed's server must allow cross-origin requests (i.e. return the appropriate Access-Control-Allow-Origin headers). If your feed endpoint doesn't support CORS, the ad will fail to load the data and your slides won't populate.

If you can't enable CORS on the source, you can route the request through the ResponsiveAds file cache, which acts as a CORS-friendly proxy:

https://file-cache.responsiveads.com/?url=<YOUR_JSON_FEED_URL>

Replace <YOUR_JSON_FEED_URL> with your original feed URL (URL-encoded if it contains special characters). Use this proxied URL as the feed URL when configuring the carousel's Data Source Settings.

Notes:

• Responses are cached based on the full request URL. If your feed updates frequently and you need fresher data, append a cachebuster parameter (e.g. &cachebuster=1) and change its value whenever you want to force a refresh.

• The proxy is intended as a workaround — when possible, enabling CORS directly on the feed source is the cleaner option.

Binding Slide Elements to Feed Properties

For every element inside the template slide that should be dynamic, repeat the following:

1. Select the element in the left-side panel (e.g. Click-through, CTA, Image).

2. In the right-side panel, open Setup → Data Source Settings.

3. Toggle on the property you want to drive dynamically:

   • Click-through element → Click URL Action

   • CTA element → Text

   • Image element → Image

4. For Select Data Source Type, choose Parent Feed Carousel Slide. This tells the editor to pull the value from the current slide's item in the parent carousel's feed (rather than fetching a separate feed).

5. In the Data Source Name field, paste the exact property name from your feed (e.g. click_through_url, brand, image_url).

Element-to-Property Mapping (Example)

• Click-through URL element → click_through_url

• CTA text element → brand

• Image element → image_url

Setting a Dynamic CTA Click-Through (Workaround)

Binding a CTA's click-through URL via Data Source Settings is not currently supported. As a workaround, you can wire up a dynamic CTA destination using the standard Open URL field with a feed:// reference.

Instead of toggling on a data source for the CTA's click action, you point the CTA's Open URL directly at a property in the parent carousel slide's feed item using this syntax:

feed://{propertyNameFromFeed}

The carousel resolves feed:// references against the current slide's feed item, substituting the value of the named property at serve time.

Steps

1. Select the CTA element inside the template slide.

2. In the right-side panel, open the Setup section and find the click action / Open URL field (the standard one — not Data Source Settings).

3. Set the action to Open URL.

4. In the URL field, enter feed:// followed by the exact property name from your feed.

Example

If your feed items contain a click_thru_url property:

feed://click_thru_url

Each slide's CTA will then link to the click_thru_url value from its corresponding feed item.

Saving and Previewing

1. Save the creative and wait for the save to complete.

2. Open the Preview page from the Summary view.

3. Confirm that the carousel renders one slide per item in the feed, with each element populated from its mapped property.

4. Check the Responsive and Breakout views to verify the slides display correctly across formats.

Tips

• Property names are case-sensitive and must match the feed exactly.

• Use Parent Feed Carousel Slide (not JSON Data Feed API) when binding elements inside a carousel slide — only the carousel itself points at the feed URL.

• If a slide appears blank or shows the template value, double-check the Data Source Name spelling against your feed.

• To change content, update your JSON feed at its source; the creative will reflect the new items on the next fetch.