1. Introducción.
La página que aparece cuando los usuarios envían su participación -que nosotros denominamos "Página tras participar"- tiene varios elementos que aparecen por defecto, además de un mensaje de gracias que puedes configurar en el apartado de edición de la campaña (sección "Diseño de la campaña") como:
- Mensaje por defecto para todos los participantes.
- Mensaje personalizado según los resultados obtenidos por el participante en el quiz (sólo para quizz con puntos o test de personalidad).
- Mensaje personalizado para los participantes que hayan resultado ganadores mediante Instant Win.
Estos mensajes de distintos tipos sirven para personalizar la parte superior de la página con mensajes diferentes, dependiendo de los resultados obtenidos en el concurso o cuestionario puesto en marcha y normalmente se usan añadiendo textos e imágenes.
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 {{{ cool_tabs_html_attributes }}} >
<head>
<!-- {{{ cool_tabs_head }}} -->
</head>
<body {{{ cool_tabs_body_attributes }}} >
<!-- {{{ 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.
En la página de gracias (o página tras participar), podremos incluir las siguientes variables:
Respuestas al formulario de datos.
- Nombre del participante: {{{first_name}}}
- Apellidos del participante: {{{last_name}}}
- Email del participante: {{{email}}}
- Avatar del usuario: {{{tag_avatar}}}
- Nombre completo del participante: {{{full_name}}}
- Número del DNI con el que se ha participado: {{{ nif }}
Respuestas al Quiz.
- URL de la foto o imagen que ha subido el participante al concurso de fotos: {{{image}}}
- Player con el video subido por el usuario: {{{video_html}}}
- Url del video del usuario: {{{ video_url}}}
- Screeshot del video del usuario: {{{ video_screenshot }}}
- Número de usuarios referidos por el participante: {{{ referred_count }}}
- Número de votos que ha conseguido: {{{ votes_count }}}
- Número de puntos obtenidos en el quiz: {{{ quizz_points }}}
- Número de puntos totales (puntos de viralidad, puntos de quiz, etc.): {{{total_points}}}
- Etiqueta para mostrar los resultados de un quizz: {{{ quizz_results }}}
- Respuesta a la pregunta realizada con campo de texto tipo word: {{{extra_answer}}}
- Respuesta a cada pregunta del quiz: puedes mostrar la respuesta que ha dado el usuario a cada una de las preguntas. Para mostrar la respuesta que ha elegido el usuario a la pregunta 1 utiliza la variable {{{answer_quiz_1}}} , para mostrar la respuesta a la pregunta 2 utiliza {{{answer_quiz_2}}} y así sucesivamente.
- Url a la imagen que ha escogido el usuario como respuesta a cada pregunta del quiz: {{{answer_quiz_img_url_1}}}, {{{answer_quiz_img_url_2}}}, etc
- Imagen de cada pregunta del quiz: Imagen de la pregunta 1 -> {{{quiz_image_url_1}}},Imagen de la pregunta 21 -> {{{quiz_image_url_2}}}
- Todas las respuestas (en texto plano) escogidas por el usuario: {{{ quizz_responses_html }}}
- Todas las respuestas del quiz (con html basico): {{{ quizz_responses_html }}}
- Fecha de participación: {{{ created_date }}}
- Fecha y hora de participación: {{{ created_at }}}
- Hora de participación: {{{ created_time }}}
- Identificador único del usuario: {{{ participation_id }}}
- Llevar al usuario directamente al PDF de descarga del cupón: {{{ coupon_download_url }}}
- Código/cupón asignado (sólo para campañas de entrega de códigos/cupones) al usuario: {{{ coupon_code }}}
- Código QR del cupón asignado (sólo para campaña de entrega de códigos/cupones) al usuario: {{{qr_code}}}
- Código/cupón validado por el usuario al participar (sólo para campañas de validación de códigos/cupones) al usuario: {{{ validated_coupon_code }}}
Además, podremos controlar si se ha asignado un cupón o no, para mostrar un mensaje u otro con el iterador de cupones: {{ #coupon }} Tu cupón es: {{coupon}} {{/coupon}}{{^coupon}} No tienes cupón {{/coupon}}
Variables relacionadas a la campaña:
- URL personalizada del participante que debe compartir para viralizar la campaña: {{{ participation_link }}}
- Url para volver a participar en la campaña: {{{ participate_again_url }}}
- Titulo de la campaña: {{{title}}}
- Imagen principal de la campaña: {{{promotion_image}}}
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. Se abrirá un popup con todas las opciones de compartir y la url propia del usuario. Esta clase sirve para la página tras participar y la de participante individual.
- 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
Enlaces para compartir:
- Enlace para compartir en Facebook: {{{ fb_share_wall_button }}}
- Enlace para compartir en Whatsapp: {{{ whatsapp_share_wall_button }}}
Puedes usar también directamente las siguientes variables para mostrar enlaces directos a algunas opciones de compartir (puedes incluir dentro de la variable cualquier contenido necesario (texto, elementos html, iconos, etc..):
- Enlace directo para compartir en Pinterest:
{{#custom_share_on_pinterest_btn}}
<span class="fonticon gray-on-hover fonticon-pinterest"></span>
<span class="offleft">pinterest</span>
{{/custom_share_on_pinterest_btn}}
- Enlace directo para compartir en Facebook:
{{#custom_fb_share_wall_button}}
Facebook
{{/custom_fb_share_wall_button}}
- Enlace directo para compartir en Twitter:
{{#custom_share_on_twitter_btn}}
Share on Twitter
{{/custom_share_on_twitter_btn}}
- Enlace directo para compartir en Whatsapp:
{{#custom_share_on_whatsapp_btn}}
Share on WhatsApp
{{/custom_share_on_whatsapp_btn}}
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.
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 campaña. Esta variable es la siguiente:
{{{ thanks_message }}}
Ejemplo de página tras participar personalizada:
Este sería el HTML:
<html {{{ cool_tabs_html_attributes }}} >
<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>
<body {{{ cool_tabs_body_attributes }}} >
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>
En la página por defecto, estas variables aparecen situadas como ves en la siguiente captura:
Modificando las variables con tu html puedes llegar a conseguir una página tan personalizada como ésta:
Aquí tienes el html que hemos incluido en el campo del mensaje personalizado según los resultados obtenidos por el participante en el quiz (sólo para quizz con puntos o test de personalidad):
<div class="image_win">
<p style="text-align: center;"><img alt="" src="https://s3.amazonaws.com/cool-tabs/assets/pictures/a3b353e0c0f411e58e15bf92146a0821/content_ING_2272_00191.jpg" style="width: 810px; height: 809px;" /></p>
<div class="points">{{{quizz_points}}}</div>
<div class="name">{{{first_name}}}</div>
</div>
Cómo personalizar el botón de compartir de la página tras participar.
Si quieres cambiar el botón de "Compartir" de esta página, los pasos serían:
1. Crea una imagen personalizada para que, haciendo clic en ella, se muestre el pop-up que habitualmente se muestra al hacer clic sobre el botón de "Compartir", con todas las opciones para que el usuario comparta su participación.
2. Añáde la imagen al html del campo que estés utilizando para mostrar el mensaje tras participar (campos que indicábamos anteriormente para incluir las variables).
3. Incluye el enlace al pop-up así: <a href="#" class="x_cool_tabs_share_button_participation"><img src="IMAGEN NUEVA QUE HE CREADO"></img></a>
Ejemplo:
Cómo incluir un enlace al listado de participantes.
Si desde esta página deseas incluir un enlace al listado de participantes públicos, que por defecto no aparece en esta página, tendríamos que incluir la clase: x_cool_tabs_participations_link
Ejemplo:
<a href="#" class="x_cool_tabs_participations_link"><img src="IMAGEN NUEVA PARA REFERIR AL LISTADO DE PARTICIPANTES"></img></a>
Cómo incluir un enlace a los resultados globales del quizz.
Si quieres que desde esta página los participantes tengan acceso a los resultados globales del quizz, puedes incluir un enlace que lleve a la página donde se muestren esos resultados. Para ello tendríamos que incluir la clase: x_cool_tabs_quizz_results_link
Ejemplo:
<a href="#" class="x_cool_tabs_quizz_results_link"><Resultados del quizz></a>
2. Otras especificaciones.
Si tienes alguna consulta durante el proceso, no dudes en contactar con nosotros a través del chat de nuestra web o nuestro mail de soporte help@cool-tabs.com
3. Contenido relacionado.
Personalización avanzada de campañas >>
Modifica los mensajes que se comparten en Facebook y Twitter con nuestra personalización avanzada >>
Consulta nuestra Guía de Estilos para crear tu css personalizada >>
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.