> ## Documentation Index > Fetch the complete documentation index at: https://docs.topsort.com/llms.txt > Use this file to discover all available pages before exploring further. # Native Ads Banner Templating export const LastUpdated = ({date, lang = "en"}) => { const translations = { en: "Last updated:", es: "Última actualización:", pt: "Última atualização:", fr: "Dernière mise à jour:", de: "Zuletzt aktualisiert:" }; const label = translations[lang] || translations.en; return <>
{label} 
; };
Marketplaces use native ads that consist not just of images, but also multiple text fields, background images, foreground images, and other customizable elements. These elements can vary across different placements, making it challenging to maintain consistency and streamline ad creation across campaigns.
Creative templates provide a solution by offering pre-designed banners that enable teams to quickly build ads following a structured, repeatable framework. These templates are highly customizable and can include specific fields. Whether you need fields for a button, images, headlines, custom parameters, or other design elements, templates allow you to standardize and simplify the process.
example of a banner ad. **Template Management Limitation**: Currently, templates cannot be edited or deleted once created. Plan your template structure carefully before creation to ensure it meets your long-term campaign needs. ## How It Works ### Creating a New Template
Retailers can create custom templates tailored to their needs. These templates can be configured with various fields, such as text, images, external links, and other elements, to meet the specific requirements of the placement. Here's how you can create and configure a new template:
* **Field Type**: Choose from text, image, select, button, link, etc. * **Variable**: The variable name that the field is going to use. * **Field Name**: Define a clear label for the field to identify it in the campaign creation process. * **Description**: Provide an explanation or instructions about what should be entered into the field. * **Required or Optional**: Decide if the field is mandatory for advertisers to complete, or if it can be left blank. * **MinLength**: min number of chars for text fields * **MaxLength**: max number of chars for text fields * **Default**: default value for the field * **Prefix**: for fields of type link, they will start with the prefix * **MultiSelect**: for fields of type select if the user should select one or multiple * **Options (querystring)**: keys and values for fields of type select
This can be done using a CSV or the UI
Screenshot of creating new template
Screenshot of reviewing new template
** Screenshot of reviewing new template**
### Dynamic Preview Configuration **Dynamic Preview Availability**: Dynamic preview functionality is only available for templates that specifically enable this feature during creation.
Dynamic preview URLs allow real-time visualization of how template fields will appear in the actual ad placement. The preview system loads your specified URL in an iframe and dynamically populates template variables with campaign data.
Before configuring dynamic preview in the template, ensure you have a preview URL available that can render the template structure. This could be on your local development environment or a deployed staging application.
Set up your dynamic preview URL using template variable placeholders. The URL structure should include parameters that correspond to your template fields:
``` https://your-preview-domain.com/?slotId=slot-1&headline={headline}&mainImage={urlEncodedImageURL}&price={price}&availability={availability} ```
The preview system will automatically replace template variables in the URL with actual values as advertisers fill out campaign fields, enabling real-time preview updates.
Your preview URL should include the necessary client-side logic to locate and populate template elements with the provided parameters.
**Preview URL Requirements**: Your preview URL must be accessible and include the necessary rendering logic to display template content correctly. The system uses client-side JavaScript to override content within designated template elements. ### Using Templates Screenshot of picking an existing template Screenshot of selecting existing template Screenshot of filling in existing template Screenshot of using template in campaign ## Template Response Structure
Each winner in the auction response includes a `content` object containing the parameters configured during campaign creation:
```json theme={null} { "results": [ { "resultType": "banners", "winners": [ { "rank": 1, "asset": [ { "url": "https://topsortassets.com/000.json", "content": { "cta": "Shop Now", "mainImage": "https://topsortassets.com/0001.png", "headline": "Test Headline", "backgroundImage": "https://topsortassets.com/0002.jpeg" } } ], "type": "url", "id": "http://topsort.com", "resolvedBidId": "ChAGiHlBYmh4DaUEsuubfw7wEhABl8c_uHx3Aa8pw_EgHrHIGhABjoa6wYJ3wqhfIGHIdxYgIhYKEmh0dHA6Ly90b3Bzb3J0LmNvbRAFMOGtDw", "vendorId": "babolat", "campaignId": "0197c73f-b87c-7701-af29-c3f1201eb1c8" } ], "error": false } ] } ```
The `content` object structure directly corresponds to the template fields configured during template creation, enabling your frontend to dynamically render the appropriate creative elements for each placement.
**Implementation Note**: Use the template field variables as keys in your rendering logic to ensure consistency between campaign configuration and frontend display across all placements. ***