Una promoción se puede presentar como un microsite, o bien incrustada dentro de una página web. Si la promoción está incrustada en una web, los usuarios primero accederán a la web, y desde allí podrán acceder y participar en la promoción.

Los Widgets es la funcionalidad de Easypromos que permite incrustar y presentar la promoción en una página web, y de esta forma los visitantes de la web podrán acceder a la promoción directamente desde allí.

Los Widgets es la solución ideal para incrementar el tiempo de visita en una web, ofrecer una experiencia de diseño integrada, ofrecer descuentos y premios dentro de la propia web, etc...  

Nota: Los Widgets están disponibles para todas las promociones que se crean en Easypromos, independientemente de la versión que se utilice – Básica, Premium y Marca Blanca – y funcionan para cualquier mecánica de promoción o concurso.

Éstos son los contenidos del tutorial: 

• 1. ¿Qué son los Widgets?

• 2. ¿Qué tipo de Widgets puedo utilizar?

  • Widget Incrusta tu promoción

  • Widget Link

  • Widget Popup

  • Widget Bracket

• 3.Acceso y configuración de los Widgets

• 4. Configuraciones avanzadas

  • Cómo forzar el idioma del widget en una promoción multiidioma

  • Cómo forzar el alto máximo del widget

  • Cómo forzar la apertura del widget en la misma página

  • Cómo añadir parámetros de seguimiento en el widget

  • Cómo añadir el parámetro Login Token (LT) de la api de autologin en el widget

  • Cómo forzar que el enlace de la promoción lleve a la página web con mi widget

• 5. Guía de resolución de problemas con la integración de widgets

1. ¿Qué son los Widgets?

Un widget consiste en un código HTML o Javascript, que se debe insertar en una página web. Cuando el código está bien insertado, el resultado es que la página web muestra la promoción integrada dentro de los contenidos de la web. El sitio exacto donde aparece dependerá del sitio en donde se inserta el código. 

El código widget genera un iFrame en la web con el contenido de la promoción, permitiendo así a los usuarios participar en la promoción directamente desde allí. La experiencia de participación de un usuario a través de un widget es exactamente la misma como si lo hiciera desde cualquier otro lugar.

Nota: Recomendamos que para una correcta instalación del código widget en una web, la integración la realice el desarrollador o programador de la web.

Los Widgets incluyen opciones para personalizar su ancho y alto. La promoción se adaptará al tamaño del Widget, ofreciendo una óptima visualización gracias a su funcionalidad responsive. 

2. ¿Qué tipo de Widgets puedo utilizar?

La plataforma proporciona 4 formatos de Widgets diferentes:

• Widget Incrusta tu promoción

• Widget Link

• Widget Popup

• Widget Bracket

1. Widget Incrusta tu promoción

Este widget te permite incrustar la promoción en una página web propia, de forma que la promoción se presenta en el propio entorno de la página web del cliente. La aplicación ofrece la posibilidad de personalizar las dimensiones del widget, para así ajustarlo completamente al espacio disponible en tu página web.

A continuación, mostramos una promoción incrustada en una página web propia:

2. Widget Link

El Widget se situará como un enlace en una parte del texto. Al hacer clic en el enlace, la promoción se abrirá como una ventana modal encima de la página.

A continuación, mostramos un ejemplo de cómo se muestra el Widget Link en un un post publicado en un blog:

3. Widget Popup

El Widget Popup mostrará la promoción en forma de popup encima de tu página web. Podrás controlar el tiempo de espera (cuando aparece el widget popup desde la carga de la página) y la frecuencia (con qué frecuencia aparece el widget popup a visitantes recurrentes). 

A continuación, mostramos un ejemplo de cómo se muestra el Widget Popup en un un post publicado en un blog:

En móvil se presenta también de forma adaptada, a pantalla completa, y con la cruz para cerrar en el lado superior derecho.

4. Widget Bracket

Si has creado un Torneo por eliminatorias, con este widget podrás obtener el código iframe para incrustar el cuadro visual completo del torneo en una web externa. De esta forma, la promoción permitirá a los usuarios que visiten tu web participar en el Torneo directamente desde allí.

Como los demás widgets, el Widget Bracket permite una gestión automática del alto del widget en una web externa para adaptarse automáticamente según el contenido que se esté mostrando en la promoción, ofreciendo de esta manera una visualización óptima de la promoción en cualquier dispositivo y pantalla.

A continuación, te mostramos una imagen de cómo se presenta un Torneo por eliminatorias incrustado en un blog:

3. Acceso y configuración de los Widgets

A continuación explicamos los pasos que deberás seguir para incrustar la promoción en tu página web con el Widget.

1. Una vez creada tu promoción, podrás dirigirte al apartado Recursos de publicación > Widget:

2. A continuación, introduce la URL de la página web donde tienes previsto insertar el Widget:

A continuación encontrarás todos los Widgets disponibles para integrar la promoción en tu web.

1. Wiget "Incrusta tu promoción"

Podrás personalizar las dimensiones del Widget (ancho y alto) para ajustarlo al espacio disponible en tu página web. A continuación, copia el código iframe y pégalo en tu página web.

El widget presenta las siguientes características:

• El widget automáticamente calculará el alto del iframe para una visualización óptima según la página de la promoción que se esté visualizando.
• La visualización óptima implica no mostrar barra de scroll en el iframe y evitar espacios en blanco debajo de la página.
• Los popups de información dentro de la promoción (compartir, bases legales, mis redes), se posicionan de forma óptima en la zona visible del iframe.

2. Widget Link

El Widget Link se podrá personalizar con las siguientes opciones:

