Artículos en esta sección

Personalización avanzada con HTML propio

Avatar
Cool Tabs Support
Actualización
Seguir

 

1. Introducción.

2. HTML para las distintas pantallas de una campaña.

2.1. HTML para la landing.

2.2. HTML para el formulario de participación.

2.3. HTML para la página tras participar.

2.4. HTML para el listado de participantes.

2.5. HTML para la página de participante individual.

2.6. HTML para la página de ganadores.

2.7. HMTL para el email/SMS que se envía tras participar. 

2.8. HTML para la página de instrucciones del cupón.

2.9. Otros. 

2.9.1. Sitema de variables para copies dinámicos en HTML.

2.9.2. CSS personalizada con variables de Cool Tabs.

3. Otras especificaciones.

4. Contenido relacionado.

 

1. Introducción.

En Cool Tabs tienes muchas maneras de personalizar tu campaña. Puedes cambiar el texto en la configuración de la campaña, subir tu propio contenido (imágenes, vídeos, GIF...), darle un look & feel acorde con tu imagen corporativa...

Sin embargo, gracias a nuestra personalización avanzada, puedes ir un paso más allá e incluir tu propio HTML en todas las pantallas de tu campaña (solo disponible para campañas con White Label).

En este tutorial, te vamos a explicar todas las opciones para incluir tu HTML custom con nuestra personalización avanzada.

Además, tienes disponibles los siguientes tutoriales:

Personalización avanzada de campañas mediante variables.

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

 

2. Cómo configurar tu propio HTML para las distintas pantallas de una campaña.

Cuando creas una campaña con la aplicación Cool Promo White Label, en las secciones 'Diseño' (pestaña 'Avanzado') y 'Pantalla final' (pestaña 'Avanzado') de la edición de tu campaña, encontrarás varios campos referentes al uso de un HTML propio para las distintas pantallas de la campaña:

  • Utilizar HTML completo para la landing: esta pantalla es la primera que se muestra en una campaña. En ella puedes incluir un título, una descripción, un botón de participar...
  • Utilizar HTML para el formulario de participación: el formulario de participación es donde los usuarios interactúan con la dinámica de tu campaña (quiz, encuesta, juego...) y donde deberán dejar sus datos para poder participar.
  • Utilizar HTML para la página tras participar: esta es la pantalla que se muestra al terminar de interactuar con el quiz y form de datos de una campaña. Es la pantalla final.
  • Utilizar HTML para la página de ganadores: esta pantalla mostrará los ganadores y suplentes de tu campaña. 

A partir de aquí, podrás incluir tu HTML customizado (y tu propia hoja de estilos - CSS) para incluir todos los elementos que necesites en las distintas pantallas de la campaña.

El único requisito que tiene todo HTML personalizado con Cool Tabs es que hay que incluir 4 variables obligatorias: 

1) <!-- {{{ cool_tabs_head }}} --> entre las etiquetas <head></head> 
2) <!-- {{{ cool_tabs_body_end }}} --> al final del <body>

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

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

Sin estas cuatro variables tu campaña no funcionará correctamente, ya que no tendrás acceso a las estadísticas que te brindamos desde Cool Tabs, ni a otras características como idioma de una campaña o estilos básicos, entre otras.

Ten en cuenta que todas las variables deben ir entre tres llaves {{{ }}}, tal y como mostramos a continuación.

 

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

 

También puedes editar todas las pantallas de tu campaña desde la previsualización de la misma. Este es el sitio recomendado para hacerlo, ya que te permite ir modificando el propio HTML y CSS, guardarlo y ver el resultado directamente.

 

icono-previsualización.png

 

Después, en el menú lateral izquierdo, en el apartado 'Diseño básico', encontrarás la opción de editar el HTML. Solo tienes que hacer clic en 'Editar con ventana maximizada' para trabajar cómodamente en tu HTML.

 

mceclip0.png

 

 

2.1. HTML para la landing.

Para personalizar la landing tienes que activar el HTML custom. Ve a la edición de la campaña y habilita la opción 'Utilizar HTML completo para la landing', en el apartado 'Diseño' > pestaña 'Avanzado'.

 

mceclip1.png

 

A continuación, te mostramos un ejemplo de HTML para la 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 CONCURSO</a>
   </p>
   <p>
    <a href="#" class="x_cool_tabs_participations_link">Acceder al listado de participaciones</a>
   </p>
   <p>
    <a href="#" class="x_cool_tabs_legal_options_button">Bases legales</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

Este HTML tendría el siguiente aspecto:

 

mceclip0.png

 

Los colores de texto, enlace y de fondo de los botones, los puedes modificar desde el panel de control de la previsualización de la campaña.

 

mceclip2.png

 

Puedes incluir nuestras variables personalizadas para pintar determinada información en la landing como, por ejemplo, el número actual de participantes o la URL al listado de participantes.

Consulta las variables que admite la landing. 

 

2.2. HTML para el formulario de participación.

