La página principal de una promoción o concurso, la del formulario de participación, la de gracias, la de ganadores o la de las instrucciones de uso de cupones descuento contienen varios elementos por defecto que puedes modificar u ocultar, incluyendo una css personalizada [Consulta nuestra Guía de Estilos para crear tu css personalizada].


Sin embargo, gracias al sistema de plantillas de Cool Tabs, puedes ir un paso más allá e incluir tu propio html en la landing, en la página del formulario de participación, en la página tras participar (página de gracias), en la de ganadores, en el email que se envía al concursante tras participar y en la página de instrucciones que deben seguir los participantes para utilizar un cupón de descuento. En este tutorial te contamos cómo hacerlo.


¿Cómo se crea un html propio para las distintas pantallas de tu campaña con el sistema de plantillas de Cool Tabs?


En la sección "Diseño de la promoción" de las aplicaciones Cool Promo White Label y Cool Quiz White Label hay 4 campos referentes al uso de un html propio para la landing, un html propio para el formulario de participación, para la página tras participar y otro para la de ganadores, tal y como puedes observar en la siguiente captura:



htm-personalizada.jpg




Además, puedes editar el html de la landing y de la página tras participar desde la previsualización, que sería el sitio idóneo, ya que podrás ir modificando el propio html y la css, guardando y viendo el resultado directamente. Para acceder a esta opción, si estás en la landing, ve al menú lateral izquierdo y en diseño básico encontrarás la opción de editar el html, tal y como muestra la siguiente captura:





Solo tienes que hacer clic en "Editar con ventana maximizada" para trabajar cómodamente en nuestro html.



Plantilla con html para la landing


Hay dos {{etiquetas de handlebars}} que deben incluirse SIEMPRE: <!-- {{{ cool_tabs_head }}} --> entre las etiquetas <head></head> y <!-- {{{ cool_tabs_body_end }}} --> al final del <body>, tal y como mostramos continuación:


<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

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



Sin estas variables nuestro html no funcionará. Además, debes recordar que todas las variables deben ir entre tres llaves


A partir de aquí, podrás incluir nuestro propio marcado html (y nuestra propia hoja de estilos) para incluir todo los elementos que necesites para tu landing. Dentro de nuestro propio marcado, vamos a incluir ciertos elementos como un botón de participar, un enlace a las bases legales, etc.


Estas son las variables disponibles:

  • Título de la campaña: {{ title }}
  • URL de la imagen principal de la campaña: {{ image }}
  • Número actual de participantes: {{ participations_count }}
  • URL al listado de participantes: {{ public_participations_url }}


A la hora de pintar elementos dinámicos, debes añadir unas determinadas clases de CSS a los elementos en cuestión. Por ejemplo, si quieres pintar el botón de participar en la campaña como una imagen, deberíais de utilizar algo así como: 


<img src="imagen.png" class="{{{ x_cool_tabs_participate_button }}}" />


Estas son todas las clases que podes utilizar:

  • x_cool_tabs_participate_button => Enlace al formulario de participación
  • x_cool_tabs_my_participation_button => Enlace a ver mi participación
  • x_cool_tabs_share_button => Enlace a compartir la promoción
  • x_cool_tabs_participations_link => Enlace al listado público de participantes
  • x_cool_tabs_legal_options_button => Enlace para ver las bases legales
  • x_cool_tabs_quizz_results_link =>> Enlace para ir a la página pública de resultados globales del quiz



Ejemplo de landing personalizada con el código html propio utilizado:





<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

  <body>
    <h1> {{{ title }}} </h1>

    <p>
      <a href="#" class="x_cool_tabs_participate_button"><img src="BOTÓN PARTICIPA"</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_share_button">COMPARTIR CONCURSO</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_participations_link">Acceder al listado de participaciones</a>
    </p>

 <p>
      <a href="{{{ public_participations_url }}}">Otra manera de acceder al listado de participaciones</a>
    </p>

    <p>
      <a href="#legal_terms" class="x_cool_tabs_legal_options_button">Bases legales</a>
    </p>

    <!-- {{{ cool_tabs_body_end }}} -->

  </body>
</html>


Plantilla con html para el formulario de participación

 

Igual que en la landing, hay dos variables que se deben incluir SIEMPRE: <!-- {{{ cool_tabs_head }}} --> entre las etiquetas <head></head> y <!-- {{{ cool_tabs_body_end }}} --> al final del <body>. 


