How to generate your campaign’s HTML with AI agents

1. Introduction.

It is increasingly common to use AI agents such as ChatGPT, Claude, Gemini or Copilot to generate the HTML for a campaign and achieve advanced customization without writing the code by hand.

Before you do, remember that Cool Tabs includes its own AI to adjust the design of your campaign directly from the editor (AI agent to customize your campaign styles). 

If you still decide to use an external AI agent, keep in mind that it does not know Cool Tabs' technical requirements. HTML generated without them may look perfect and yet:

• Fail to record visits in the campaign statistics.
• Leave buttons such as Participate or Share not working.
• Display the campaign in the wrong language or without the base styles.

In this tutorial we explain what this HTML must include and give you ready-to-paste instructions for your AI agent, so that the code it generates works correctly in Cool Tabs.

Custom HTML is only available in campaigns with White Label.

2. Mandatory requirements: the 4 Cool Tabs variables.

All custom HTML must include these 4 mandatory variables, in this order and in these places:

1) {{{ cool_tabs_html_attributes }}} inside the <html> tag

2) <!-- {{{ cool_tabs_head }}} --> between the <head></head> tags

3) {{{ cool_tabs_body_attributes }}} inside the <body> tag

4) <!-- {{{ cool_tabs_body_end }}} --> at the end of the <body>, right before </body>

Without these four variables your campaign will not work correctly. You will not have access to Cool Tabs statistics (such as visits), or to other features such as the campaign language or the base styles.

Keep in mind that:

• Variables 2 and 4 go inside an HTML comment <!-- -->. This is intentional; do not remove it.
• All variables go between triple curly braces {{{ }}} and must be written exactly like this, without translating or modifying them.
• They are required on every screen where you use custom HTML: landing page, form, post-participation page, participant list, individual participant and winners.
• The email/SMS HTML and the coupon instructions HTML are content fragments and do not include these variables.

Minimum structure:

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
  <head>
    <!-- {{{ cool_tabs_head }}} -->
  </head>
  <body {{{ cool_tabs_body_attributes }}} >

    <!-- Screen content -->

    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

3. Instructions for your AI agent.

Copy the following text and paste it at the beginning of your conversation with the AI agent, before describing the design you want. Then tell it which screen you want to generate (landing page, form, post-participation page, etc.).

You can also paste the link to this tutorial directly.

You are going to generate HTML for a campaign created in Cool Tabs. Cool Tabs processes
this HTML with its own template engine, so you must follow these rules without exception:

1. ALWAYS deliver a complete HTML document with this exact structure:

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
  <head>
    <!-- {{{ cool_tabs_head }}} -->
    (here you can add <meta>, fonts and <style>)
  </head>
  <body {{{ cool_tabs_body_attributes }}} >
    (the screen content goes here)
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

2. The 4 variables {{{ cool_tabs_html_attributes }}}, <!-- {{{ cool_tabs_head }}} -->,
   {{{ cool_tabs_body_attributes }}} and <!-- {{{ cool_tabs_body_end }}} --> are
   mandatory, appear only once and must not be renamed, translated or
   removed from their HTML comment. <!-- {{{ cool_tabs_body_end }}} --> always goes
   right before </body>.

3. Cool Tabs buttons work by CSS class, not by URL. Use them like this:
   <a href="#" class="x_cool_tabs_participate_button">Participate</a>
   Available classes: x_cool_tabs_participate_button, x_cool_tabs_share_button,
   x_cool_tabs_share_button_participation, x_cool_tabs_legal_options_button,
   x_cool_tabs_participations_link, x_cool_tabs_my_participation_button,
   x_cool_tabs_quizz_results_link. Do not replace these buttons with your own
   links or with JavaScript.

4. In the participation form you must include {{{ cool_tabs_form }}}
   inside the <body>. Do not create your own forms.

5. Use only variables documented by Cool Tabs (for example {{{ title }}},
   {{{ description }}}, {{{ promotion_image }}}, {{{ thanks_message }}},
   {{{ first_name }}}). Do not invent variables. Variables use triple curly braces;
   conditionals and iterators use double: {{#name}}...{{/name}}.

6. Do not add analytics or tracking scripts: statistics are recorded
   by Cool Tabs.

7. Before delivering the HTML, check that it complies with all these rules and
   fix it if anything is missing.

You can also ask it to check the full list of variables.

4. Templates by screen.

These templates are a valid starting point to ask your AI agent to adapt them to your design. Each screen has one essential element in addition to the 4 variables.

4.1. Landing page.

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
  <head>
    <!-- {{{ cool_tabs_head }}} -->
  </head>
  <body {{{ cool_tabs_body_attributes }}} >
    <div class="wrapper">
      <h1>{{{ title }}}</h1>
      {{{ description }}}
      <p><a href="#" class="x_cool_tabs_participate_button m_btn">PARTICIPATE</a></p>
      <p><a href="#" class="x_cool_tabs_share_button">SHARE</a></p>
      <p><a href="#" class="x_cool_tabs_legal_options_button">Terms and conditions</a></p>
    </div>
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

4.2. Participation form.

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
  <head>
    <!-- {{{ cool_tabs_head }}} -->
  </head>
  <body {{{ cool_tabs_body_attributes }}} >
    <div class="wrapper form_layout">
      {{{ cool_tabs_form }}}
    </div>
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

4.3. Post-participation page.

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
  <head>
    <!-- {{{ cool_tabs_head }}} -->
  </head>
  <body {{{ cool_tabs_body_attributes }}} >
    <div class="wrapper">
      <h1>Thank you, {{{ first_name }}}!</h1>
      <div>{{{ thanks_message }}}</div>
      <p><a href="#" class="x_cool_tabs_share_button_participation m_btn">SHARE</a></p>
    </div>
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

For the participant list, individual participant and winners page, see the templates in the Advanced Personalization with custom HTML tutorial. If your campaign has a shared footer, include {{{ campaign_footer }}} wherever you want it to appear (how to add a custom footer).

5. Checks before publishing.

Before pasting the HTML provided by the AI agent into Cool Tabs, check these points on every screen:

• {{{ cool_tabs_html_attributes }}} is inside the <html> tag.
• <!-- {{{ cool_tabs_head }}} --> is inside <head>.
• {{{ cool_tabs_body_attributes }}} is inside the <body> tag.
• <!-- {{{ cool_tabs_body_end }}} --> is right before </body>.
• Variable names are written exactly the same and with triple curly braces.
• {{{ cool_tabs_form }}} appears in the form.
• Buttons use the x_cool_tabs_… classes with href="#".

Then paste the HTML into the corresponding field, save and check it from the campaign preview. Click the buttons and make sure the form appears. 

We recommend editing the HTML from the preview, as it lets you see the result instantly.

6. Common issues.

Keep in mind that visits that were not recorded while the variables were missing cannot be recovered. Statistics are recorded in real time from the moment the Cool Tabs code is active on the landing page. Once the HTML is fixed, all data will be available from that moment on.

7. Other specifications.

Custom HTML is only available in campaigns created with the Diamond plan.

Cool Tabs cannot review or guarantee code generated by external AI agents. If your campaign still does not work correctly after following this tutorial, contact us at help@cool-tabs.com and include the link to your campaign.

8. Related content.

Advanced Personalization with custom HTML.

Advanced personalization for your campaign with variables.

How to configure custom CSS for your campaign.