Para personalizar el formulario tienes que activar el HTML custom. Ve al editor de la campaña y habilita la opción 'Utilizar HTML para el formulario de participación', en el apartado 'Diseño' > pestaña 'Avanzado'

 

mceclip2.png

 

Puedes incluir nuestras variables personalizadas para personalizar el form y mostrar, por ejemplo, el número total de preguntas del quiz que le quedan por contestar al participante.

Consulta las variables que admite el formulario. 

 

A continuación, te mostramos el template general para el 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>

 

Este HTML tendría el siguiente aspecto:

 

mceclip3.png

 

mceclip4.png

 

Clases opcionales para el formulario de participación:

  • La clase "wrapper" marca al contendedor que tenga un ancho máximo de 810 px.
  • La clase "form_layout" le da un espacio extra al contendor del formulario de 15 px, a cada lado del eje x, para que los campos del mismo no aparezcan ajustados a los laterales al 100%. Esto es visible cuando se accede la campaña desde un dispositivo móvil. 

 

2.3. HTML para la página tras participar.

Si quieres incluir HTML custom en la pantalla final de tu campaña, debes habilitarlo desde el editor de la campaña, en apartado 'Pantalla final' > pestaña 'Avanzado'.

 

mceclip3.png

 

Puedes incluir nuestras variables personalizadas para pintar determinada información en la página tras participar, por ejemplo, el número de puntos obtenidos en el quiz o URL de la foto que ha subido para participar.

Consulta las variables que admite la página tras participar. 

 

A continuación, te mostramos el template general para una 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>
   <p>Tienes {{{ quizz_points }}} punto(s)</p>
   <div>{{{ thanks_message }}}</div>
   <p>
    <a href="#" class="x_cool_tabs_share_button_participation m_btn">COMPARTIR</a>
   </p>
   <p>
    <a href="#" class="x_cool_tabs_participations_link">Enlace a participaciones</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

Este HTML tendría el siguiente aspecto:

 

mceclip5.png

 

2.4. HTML para el listado de participantes.

Recuerda que para hacer público el listado de participantes, debes habilitarlo desde el editor de la campaña, en el apartado 'Participaciones' > pestaña 'Listado'.

 

mceclip4.png

 

Puedes incluir nuestras variables personalizadas para pintar determinada información en listado de participantes, por ejemplo, el número de actual de participantes o el botón de 'Votar'.

Consulta las variables que admite el listado de participantes. 

Para editar el HTML customizado del listado de participantes, ve a la previsualización de la campaña, selecciona la pantalla correspondiente al listado y activa la opción 'Utilizar HTML para la página de galería de participantes (solo campañas Marca Blanca)'.

 

mceclip8.png

 

A continuación, te mostramos un ejemplo de HTML para el listado de participantes:

 