Para llamar al formulario de participación incluiremos la siguiente etiqueta de handlebars {{{ cool_tabs_form }}} , gracias a la cual, se pintará todo el formulario de participación que hemos configurado, es decir, los campos con los datos que se requieren y las preguntas del quiz. De esta forma, puedes utilizar el sistema de plantillas para mostrar imágenes de fondo, distintas cabeceras, un pie de página o aquellos elementos que consideres que por diseño o relevancia deben aparecer en el formulario de participación de tu campaña creada con Cool Tabs.  Aquí tienes el template general para el formulario de participación:


  

<code><html>
<head>
<!-- {{{ cool_tabs_head }}} -->
</head>
<body>
{{{ cool_tabs_form }}}
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html></code>



Plantilla con html para la página tras participar


De nuevo hay que incluir las dos variables obligatorias: <!-- {{{ cool_tabs_head }}} --> entre las etiquetas <head></head> y <!-- {{{ cool_tabs_body_end }}} --> al final del <body>, tal y como mostramos continuación:


<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

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


Sin estas variables nuestro html no funcionará. Además debemos recordar que todas las variables deben ir entre tres llaves. 


A partir de aquí podremos incluir todo el html propio que necesitemos (y su hoja de estilos), añadiendo también los distintos elementos que suelen aparecer en la página tras participar con los estilos que queramos, incluyendo las siguientes {{etiquetas de handlebars}}

  • Nombre del participante: {{{first_name}}}
  • Apellidos del participante: {{{last_name}}}
  • Nombre completo del participante: {{{full_name}}}
  • URL de la foto o imagen que ha subido el participante al concurso de fotos: {{{image}}} 
  • Número de usuarios referidos por el participante: {{{referred_count}}} 
  • Número de votos que ha conseguido: {{{votes_count}}} 
  • Enlace personalizado del participante que debe compartir para viralizar la campaña: {{{participation_link}}} 
  • Número de puntos obtenidos en el quiz: {{{quizz_points}}} 
  • Número del DNI con el que se ha participado: {{{ nif }}


Debes tener en cuenta que estas variables se corresponden únicamente con el texto del valor al que representan, excepto la variable {{{image}}} que representa la url de la imagen subida por el participante al concurso.


Además, hay tres clases más que se pueden incluir en el html de esta página:


  • x_cool_tabs_share_button_participation => Enlace a compartir la participación
  • x_cool_tabs_participations_link => Enlace al listado público de participantes
  • x_cool_tabs_quizz_results_link => Enlace a la página pública de resultados globales del quiz


También puedes incluir otras variables para mostrar contenido en la pantalla de gracias, justo después de que el usuario participe: Hola {{#just_joined}} acabas de participar {{/just_joined}}

Y del mismo modo, mediante otras variables, puedes incluir contenido para mostrar al usuario que, una vez que haya participado, haga clic en 'Ver mi participación': {{#not_just_joined}} ya has participado antes {{/not_just_joined}}.


Por último, podemos incluir el mensaje tras participar que le tocaría a cada usuario. De tal manera que donde incluyamos la siguiente variable, aparecerá el mensaje general para todos los participantes o aquel que le corresponda al participante según los puntos obtenidos en el quiz, la categoría correspondiente del test de personalidad o el mensaje de Instant Win correspondiente a los ganadores, según la dinámica que hayamos elegido para nuestra promoción o concurso. Esta variable es la siguiente:


{{{ thanks_message }}}


Ejemplo de página tras participar personalizada: 
 




 


HTML


<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

  <body>
    <h1>¡Gracias, {{{ first_name }}}!</h1>
    <h2>Tienes {{{ quizz_points }}} puntos</h2>

    <div>{{{ thanks_message }}}</div>

    <p>
      <a href="#" class="x_cool_tabs_share_button_participation">COMPARTIR PARTICIPACIÓN</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_participations_link">Enlace a participaciones</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_quizz_results_link">Resultados del quizz</a>
    </p>

    <!-- {{{ cool_tabs_body_end }}} -->

  </body>
</html>


 


Plantilla con html para la página de ganadores


Recuerda que tendrás que incluir las dos variables obligatorias: <!-- {{{ cool_tabs_head }}} --> entre las etiquetas <head></head> y <!-- {{{ cool_tabs_body_end }}} --> al final del <body>. Además de la variable específica relativa a los ganadores: <!-- {{{ winners }}} -->.


A la hora de elegir ganador, Cool Tabs te permite seleccionar grupos de ganadores (Ej. Ganadores premio A, Ganadores premio B...). Por ello, al personalizar la página de ganadores puedes incluir el iterador {{#list_winners}} sobre esos grupos de ganadores con el que pintarás los diferentes grupos de ganadores de tu promoción o concurso. Además, dentro de {{#list_winners}} puedes utilizar la variable {{winner_title}} para pintar todos los grupos de ganadores con su título correspondiente y el iterador {{#winner_winners}} para incluir cada ganador de cada grupo de ganadores, junto con las variables del nombre y los apellidos de los ganadores: {{ first_name }} {{ last_name }}.


Ejemplo:


¡Tenemos ganadores! {{#list_winners}}
* Ganador {{winner_title}}{{#winner_winners}}
- {{ first_name }}-{{ last_name }}-
{{/winner_winners}}
{{/list_winners}}"



HTML


<html> 
<head> 
<!-- {{{cool_tabs_head}}} --> 
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
<meta name="apple-mobile-web-app-capable" content="yes"/> 
</head> 
</html> 
<body> 
<div class="wrapper winners_layout">   
<!-- {{{winners}}} --> 
</div> 
<!-- {{{ cool_tabs_body_end }}} --> 
</body>




Ejemplo de página de ganadores personalizada:



Ejemplo-p%C3%A1gina-ganadores.png



En nuestro tutorial: Personaliza la página de ganadores con nuestro sistema de plantillas, te explicamos con detalle cómo hacerlo, así como otros elementos que puedes añadir a tu hml. 


Email que se envía al concursante tras participar


En la sección "Datos adicionales" de las aplicaciones Cool Promo White Label y Cool Quiz White Label hay un campo referente al envío de un email al participante. Podemos configurar ese mensaje que enviamos tras participar, incluyendo el html propio que necesitemos. Para ello podemos añadir distintos elementos incluyendo las siguientes {{etiquetas de handlebars}}


  • Email del participante: {{{email}}}.
  • Nombre del participante: {{{first_name}}}
  • Apellidos del participante: {{{last_name}}}
  • Nombre completo del participante: {{{full_name}}}
  • URL de la foto o imagen que ha subido el participante al concurso de fotos: {{{image}}} 
  • Enlace personalizado del participante que debe compartir para viralizar la campaña: {{{participation_link}}} 
  • Número de puntos obtenidos en el quiz: {{{quizz_points}}}
  • Número del DNI con el que se ha participado: {{{ nif }}




HTML


<p>Hola, {{{ first_name }}},</p>

<h1 style="text-align: center;">Muchas gracias por participar!</h1>

<h2 style="text-align: center;">Has conseguido un total de {{{ quizz_points }}} puntos</h2>


<p style="text-align: right;"><a class="x_cool_tabs_participations_link" href="#">Enlace a participaciones</a></p>

<p>Hemos incluido tu correo electrónico: {{{ email }}} en nuestra base de datos.</p>




Página de instrucciones de uso de cupones de descuento


Cuando repartes cupones de descuento a los usuarios que han participado, para que no tengan ninguna duda de cómo deben utilizar su cupón de descuento, te dejamos un campo dentro del formulario para que expliques con texto, imagen o vídeo, cómo deben hacer uso de él, dónde y cuál es la fecha límite para su uso. Lo encontrarás en la sección "Cupones de descuento" de las aplicaciones Cool Promo White Label y Cool Quiz White Label



Al configurar ese apartado con las instrucciones, podemos incluir el html propio que necesitemos. Para ello podemos añadir distintos elementos incluyendo las siguientes {{etiquetas de handlebars}}


  • Email del participante: {{{email}}}.
  • Nombre del participante: {{{first_name}}}
  • Apellidos del participante: {{{last_name}}}
  • Nombre completo del participante: {{{full_name}}}
  • URL de la foto o imagen que ha subido el participante al concurso de fotos: {{{image}}} 
  • Enlace personalizado del participante que debe compartir para viralizar la campaña: {{{participation_link}}} 
  • Número de puntos obtenidos en el quiz: {{{quizz_points}}}
  • Número del DNI con el que se ha participado: {{{ nif }}}



¿Y el resto de páginas de la campaña? 
 

  • Las páginas antes y después de que comience la promoción: Se puede añadir un html personalizado en la sección "Diseño de la promoción" en los apartados correspondientes tal y como hacíamos hasta ahora. En estos html no se podrían utilizar ninguna de las variables que hemos comentado, pues serían pantallas antes y después de que comience la campaña.


  • Algunos pop-ups y el formulario de participación: Estas pantallas de la campaña son más complejas y complejas para la inclusión de un html personalizado por parte del usuario final, aunque estamos trabajando en ello para simplificarlo. De momento se puede personalizar la cabecera del formulario de participación con html y podemos ocultar los elementos que no nos interesen mediante el uso de la css personalizada.



También puedes personalizar con nuestro sistema de plantillas: