Customize a template

You can customize a template for use in GenStudio for Performance Marketing by inserting content placeholders, or fields, that the generative AI uses to insert content.

The next few sections explain how to adapt your HTML templates for GenStudio for Performance Marketing by using the Handlebars templating language. The Handlebars syntax uses regular text with double braces as content placeholders. See What is Handlebars in the Handlebars language guide to learn how to prepare your template.

Once your template is ready, you can upload it to GenStudio for Performance Marketing and start generating personalized emails based on your custom template.

Content placeholders

GenStudio for Performance Marketing recognizes certain elements within a template, but only if you identify them with a recognized field name.

Within the head or body of an HTML template, you can use the Handlebars syntax to insert a content placeholder where you require GenStudio for Performance Marketing to populate the template with actual content. GenStudio for Performance Marketing recognizes and interprets the content placeholders based on the recognized field name.

For example, you can use {{ headline }} with the Handlebars syntax to indicate where the headline of the email should be placed. GenStudio recognizes this field, generates a relevant headline based on your guidelines and prompt criteria, and inserts the headline in this location:

<div>{{ headline }}</div>

Recognized field names

The following table lists the field names recognized by GenStudio for Performance Marketing for adding a placeholder into a template. Add these field names using the Handlebars syntax to your template where you need GenStudio for Performance Marketing to generate a certain type of content.

GenStudio for Performance Marketing populates certain fields automatically in the following templates:

There is a limit of 20 fields when uploading a template to GenStudio for Performance Marketing. Since the subject field is automatically generated in an email, it counts as one field. This means that there are 19 fields allowed in an email template.

Calls to action

A Call to action (CTA) includes a phrase and a link. For the CTA Rephrase and Add link capabilities to work properly during the variant generation process, you must include placeholders for the link and the phrase in your template.

Use the following guidance to set up CTA placeholders:

GenStudio for Performance Marketing can provide variant calls-to-action phrases, too. See Revise Call to action.

Link on image

You can customize your email template to allow creatives to add a link to an image. Similar to the CTA link, use the following guidance to apply a link placeholder to an image tag:

<a href="{{link}}"><img src="image-source.jpg" alt="description"></a>

In this example:

Brand logo field name

At this time, you cannot select the brand logo for the template upload. The following examples demonstrate two methods that conditionally render the brand logo. Each method verifies the source, provides a default or alternative image in case the brand logo is not available, and applies a style:

Example 1: Using Handlebars Built-in Helpers condition directly in the HTML img src attribute:

<img src="{{#if brand_logo}}{{brand_logo}}{{else}}<default-image>{{/if}}" alt="img alt text" style="max-width: 88px; margin: 10px auto; display: block;">

Example 2: Using Handlebars Built-in condition statement to wrap the HTML img tag:

{{#if brand_logo}}
    <img src="{{brand_logo}}" alt="img alt text" style="width: 120px; height: 45px; margin: 10px auto; display: block;">
    {{else}}
    <img src="data:image/png;base64,iVBORw0KGgo..." alt="img alt text" style="width: 120px; height: 45px; margin: 10px auto; display: block;">
{{/if}}

Manual field names

All other field names are treated as manually populated fields. For example, you may want to reserve a section for footer content.

To create an editable section, add double brackets around the section name:

<tbody>
    <tr>
        <td>
            <p><span class="s1">{{ footerLegal }}</span></p>
        </td>
    </tr>
</tbody>

Sections or groups

Sections inform GenStudio for Performance Marketing that the fields in this section require a high degree of coherence. Establishing this relationship helps the AI to generate content that matches the creative elements in the section.

Use a prefix of your choice in the field name to indicate that a field is part of a section or group. Use a field name (headline, body, image, or cta) after the underscore (_). For example, the following headline and body belongs to the pod1 section:

Each section can use only one of each field type. In the above example, the pod1 section can only use one pod1_headline field. Because of this rule, the sections cannot be nested.

Each template type, such as email or Meta ad, has channel-specific constraints on the use of sections. See channel-specific guidelines in the Best practices for using templates topic.

For example, an email template can include up to three sections; therefore, you could have three headline and body sections:

GenStudio for Performance Marketing understands that pod1_headline is more closely related to pod1_body than to pod2_body.

See Structured prompts to learn how to craft a prompt that generates varying content for each section in a multi-section email.

Template preview

When you upload a template, GenStudio for Performance Marketing scans the HTML file for recognized fields. Use the preview to review your template elements and confirm that you identified them properly with the recognized field names.

Example Preview for an email template:

{modal="regular"}

See Template code editor.

Control preview

You can control the visibility of special content by using Built-in Helpers (special expressions in the Handlebars template language that perform certain actions). For example, you can add a conditional statement that adds tracking parameters to links in the exported template while keeping the preview links clean.

The _genStudio.browser value is set when rendering a template, and the genStudio.export value is set when exporting a template. You may decide to include certain content at the top of an email using a conditional wrapper, for example, when the template is used for export:

{{#if _genStudio.export}}
<%@ include view='emailParent' %>
{{/if}}

Another example may be to prevent the use of tracking codes when previewing a template in GenStudio for Performance Marketing. The following example shows how to add tracking parameters to links in the exported template, while keeping the preview links clean:

<a class="button" {{#if _genStudio.browser }}
   href="{{ link }}"{{/if}}{{#if _genStudio.export }}
   href="{{ link }}?trackingid=<%=getTrackingId()%>&mv=email"{{/if}}
   target="_blank">{{ cta }}</a>

Static content

Email and Meta templates often link to images and CSS files hosted on other domains. When GenStudio for Performance Marketing generates thumbnails for template previews or the experiences derived from them, it validates the content source and embeds a copy for preview purposes.

External files are temporarily embedded only for the purpose of creating the template preview, which ensures that the preview accurately reflects the content as it appears at the time of creation. These external files are not stored permanently in GenStudio for Performance Marketing. After the template preview is created, GenStudio for Performance Marketing continues to reference the original source link provided in the template.

Refresh content

If the source changes after creating the initial preview, use the refresh function to update the template preview with the most recent version of the content from the external sources.

Template examples

<!DOCTYPE html>
<html>
<head>
    <title>Adobe</title>
    <style>
        .container {
            width: 100%;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>{{ pre_header }}
    <div class="container">
        <h1>{{ headline }}</h1>
        <p><a href="{{ link }}">
           <img alt="{{ headline }}"
                src="{{ image }}"
                width="600" height="600"
                border="0"/></a></p>
        <p>{{ body }}</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Adobe</title>
    <style>
        .container {
            width: 100%;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .pod {
            background-color: #f8f8f8;
            margin: 10px;
            padding: 20px;
            border-radius: 5px;
        }
        .pod h2 {
            color: #333;
        }
        .pod p {
            color: #666;
        }
    </style>
</head>
<body>{{ pre_header }}
    <div class="container">
        <h1>{{ headline }}</h1>
        <p>{{ body }}</p>
        <!-- Pod1 -->
        <div class="pod">
            <h2>{{ pod1_headline }}</h2>
            <p><img alt="{{ headline }}" src="{{ pod1_image }}" width="200" height="200" border="0"></p>
            <p>{{ pod1_body }}</p>
        </div>
        <!-- End of Pod1 -->
        <!-- Pod2 -->
        <div class="pod">
            <h2>{{ pod2_headline }}</h2>
            <p><img alt="{{ headline }}" src="{{ pod2_image }}" width="200" height="200" border="0"></p>
            <p>{{ pod2_body }}</p>
        </div>
        <!-- End of Pod2 -->
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adobe</title>
    <style>
        .ad-container {
            width: 300px;
            border: 1px solid #ddd;
            padding: 16px;
            font-family: Arial, sans-serif;
        }
        .ad-image {
            width: 100%;
            height: auto;
        }
        .ad-headline {
            font-size: 18px;
            font-weight: bold;
            margin: 12px 0;
        }
        .ad-body {
            font-size: 14px;
            margin: 12px 0;
        }
        .ad-cta {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="ad-container">
    <img src="{{ image }}" alt="Ad Image" class="ad-image">
    <div class="ad-headline">{{ headline }}</div>
    <div class="ad-body">{{ body }}</div>
    <a href="{{ link }}" class="ad-cta">{{ CTA }}</a>
</div>
</body>
</html>