• Ancho y Alto: éstas serán las dimensiones que tendrá la ventana modal donde se presentará la promoción, de forma que podrás ajustarla al espacio disponible en tu página web.
• Título. Podrás personalizar el texto de la pestaña. Escribe un título corto y que llame la atención.
• Abrir como: Podrás decidir cómo abrir la tab a través de Ventana modal o en una nueva ventana del navegador.

3. Widget Popup

El Widget Popup se podrá personalizar con las siguientes opciones:

• Tiempo de espera: Esta opción te permite controlar cuando aparece el widget popup al acceder a la página. Puedes configurar que aparezca nada más cargar la página o establecer un tiempo de espera de entre 5 y 30 segundos.
• Frecuencia: Esta opción permite controlar con qué frecuencia aparecerá el widget popup a visitantes recurrentes de la página.

4. Widget Bracket

El Widget Bracket se podrá personalizar con las siguientes opciones:

• Ancho y Alto: éstas serán las dimensiones que tendrá el widget donde se presentará la promoción, de forma que podrás ajustarla al espacio disponible en tu página web.
• Torneo: Aquí podrás seleccionar qué torneo quieres presentar en el widget, en caso de tener más de uno.

4. Opciones avanzadas de configuración

A continuación te presentamos las siguientes opciones de configuración adicionales que presentan los Widgets:

Cómo forzar el idioma del widget en una promoción multiidioma

Si has creado una promoción con múltiples idiomas, y quieres utilizar los widgets, es posible que tu página web tenga multiidioma, y quieras forzar el idioma de la visualización del widget.

Puedes forzar el idioma del widget pasando el valor del idioma en el parámetro lc del campo getsdel código del widget.

Ejemplo: forzar la visualización del widget al inglés

gets:"micro=1&utm_source=  widget&utm_medium=embed&lc=eng"

Puedes obtener los códigos de idioma desde la página de gestión de la promoción, haciendo clic en la ventana "Opciones":

Cómo forzar el alto máximo del widget

Esta opción permite definir el alto máximo que se permite del widget. Si el contenido de la promoción supera este alto, el sistema añadirá barras de scroll al widget.

Para ello, se deberá utilizar el parámetro max_height y definir el alto que queremos darle al widget.

Cómo forzar que toda la participación suceda del widget y no salga de la web

El comportamiento predeterminado del widget es que cuando se interactúa con él, la siguiente pantalla se cargue fuera de la web donde está incrustado el widget. Éste es el comportamiento que recomendamos para optimizar la experiencia de usuario y no tener problemas con las restricciones de cookies de terceros que tienen los navegadores web.

Para forzar que toda la participación suceda dentro del Widget se puede aplicar la siguiente opción en el seleccionable:

¡Atención!: Para que esta solución funcione sin tener problemas con las restricciones de cookies de tercero asegúrate que has conectado un subdominio propio a tu promoción. El subdominio debe pertenecer al dominio principal de la web. Más información. 

Cómo añadir parámetros de seguimiento en el widget

Si deseas personalizar los parámetros para medir la fuente de los participantes, deberás modificar los parámetros utm_source y  utm_mediumdel campogetsdel código del widget. Aprende cómo medir la fuente de los participantes de una promoción.

Cómo añadir el parámetro Login Token (LT) de la api de autologin en el widget

Si incrustas una promoción en una web en donde los usuarios se han identificado antes mediante la API de Autologin, podrás pasar el parámetro  lt(Login token) en el campo getsdel código del widget.

gets:"micro=1&utm_source=widget&utm_medium=embed&lt=$$xx555666hsf$3!qq2"

Ejemplo: añadir el login token de usuario obtenido de la llamada de Autologin en un widget

<!-- Put this div wherever you want in your code. It will contain the widget: -->
<div id="ep_frame_885667" style="width:100%;"></div>



<!-- Add this code at the bottom of your page, right before the <body> closing: -->
<script type="text/javascript" src="https://wl.easypromosapp.com/widget/widget_embed_adaptable.js?v=1.93"></script>
<script type="text/javascript" src="https://wl.easypromosapp.com/js/jquery.ba-postmessage.js?v=1.93"></script>
<script type="text/javascript">
	if(typeof(EasyEmbedAdaptable) !== "undefined") {
		EasyEmbedAdaptable.init({
			container_id:"ep_frame_885667",
			domain:"https://wl.easypromosapp.com/",
			gets:"lt=$$xx555666hsgaf$3!qq2&micro=1&utm_source=widget&utm_medium=embed",
			max_height:"100%",
			promo_id:885667
		});
	}
</script>

Cómo forzar que el enlace de la promoción lleve a la página web con mi widget

Para ello, deberás ir al apartado Recursos de publicación > Opciones del enlace, donde te aparecerá la opción "Destino del enlace principal de la promoción", donde podrás seleccionar la opción "Sitio web donde está instalado el widget", que te permitirá introducir la URL donde has incrustado el código iframe del widget de la promoción:

De esta forma, al abrir el enlace principal de la promoción, el sistema redirigirá el usuario a la página web donde has incrustado el Widget.

5. Guía de resolución de problemas con la integración de Widgets

Debido a la propia naturaleza de los iframes, se pueden dar algunas incidencias en usuarios que intenten participar en la promoción. Estas incidencias tienen relación sobre todo con el bloqueo causado por las cookies de terceros, y algunos de los casos que pueden experimentar los usuarios son: no pueden hacer Login, no pueden cambiar el idioma de la promoción, etc. En este artículo presentamos algunas de las situaciones habituales que experimentan los usuarios al intentar participar en una promoción que ha sido incrustada en una página web mediante un Widget, y una guía de resolución que da solución a todos los casos.