<!DOCTYPE html>
 <html {{{ cool_tabs_html_attributes }}} >
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>
  <body {{{ cool_tabs_body_attributes }}}>
   <div class="wrapper">
    {{{ participation_list_header }}} 
    <h1>{{{ title }}}</h1>
    <ol>{{#list_participations}}
     <li class="rank_position_{{{ quizz_points_ranking_position }}}">
      <span>{{{tag_avatar}}}</span>
      <span>{{ first_name }} {{ last_name }}</span> 
      <span>{{quizz_points}} puntos</span>
      <span><a href="{{{ participation_link }}}">Ver detalle </a></span>
     </li> 
    {{/list_participations}}</ol>
    <div>
     {{{ paginator }}} 
    </div>
    <a href="x_cool_tabs_participate_button" class="m_btn">Participa</a>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

Este HTML tendría el siguiente aspecto:

 

mceclip6.png

 

Mira cómo configurar y personalizar la cabecera del listado de participantes. 

 

2.5. HTML para la página de participante individual.

Para editar el HTML customizado de la página individual de participante, ve a la previsualización de la campaña, selecciona la pantalla correspondiente a esta página y activa la opción 'Utilizar HTML para la página de un participante (solo campañas Marca Blanca). 

 

mceclip9.png

 

Te mostramos un ejemplo de HTML para la página de participante individual:

 

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
 <head>
  <!-- {{{ cool_tabs_head }}} -->
 </head>
 <body {{{ cool_tabs_body_attributes }}}>
  <div class="wrapper">
   <h1>Participación de {{{ full_name }}}</h1>
   <div>
    <span>{{{tag_avatar}}}</span>
    <span>{{quizz_points}} punto(s)</span>
    <span>{{{ created_date }}}</span>
   </div>
   <hr>
   <p>
    <a href="#" class="m_btn x_cool_tabs_participations_link">Ver todas las participaciones</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

Este HTML tendría el siguiente aspecto:

 

mceclip7.png

 

Puedes incluir nuestras variables personalizadas para pintar determinada información en la página individual del participante.

Consulta todas las variables que admite esta página.

 

2.6. HTML para la página de ganadores.

Si quieres incluir tu propio HTML custom en la página de ganadores de la campaña, debes habilitarlo desde el editor de la campaña, en apartado 'Diseño' > pestaña 'Avanzado'.

Recuerda que también puedes editar el HTML de la página de ganadores desde la previsualización, así podrás ir modificando el propio HTML y la CSS, guardando y viendo el resultado directamente.

 

mceclip0.png

 

Para personalizar la página de ganadores y pintar en ella determinada información, puedes utilizar nuestra personalización avanzada, mediante variables.

Consulta qué variables admite la página de ganadores. 

 

A continuación, te mostramos un ejemplo de HTML para la página de gandores:

 

<!DOCTYPE html> 
<html {{{ cool_tabs_html_attributes }}} >
 <head> 
  <!-- {{{cool_tabs_head}}} --> 
 </head> 
 <body {{{ cool_tabs_body_attributes }}} >
  <div class="wrapper">
   {{{winners_landing_body}}}
   <div>
    {{#list_winners}}
     <h1>{{winner_title}}</h1>
     <ol>
      {{#winner_winners}}
       <li> {{ first_name }} {{ last_name }} </li>
      {{/winner_winners}}
     </ol>
    {{/list_winners}}
   </div> 
   <p>
    <a href="#" class="m_btn x_cool_tabs_legal_options_button">Bases legales</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} --> 
 </body>
</html>

 

Este HTML tendría el siguiente aspecto:

 

mceclip10.png

 

2.7. HTML del email/SMS que se envía al usuarios tras participar.

La herramienta de envío de emails te permite personalizar el cuerpo del mensaje que vayas a enviar a los participantes de tu campaña e incluir tu propio HTML custom. 

Puedes configurarlo desde el editor de tu campaña, en la sección 'Emails y SMS'. Haz clic en 'Gestión de envío de email y SMS' y crea una nueva plantilla. 

 

mceclip6.png

 

También puedes acceder a esta sección desde el menú principal de tus campañas.

 

mceclip7.png

 

Además, puedes añadir distintos elementos, con nuestra personalización avanzada mediante variables.

Consulta las variables que admite el email o el SMS que se envía al participante. 

 

Ejemplo de 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: center;"><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>

 

Mira cómo enviar un email y cómo configurar un SMS a los usuarios que han participado en tu campaña. 

 

2.8. HTML para la página de instrucciones de uso de cupones descuento.

La página de instrucciones de un cupón descuento que repartas a los participantes de tu campaña, admite personalización. Puedes incluir tu HTML custom, así como utilizar nuestra personalización avanzada mediante variables, para pintar determinada información en la página del cupón. 

La configuración de cupones se realiza desde el apartado 'Cupones' del editor de tu campaña. Debes habilitar la opción 'Quiero asignar cupones descuento'.

Mira aquí cómo crear y personalizar cupones.

 

A continuación, te mostramos un ejemplo de HTML para la página de instrucciones:

 

<p><img alt="" height="540" src="https://uploads3.ct-assets.com/assets/pictures/dee421d45add47c3a3ce4bf051609259/content_gef4ec625f924439b6696fec8396b9898b176564695c9771a2c69d23b7b087b3f8d2fce21524bce9eeb2a5bd7c02f6434e3c493780e751ec1bbb4cc08ff9cebd0_1280.jpg" width="810" /></p>

<p><b>¡Felicidades {{{ full_name }}}!</b></p>

<p>Tu cupón es: {{coupon}}</p>

<p>{{{ qr_code }}}</p>

 

Este HTML tendría el siguiente aspecto:

 

mceclip1.png

 

2.9. Otros.

2.9.1. Sistema de variables para copies dinámicos en HTML.

Con este sistema es posible generar un modelo con HTML, con el que es posible configurar textos dinámicos, traducidos a multiples idiomas, sin necesidad de tener que usar copies (texto). De esta manera, se consigue tener una campaña multiidioma, ya que estas variables permiten ser traducidas. También, al delegar en variables, te permitirá cambiar cualquier copy de manera fácil y rápida.

Consulta el tutorial el siguiente tutorial, en el que te explicamos cómo configurar variables para copies dinámicos en HTML con la personalización avanzada. 

 

2.9.2. CSS personalizada con variables de Cool Tabs. 

En tus campañas, puedes usar tu propia CSS personalizada e integrar ciertas variables. Por ejemplo: puedes usar el color picker de la campaña para seleccionar el color de la fuente de tu campaña y usar ese color para todas las fuentes del body en la CSS. 

 

Un ejemplo sencillo de integración en la CSS sería:

 

body{
 color: {{font_color}};
 background-color: {{background_color}};
 font-family: {{font_family}};
}
h1{
 color: {{primary_color}};
}
h2{
 color: {{secondary_color}};
}

 

3. Otras especificaciones.

Si tienes alguna duda, puedes contactar con nosotros en el email help@cool-tabs.com.

 

4. Contenido relacionado. 

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

Descarga el listado completo de variables.

Cómo configurar variables para copies dinámicos en HTML con la personalización avanzada.

 

 

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.

Artículos relacionados