Cómo generar el HTML de tu campaña con agentes de IA

1. Introducción.

Cada vez es más frecuente recurrir a agentes de inteligencia artificial como ChatGPT, Claude, Gemini o Copilot para generar el HTML de una campaña y conseguir una personalización avanzada sin escribir el código a mano.

Antes de hacerlo, recuerda que Cool Tabs incorpora su propia IA para ajustar el diseño de tu campaña directamente desde el editor (Agente IA para personalizar estilos de tu campaña). 

Si aun así decides usar un agente de IA externo, ten en cuenta que no conoce los requisitos técnicos de Cool Tabs. Un HTML generado sin ellos puede verse perfecto y, sin embargo:

• No registrar las visitas en las estadísticas de la campaña.
• Dejar sin funcionar botones como Participar o Compartir.
• Mostrar la campaña en un idioma incorrecto o sin los estilos base.

En este tutorial te explicamos qué debe incluir obligatoriamente ese HTML y te damos unas instrucciones listas para copiar y pegar en tu agente de IA, para que el código que genere funcione correctamente en Cool Tabs.

El HTML propio solo está disponible en campañas con White Label.

2. Requisitos obligatorios: las 4 variables de Cool Tabs.

Todo HTML propio debe incluir estas 4 variables obligatorias, en este orden y en estos lugares:

1) {{{ cool_tabs_html_attributes }}} dentro de la etiqueta <html>

2) <!-- {{{ cool_tabs_head }}} --> entre las etiquetas <head></head>

3) {{{ cool_tabs_body_attributes }}} dentro de la etiqueta <body>

4) <!-- {{{ cool_tabs_body_end }}} --> al final del <body>, justo antes de </body>

Sin estas cuatro variables tu campaña no funcionará correctamente. No tendrás acceso a las estadísticas de Cool Tabs (como las visitas), ni a otras características como el idioma de la campaña o los estilos básicos.

Ten en cuenta que:

• Las variables 2 y 4 van dentro de un comentario HTML <!-- -->. Es intencionado, no lo elimines.
• Todas las variables van entre tres llaves {{{ }}} y se escriben exactamente así, sin traducir ni modificar.
• Son necesarias en cada pantalla en la que uses HTML propio: landing, formulario, página tras participar, listado de participantes, participante individual y ganadores.
• El HTML del email/SMS y el de las instrucciones del cupón son fragmentos de contenido, no llevan estas variables.

Estructura mínima:

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

    <!-- Contenido de la pantalla -->

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

3. Instrucciones para tu agente de IA.

Copia el siguiente texto y pégalo al principio de tu conversación con el agente de IA, antes de describirle el diseño que quieres. Después indícale qué pantalla quieres generar (landing, formulario, página tras participar, etc.).

También puedes pegarle directamente el enlace a este tutorial.

Vas a generar HTML para una campaña creada en Cool Tabs. Cool Tabs procesa este HTML
con su propio motor de plantillas, así que debes cumplir estas reglas sin excepción:

1. Entrega SIEMPRE un documento HTML completo con esta estructura exacta:

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
  <head>
    <!-- {{{ cool_tabs_head }}} -->
    (aquí puedes añadir <meta>, fuentes y <style>)
  </head>
  <body {{{ cool_tabs_body_attributes }}} >
    (aquí va el contenido de la pantalla)
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

2. Las 4 variables {{{ cool_tabs_html_attributes }}}, <!-- {{{ cool_tabs_head }}} -->,
   {{{ cool_tabs_body_attributes }}} y <!-- {{{ cool_tabs_body_end }}} --> son
   obligatorias, aparecen una sola vez y no se pueden renombrar, traducir ni
   quitar de su comentario HTML. <!-- {{{ cool_tabs_body_end }}} --> va siempre
   justo antes de </body>.

3. Los botones de Cool Tabs funcionan por clase CSS, no por URL. Úsalos así:
   <a href="#" class="x_cool_tabs_participate_button">Participar</a>
   Clases disponibles: 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. No sustituyas estos botones por enlaces
   propios ni por JavaScript.

4. En el formulario de participación es obligatorio incluir {{{ cool_tabs_form }}}
   dentro del <body>. No crees formularios propios.

5. Usa solo variables documentadas por Cool Tabs (por ejemplo {{{ title }}},
   {{{ description }}}, {{{ promotion_image }}}, {{{ thanks_message }}},
   {{{ first_name }}}). No inventes variables. Las variables llevan tres llaves;
   los condicionales e iteradores, dos: {{#nombre}}...{{/nombre}}.

6. No añadas scripts de analítica ni de seguimiento: las estadísticas las
   registra Cool Tabs.

7. Antes de entregar el HTML, comprueba que cumple todas estas reglas y
   corrígelo si falta algo.

Puedes pedirle además que consulte la lista completa de variables.

4. Plantillas por pantalla.

Estas plantillas son un punto de partida válido para pedir a tu agente de IA que las adapte a tu diseño. Cada pantalla tiene un elemento imprescindible además de las 4 variables.

4.1. Landing.

<!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">PARTICIPA</a></p>
      <p><a href="#" class="x_cool_tabs_share_button">COMPARTIR</a></p>
      <p><a href="#" class="x_cool_tabs_legal_options_button">Bases legales</a></p>
    </div>
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

4.2. Formulario de participación.

<!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. Página tras participar.

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

Para el listado de participantes, el participante individual y la página de ganadores, consulta las plantillas del tutorial Personalización avanzada con HTML propio. Si tu campaña tiene un pie de página común, incluye {{{ campaign_footer }}} donde quieras mostrarlo (cómo añadir un footer).

5. Comprobaciones antes de publicar.

Antes de pegar en Cool Tabs el HTML que te ha dado el agente de IA, revisa estos puntos en cada pantalla:

• {{{ cool_tabs_html_attributes }}} está dentro de la etiqueta <html>.
• <!-- {{{ cool_tabs_head }}} --> está dentro de <head>.
• {{{ cool_tabs_body_attributes }}} está dentro de la etiqueta <body>.
• <!-- {{{ cool_tabs_body_end }}} --> está justo antes de </body>.
• Los nombres de las variables están escritos exactamente igual y con tres llaves.
• En el formulario aparece {{{ cool_tabs_form }}}.
• Los botones usan las clases x_cool_tabs_… con href="#".

Después, pega el HTML en el campo correspondiente, guarda y compruébalo desde la previsualización de la campaña. Haz clic en los botones y verifica que el formulario aparece. 

Te recomendamos editar el HTML desde la previsualización, ya que te permite ver el resultado al momento.

6. Problemas frecuentes.

Ten en cuenta que las visitas que no se registraron mientras faltaban las variables no se pueden recuperar. Las estadísticas se registran en tiempo real desde el momento en que el código de Cool Tabs está activo en la landing. Una vez corregido el HTML, tendrás disponibles todos los datos desde ese momento.

7. Otras especificaciones.

El uso de HTML propio solo está disponible en campañas con creadas con plan Diamond.

Cool Tabs no puede revisar ni garantizar el código generado por agentes de IA externos. Si después de aplicar este tutorial tu campaña sigue sin funcionar correctamente, contacta con nosotros en help@cool-tabs.com indicando el enlace de tu campaña.

8. Contenido relacionado.

Personalización avanzada con HTML propio.

Personalización avanzada de una campaña mediante variables.

Cómo configurar la CSS personalizada de una campaña.