> For the complete documentation index, see [llms.txt](https://docs.responsiveads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.responsiveads.com/creating-ads/variants/creating-dynamic-carousels-with-the-json-data-feed-api-in-editor.md). # 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. {% embed url="" %} ### 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= ``` Replace `` 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.responsiveads.com/creating-ads/variants/creating-dynamic-carousels-with-the-json-data-feed-api-in-editor.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.