> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md).

# Componentes de widget y micrositio explicados

<a href="https://pxa.impact.com/student/activity/2359603?sid=0c0e3e5c-54c9-4435-9bee-ebcdccb7f292&#x26;sid_i=0?utm_source=app.impact.com&#x26;utm_medium=owned-platform&#x26;utm_content=&#x26;utm_campaign=help-center" class="button primary">Realiza el curso PXA</a>

{% hint style="success" %}
**Limitado**: Los componentes, aparte de los proporcionados en las plantillas dadas, solo están disponibles en ciertas ediciones del producto o complementos. Si deseas un control más granular sobre qué componentes usan tus micrositios, contáctanos para actualizar tu programa.
{% endhint %}

Los componentes son los bloques de construcción individuales, como las imágenes principales y las tarjetas de tareas, que conforman el widget o micrositio de tu programa Advocate. Estos elementos dan forma a la [experiencia del participante](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences.md) y se pueden personalizar para alinearlos con tu marca.

Este artículo ofrece una lista categorizada de los componentes disponibles dentro de los editores de widget y micrositio. La mayoría de los componentes admiten estilo y personalización, aunque algunos tienen limitaciones de diseño. También puedes previsualizar los estados de tus componentes dentro de la interfaz del editor.

<details>

<summary>Estadísticas</summary>

Usa *Estadísticas* componentes para que tus participantes sepan cómo van en tu programa. Para ver una lista de las estadísticas que estos componentes pueden admitir, visita [Estadísticas de widget y micrositio](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained.md).

| Componente                       | Descripción                                                                                                                                                                |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Saldo de puntos                  | Muestra el saldo de puntos del participante. Se usa en programas Advocate que recompensan a los participantes con puntos.                                                  |
| Tarjetas de regalo ganadas       | Muestra un recuento de las recompensas de tarjetas de regalo obtenidas por el Advocate.                                                                                    |
| Referencias                      | Muestra cuántas referencias ha hecho el participante. Incluye referencias iniciadas y convertidas.                                                                         |
| Contenedor con tres estadísticas | Una plantilla con espacio para tres estadísticas. Las estadísticas mostradas se pueden cambiar. Se pueden añadir y eliminar estadísticas según se desee.                   |
| Otra estadística                 | Muestra una estadística de tu elección. Puedes seleccionar entre una estadística de referencias, varias estadísticas de recompensas o crear una estadística personalizada. |

<figure><img src="/files/8d643be26a2813273f480ca994ad156baf8aaad4" alt="" width="563"><figcaption></figcaption></figure>

</details>

<details>

<summary>Componentes comunes</summary>

*Componentes comunes* se usan ampliamente para mejorar tanto la funcionalidad como la coherencia del diseño en tu widget o micrositio. Cubren elementos visuales y estructurales de uso general, como imágenes principales, formato de diseño y pasos descriptivos del programa.

| Componente                          | Descripción                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Imagen principal de dos columnas    | <p>Una imagen de banner y un texto de encabezado que abarcan dos columnas. Se pueden actualizar la imagen, el texto y el color de fondo.</p><p><img src="/files/be076fb19a1874aae028dae067afbd2265676a64" alt="" data-size="original"></p>                                                                                                                                                                            |
| Imagen principal superpuesta        | <p>Una imagen de banner con texto superpuesto. Se pueden actualizar la imagen, el texto y el color de fondo.</p><p><img src="/files/145d57a89383d1fdb99aa735134a87479101fa18" alt="" data-size="original"></p>                                                                                                                                                                                                        |
| Imagen                              | <p>Una imagen. Se pueden cambiar el color de fondo, la alineación, la altura y el ancho.</p><p><img src="/files/87b8671ebaf58249f48296863515dd72d66d0679" alt="" data-size="original"></p>                                                                                                                                                                                                                            |
| Botón de enlace                     | <p>Un botón en el que se puede hacer clic que redirige a los participantes al enlace seleccionado. El color del botón está controlado por el Color de marca configurado en el nivel del Contenedor de marca.</p><p><img src="/files/5744ed53b9e591a388f6dfa10aa773d823ffaed4" alt="" data-size="original"></p>                                                                                                        |
| Explicador del programa             | <p>Una plantilla que explica cómo funciona un programa Advocate, como cómo obtener recompensas. Incluye dos pasos del explicador del programa de forma predeterminada. Se pueden añadir más pasos. El color está controlado por el Color de marca configurado en el nivel del Contenedor de marca.</p><p><img src="/files/84e165ac2fff3bb714c291ca9fe97f6071e05326" alt="" data-size="original"></p>                  |
| Paso del explicador del programa    | <p>Añade texto descriptivo para explicar una parte de tu programa. Encaja dentro de un componente de explicador del programa. El color está controlado por el Color de marca configurado en el nivel del Contenedor de marca.</p><p><img src="/files/e1cbe3391936cc11dae06884b10f68024d83ada7" alt="" data-size="original"></p>                                                                                       |
| Cronología del programa             | <p>Muestra una vista general del recorrido de referencia y las recompensas para tus participantes. Añade o elimina entradas de la cronología según sea necesario. El color del icono circular y de las líneas entre entradas está controlado por el Color de marca configurado en el nivel del Contenedor de marca.</p><p><img src="/files/e28d2dcc3858e0a94cd7ddbf2814a8abc5eced65" alt="" data-size="original"></p> |
| Entrada de la cronología            | <p>Encaja dentro de un componente de cronología del programa para mostrar un paso del recorrido de referencia. El color del icono circular y de las líneas entre entradas está controlado por el Color de marca configurado en el nivel del Contenedor de marca.</p><p><img src="/files/6a487a8b6a46e200b8e61ef519cf14771839a34c" alt="" data-size="original"></p>                                                    |
| Visualización del nombre de usuario | <p>Extrae dinámicamente el nombre completo del participante. De forma predeterminada, muestra "Usuario anónimo" si el participante no ha introducido un nombre.</p><p><img src="/files/2578b187b107cd00f828e558f2397ad900064b8c" alt="" data-size="original"></p>                                                                                                                                                     |

</details>

<details>

<summary>Recompensas</summary>

{% hint style="info" %}
**Nota:** *Recompensa* los componentes solo se pueden usar para widgets y micrositios de acceso verificado.
{% endhint %}

| Componente                  | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Feed de tarjetas de tareas  | <p>Las tarjetas de tareas permiten a tus usuarios realizar acciones o ver el progreso hacia los objetivos del programa Advocate directamente con el widget o micrositio. Este componente añade varias tarjetas de tareas a tu widget o micrositio. El color del botón está controlado por el Color de marca configurado en el nivel del Contenedor de marca.</p><p><img src="/files/2a8e3e00d37b8c56b1bbf830149b2a750d137782" alt="" data-size="original"></p> |
| Intercambio de recompensas  | <p>Permite a los participantes canjear las recompensas obtenidas por otro tipo de recompensa.</p><p>Debes tener <a href="/pages/f275b5d73c2a6dcf1e0c64c0695f72140d185fd1">Intercambio de recompensas</a> configurado para usar esta función.</p><p><img src="/files/8a201ff1797b318d7928eeb71c68cec08eaa2471" alt="" data-size="original"></p>                                                                                                                 |
| Tabla de recompensas        | <p>Muestra una lista de las recompensas que el participante ha obtenido. Puede incluir recompensas manuales y/o recompensas obtenidas en varios programas Advocate.</p><p><img src="/files/33b98578febfddea5f36e94ab90bfbe2454538cc" alt="" data-size="original"></p>                                                                                                                                                                                          |
| Columna de nota del cliente | <p>Añade otra columna de nota a la tabla de recompensas. Debe colocarse dentro del componente de tabla de recompensas.</p><p><img src="/files/d171efd79285304534b4c486d537c48284e80e38" alt="" data-size="original"></p>                                                                                                                                                                                                                                       |
| Columna de fecha            | <p>Añade otra columna de fecha a la tabla de recompensas. Debe colocarse dentro del componente de tabla de recompensas.</p><p><img src="/files/2d186ca7b1660d525b849849d7e3da9eb9157224" alt="" data-size="original"></p>                                                                                                                                                                                                                                      |
| Columna de recompensa       | <p>Añade otra columna de recompensa a la tabla de recompensas. Debe colocarse dentro del componente de tabla de recompensas.</p><p><img src="/files/f9102589f8cdebd9d88d849cd02504608973ddd3" alt="" data-size="original"></p>                                                                                                                                                                                                                                 |
| Columna de origen           | <p>Añade otra columna de origen a la tabla de recompensas. Debe colocarse dentro del componente de tabla de recompensas.</p><p><img src="/files/7e39f3939f26a3c1786d7818a8b7a26951320e29" alt="" data-size="original"></p>                                                                                                                                                                                                                                     |
| Columna de estado           | <p>Añade otra columna de estado a la tabla de recompensas. Debe colocarse dentro del componente de tabla de recompensas.</p><p><img src="/files/c0e6d4b54a5ba1fdf1f97d6eef300e492348cb53" alt="" data-size="original"></p>                                                                                                                                                                                                                                     |

</details>

<details>

<summary>Componentes de micrositio</summary>

*Los componentes de micrositio* se usan principalmente para el formulario de registro y la barra lateral de navegación de tu micrositio. Estos componentes no se pueden añadir a los widgets del programa.

| Componente                                      | Descripción                                                                                                                                                                                                                                                                                                                                                                                                            |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Campo de casilla de verificación del formulario | <p>Añade una casilla de verificación al formulario de registro. Puedes asignar si la casilla estaba marcada a un campo personalizado del participante de Advocate. Consulta Ver tus envíos del formulario de registro del micrositio para obtener más información.</p><p><img src="/files/5b9ceff6637233058d053b68482ddaae87c7243c" alt="" data-size="original"></p>                                                   |
| Campo desplegable del formulario                | <p>Añade una lista desplegable con elementos personalizables al formulario de registro. Puedes asignar el elemento de la lista seleccionado por el usuario a un campo personalizado del participante de Advocate. Ponte en contacto con Soporte para obtener ayuda con esto.</p><p><img src="/files/f27bbaee0f851533b65fa9aa5472dd782c40f3ca" alt="" data-size="original"></p>                                         |
| Campo de entrada del formulario                 | <p>Añade un campo de entrada de texto libre al formulario de registro. Puedes asignar el texto introducido por el usuario a un campo personalizado del participante de Advocate. <a href="https://app.impact.com/support/portal.ihtml?createTicket=true&#x26;">Contacta con soporte</a> para obtener ayuda con esto.</p><p><img src="/files/166efa1b6af8e0f4731de98a886066d3d4f82ed9" alt="" data-size="original"></p> |
| Campos de nombre del formulario                 | <p>Añade campos rellenables de nombre y apellido al formulario de registro.</p><p><img src="/files/601bf696a2c5353db3f2960d17adf778dcb617ec" alt="" data-size="original"></p>                                                                                                                                                                                                                                          |
| Elemento de la barra lateral                    | <p>Añade una nueva página o enlace a la navegación de la barra lateral de tu micrositio. Solo se puede colocar en el diseño de sesión iniciada del micrositio.</p><p><img src="/files/00375b23aa15c57e1edc902098cbc5a704775ad8" alt="" data-size="original"></p>                                                                                                                                                       |
| Campo de contraseña del formulario              | <p>Añade un campo de contraseña rellenable al formulario de registro.</p><p><img src="/files/0f6e0b37a021c3b922f7ad8b4c93ca326c590db8" alt="" data-size="original"></p>                                                                                                                                                                                                                                                |

</details>

<details>

<summary>Acceso instantáneo</summary>

*Acceso instantáneo* los componentes hacen que sea rápido y fácil para los amigos referidos registrarse o canjear recompensas sin pasar por el proceso de registro estándar. Son ideales para programas que usan widgets de referencia de acceso instantáneo o flujos de registro de amigos.

| Componente                       | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Código de cupón                  | <p>Muestra un código canjeable para una recompensa de tanque de recompensas.</p><p>El <a href="/pages/3f9f0331544fe8343349d47593329f71f2e71b72">tanque de recompensas</a> debe tener códigos de cupón disponibles para que este componente funcione según lo previsto.</p><p><img src="/files/a9822c6a8df7d8afdaf3aae726981dc8a59a5140" alt="" data-size="original"></p>                                                                                               |
| Registro de Advocate             | <p>Permite que los nuevos Advocates introduzcan su dirección de correo electrónico para registrarse y hacer referencias. Después de introducir su dirección de correo electrónico, los usuarios pasarán a una segunda pantalla donde podrán acceder a sus enlaces compartidos de referencia. Se usa para el Widget de referencia de sitio web de acceso instantáneo.</p><p><img src="/files/f10a63b6176944a8942854c900a089b469bf3f9b" alt="" data-size="original"></p> |
| Cerrar sesión del usuario actual | <p>Permite al espectador salir de la visualización personalizada de acceso instantáneo.</p><p><img src="/files/89215d17274a25f6f9d282a63ab6b007eb0a9835" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                              |
| Registro de amigo                | <p>Permite que los amigos referidos introduzcan su dirección de correo electrónico para registrarse. Después de introducir su dirección de correo electrónico, los usuarios pasarán a una segunda pantalla donde podrán acceder a su recompensa de Código de cupón. Se usa para el Widget de amigos de acceso instantáneo.</p><p><img src="/files/f10a63b6176944a8942854c900a089b469bf3f9b" alt="" data-size="original"></p>                                           |

</details>

<details>

<summary>Diseño</summary>

*Diseño* los componentes te permiten organizar y agrupar otros componentes. Úsalos para crear secciones, filas, columnas o pestañas.

| Componente                       | Descripción                                                                                                                                                                                                                                                                                                 |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Diseño principal de dos columnas | <p>Añade un diseño principal con dos columnas de contenido.</p><p><img src="/files/0384cd0d345d48b044ab5777c75d2dd7954d06b6" alt="" data-size="original"></p>                                                                                                                                               |
| Contenedor de diseño de fila     | <p>Añade un nuevo contenedor de fila para contenido. Se pueden colocar otros componentes dentro de la fila.</p><p><img src="/files/cad6b8eb876b62924d01afa035cc048ec9eca871" alt="" data-size="original"></p>                                                                                               |
| Contenedor de diseño de columna  | <p>Añade un nuevo contenedor de columna para contenido. Se pueden colocar otros componentes dentro de la columna.</p><p><img src="/files/cad6b8eb876b62924d01afa035cc048ec9eca871" alt="" data-size="original"></p>                                                                                         |
| Pestaña                          | <p>Añade una nueva pestaña a un grupo de pestañas genérico.</p><p><img src="/files/894a63447c5cc4f0d502db4cf68f227d81fad5d2" alt="" data-size="original"></p>                                                                                                                                               |
| Grupo de pestañas genérico       | <p>Añade un grupo de pestañas. Cada pestaña puede contener componentes y contenido distintos. Tiene tres pestañas de forma predeterminada, pero se pueden eliminar o añadir pestañas según sea necesario.</p><p><img src="/files/c54cc2f8cf9a8c0790cce0201e29d8fdfe3b9356" alt="" data-size="original"></p> |
| Sección inclinada                | <p>Añade una nueva sección que contiene un encabezado y texto de párrafo. Se pueden añadir otros componentes a la sección titulada debajo del encabezado.</p><p><img src="/files/490310263b518d1f66192b3cb1ca0cb8f9858564" alt="" data-size="original"></p>                                                 |

</details>

<details>

<summary>Facturas</summary>

*Factura* los componentes te permiten insertar componentes de factura para ver datos de ganancias.

| Componente                               | Descripción                                                                                                                                                                   |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tabla de facturas                        | <p>Añade un acordeón de facturas expandible que alberga datos de ganancias.</p><p><img src="/files/8aa7d4c82eeabfac19a823a99540755f62562d1a" alt="" data-size="original"></p> |
| Columna de fecha de la tabla de facturas | <p>Añade una nueva columna a tu componente de tabla de facturas.</p><p><img src="/files/871dcf195e68fc8c86e6484913d0b02b19526158" alt="" data-size="original"></p>            |

</details>

El *Tabla de clasificación* el componente te permite clasificar a los participantes de tu programa, ofrecer recompensas a los mejores y motivar a los participantes para impulsar mejores resultados en tu programa. Añade tablas de clasificación a tu [widget de acceso verificado](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) o [micrositio](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md)y configura el sistema de puntuación, el sistema de clasificación y las opciones de filtrado de participantes. Consulta los artículos siguientes para obtener más información:

* [Tablas de clasificación explicadas](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained.md)
* [Configurar una tabla de clasificación](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard.md)

| Componente                     | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Referencia iniciada            | <p>Este tipo de tabla de clasificación clasifica a los participantes según el número de referencias que han iniciado. Las puntuaciones de tus defensores de clientes corresponderán al número de referencias iniciadas.</p><p><img src="/files/0dd57bd1621cb4010c1733e7e5e3335fec9fcf5e" alt="" data-size="original"></p>                                                                                                                                                                       |
| Referencia convertida          | <p>Este tipo de tabla de clasificación clasifica a los participantes según el número de referencias que han convertido. Las referencias se consideran convertidas una vez que el amigo referido logra un objetivo del programa, como realizar una compra por un valor que hayas definido. Las puntuaciones de tus defensores de clientes corresponderán al número de referencias convertidas.</p><p><img src="/files/0dd57bd1621cb4010c1733e7e5e3335fec9fcf5e" alt="" data-size="original"></p> |
| Puntos obtenidos               | <p>Este tipo de tabla de clasificación clasifica a los participantes por el número total de Puntos que han obtenido en programas Advocate que recompensan con Puntos. Todos los Puntos de la unidad de recompensa cuentan siempre que no estén pendientes ni cancelados. Este tipo de tabla de clasificación solo es válido para el tipo de recompensa de Puntos.</p><p><img src="/files/97c8dbfcba449a082a18066c5eeb12e6acda4509" alt="" data-size="original"></p>                             |
| Tabla de clasificación anónima | <p>Una versión completamente anonimizada de la tabla de clasificación que no muestra ninguna información de identificación personal sobre otros participantes del programa. Puede mostrar cualquier tipo de tabla de clasificación.</p><p><img src="/files/89ecabd6fac6378664f5331fb47fd85f34444630" alt="" data-size="original"></p>                                                                                                                                                           |

<details>

<summary>Impuestos y efectivo</summary>

*impuestos y efectivo* los componentes te permiten incorporar la recopilación de formularios fiscales y opciones de pago en efectivo en tu [widget de acceso verificado](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) o [micrositio](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md).

Este grupo de componentes solo está disponible si la [*pagos en efectivo*](/brand/es/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained.md) función está activada en tu cuenta.

| Componente                                              | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Modal de información del socio                          | <p>Inserta un modal que recopila la información de país y moneda de los participantes. Esta información garantiza que tus participantes puedan recibir sus recompensas sin retrasos ni pasos de configuración adicionales.<br></p><p>Tiene dos estados configurables según si el correo electrónico del participante ya está vinculado a una cuenta existente:</p><ul><li><strong>Descripción del nuevo socio</strong>: Se muestra a los participantes por primera vez. El texto predeterminado ("Confirma ahora tu país y moneda para obtener tus futuras recompensas más rápido") les pide que proporcionen sus datos antes de recibir su enlace compartido.</li><li><strong>Descripción del socio existente</strong>: Se muestra cuando el correo electrónico del participante ya está asociado con una cuenta en impact.com. El modal rellena previamente su información y le pide que la confirme en lugar de volver a introducirla desde cero.</li></ul> |
| Alerta de estado del pago                               | <p>Alerta al participante sobre las acciones que debe realizar antes de poder recibir un pago en efectivo. El componente incluye un botón de llamada a la acción que lleva al participante a revisar su configuración de pago.</p><p>Opcionalmente, personaliza cualquiera de las descripciones de texto que verá el participante cuando consulte el componente.</p><p><img src="/files/74ffa2ceb4f0adc8bf44ce4e06dd2df380ae40f1" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Formulario de pago en efectivo para micrositio y widget | <p>Inserta un formulario que recopila la información bancaria de los participantes y cualquier formulario fiscal aplicable, como un W-8 o un W-9.</p><p>Opcionalmente, personaliza cualquiera de las descripciones de texto que verá el participante cuando consulte el formulario.</p><p>También puedes establecer alertas y requisitos de verificación dentro de este componente.</p><p><img src="/files/05a1f8f928e04a0a19044334333669e6581f4ed9" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

</details>

<details>

<summary>Compartir</summary>

*Compartir* los componentes ofrecen a los participantes formas prácticas de promocionar sus enlaces y códigos de referencia en múltiples canales. Cuando un participante hace clic en un botón para compartir, se abre el canal elegido, como *Facebook*, *LinkedIn*, *WhatsApp*, o *correo electrónico*, con un mensaje o enlace prellenado, listo para enviar.

Algunos componentes, como Código de referido, muestran el código de referencia o promocional individual del participante junto con una opción para copiarlo al portapapeles para compartirlo rápidamente. Otros, como Códigos promocionales, presentan varios códigos disponibles (si se han asignado) en una vista de carrusel, e incluyen botones para compartir para que los participantes puedan publicar o enviar al instante el código seleccionado. Estas herramientas facilitan que los participantes difundan el mensaje y generen nuevas referencias.

| Componente                                                  | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Código de referido                                          | <p>Muestra un campo de código de referido con una opción para copiar al portapapeles. Se usa como parte de la funcionalidad de Códigos promocionales.</p><p><img src="/files/b945c50f4c76b119aaea96bc27cc80e5f162913c" alt="" data-size="original"></p>                                                                                                                                                                                                        |
| Códigos promocionales                                       | <p>Bloque de componentes preformateado que incluye un campo de código promocional de referido con un control deslizante para alternar entre varios códigos si se ha asignado más de uno. También incluye un enlace para compartir y componentes de botones para compartir en Facebook, LinkedIn y Twitter / X.</p><p><img src="/files/dc7d8e81683fc83216f993b64af646878e373726" alt="" data-size="original"></p>                                               |
| Botón para compartir en Facebook                            | <p>Muestra un botón para compartir en Facebook con texto personalizable. Cuando se hace clic, el botón redirige a una nueva publicación en el perfil de Facebook del usuario con la Mensajería social de la marca precargada.</p><p><img src="/files/16173d899876265b6e5ca4a3f1bd554286e60146" alt="" data-size="original"></p>                                                                                                                                |
| Botón para compartir en X                                   | <p>Muestra un botón para compartir mediante X con texto personalizable. Cuando se hace clic, el botón redirige a una nueva publicación en la cuenta de X del usuario con la Mensajería social de la marca precargada.</p><p><img src="/files/5ee4628b23b8fac813a6408f2c06ea8b11ecf2a4" alt="" data-size="original"></p>                                                                                                                                        |
| Botón para compartir por correo electrónico                 | <p>Muestra un botón para compartir por correo electrónico con texto personalizable. Cuando se hace clic, el botón abre la aplicación de correo predeterminada del usuario e inicia un nuevo correo electrónico con la Mensajería social de la marca precargada.</p><p><img src="/files/6314a399817aea87cf7630c8564b69c04d0f5a38" alt="" data-size="original"></p>                                                                                              |
| Botón para compartir desde la hoja para compartir del móvil | <p>Muestra un botón para compartir dentro del navegador web del participante. Cuando se hace clic, el botón abre un menú que enumera todas las aplicaciones disponibles que el usuario puede abrir para compartir su enlace. Cuando se selecciona una aplicación, se creará una nueva publicación o mensaje con la Mensajería social de la marca precargada.</p><p><img src="/files/5a5d812d3f727c01eefeda101be9b905c9891041" alt="" data-size="original"></p> |
| Botón para compartir en LinkedIn                            | <p>Muestra un botón para compartir en LinkedIn con texto personalizable. Cuando se hace clic, el botón redirige a una nueva publicación en el perfil de LinkedIn del usuario con la Mensajería social de la marca precargada.</p><p><img src="/files/f3e3e3b7176f2a337102cbbaa5b3f02c4ec59416" alt="" data-size="original"></p>                                                                                                                                |
| Botón para compartir por SMS                                | <p>Muestra un botón para enviar un mensaje a un amigo con texto personalizable. Cuando se hace clic, el botón redirige a la aplicación predeterminada de SMS/mensajería de texto del usuario y se creará un nuevo SMS/mensaje de texto con la Mensajería social de la marca precargada.</p><p><img src="/files/3b5cb741efa3e0ec9eae3a28673987251635f26b" alt="" data-size="original"></p>                                                                      |
| Botón para compartir en Messenger                           | <p>Muestra un botón para compartir mediante Messenger con texto personalizable. Cuando se hace clic, el botón redirige a un nuevo mensaje en la aplicación Facebook Messenger del usuario con la Mensajería social de la marca precargada.</p><p><img src="/files/c780990bbffc7008b48ff5055d75f0df7a5bb87c" alt="" data-size="original"></p>                                                                                                                   |
| Botón para compartir en WhatsApp                            | <p>Muestra un botón para compartir mediante WhatsApp con texto personalizable. Cuando se hace clic, el botón redirige a un nuevo mensaje en la cuenta de WhatsApp del usuario con la Mensajería social de la marca precargada.</p><p><img src="/files/3b845d3567d50e7f0550680f7149878bae1ba924" alt="" data-size="original"></p>                                                                                                                               |
| Botón para compartir en LINE                                | <p>Muestra un botón para compartir mediante LINE Messenger con texto personalizable. Cuando se hace clic, el botón redirige a un nuevo mensaje en la aplicación LINE Messenger del usuario con la Mensajería social de la marca precargada.</p><p><img src="/files/ca1d5ef68d229dab7629ebcf7947d184c6fc35d7" alt="" data-size="original"></p>                                                                                                                  |
| Botón para compartir en Pinterest                           | <p>Muestra un botón para compartir en Pinterest con texto personalizable. Cuando se hace clic, el botón redirige a una nueva publicación en el perfil de Pinterest del usuario con la Mensajería social de la marca precargada.</p><p><img src="/files/9aa2645b7d65415c042c7aa8b894d0b7b0712090" alt="" data-size="original"></p>                                                                                                                              |
| Enlace para compartir                                       | <p>Muestra el enlace para compartir del participante para este programa.</p><p><img src="/files/29fce8c2144c4ec49ce7c1524866e863d2c124cf" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                     |
| Código QR                                                   | <p>Muestra el enlace para compartir del participante en forma de código QR para este programa.</p><p><img src="/files/e31eb153c93ab2471cfb6d9e4d0e0a39cf0a8635" alt="" data-size="original"></p>                                                                                                                                                                                                                                                               |

</details>

<details>

<summary>Referencias</summary>

*Referido* los componentes muestran información sobre los amigos referidos del participante y su estado de conversión. Facilitan a los participantes el seguimiento de a quién han referido, cuándo ocurrieron las conversiones y qué recompensas se obtuvieron con esas referencias.

| Componente                                      | Descripción                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tarjeta de referido                             | <p>Bloque de componentes preformateado que incluye <em>cronología del programa</em>, <em>enlace para compartir</em>, y <em>Facebook</em>, <em>LinkedIn,</em> y <em>Twitter / X</em> componentes de botones para compartir. Se pueden añadir o eliminar otros componentes según sea necesario.</p><p><img src="/files/4fb788fdbcf2898c7122a1ce39d9837df24853b7" alt="" data-size="original"></p> |
| Tabla de referidos                              | <p>Muestra una tabla que muestra a los amigos referidos del participante, la fecha de conversión y el estado de conversión.</p><p><img src="/files/dc15defbc6d8cf229ee2c4768967f6ff9c3ea331" alt="" data-size="original"></p>                                                                                                                                                                   |
| Columna de fecha de la tabla de referidos       | <p>Añade otra columna de fecha a la tabla de referidos. Debe colocarse dentro del componente de tabla de referidos.</p><p><img src="/files/fff1a92cd562ab49efcd398daeef312a88cb38db" alt="" data-size="original"></p>                                                                                                                                                                           |
| Columna de recompensas de la tabla de referidos | <p>Añade otra columna de recompensas a la tabla de referidos. Debe colocarse dentro del componente de tabla de referidos.</p><p><img src="/files/9683f662bd8753c9d54e426063da71bdd645d8de" alt="" data-size="original"></p>                                                                                                                                                                     |
| Columna de estado de la tabla de referidos      | <p>Añade otra columna de estado a la tabla de referidos. Debe colocarse dentro del componente de tabla de referidos.</p><p><img src="/files/1d9f6c447f0964a9c15a4c7ff994e083804f4e0b" alt="" data-size="original"></p>                                                                                                                                                                          |
| Columna de usuario de la tabla de referidos     | <p>Añade otra columna de cliente (amigo referido) a la tabla de referidos. Debe colocarse dentro del componente de tabla de referidos.</p><p><img src="/files/1df3087ef7261ea7482d43ef38887d6975d5bc1b" alt="" data-size="original"></p>                                                                                                                                                        |

</details>

<details>

<summary>Avanzado</summary>

Los componentes avanzados te dan más control sobre lo que ven los participantes y cuándo lo ven. Permiten la visualización condicional de contenido, anulaciones del programa y otras configuraciones especializadas que ayudan a adaptar la experiencia a audiencias específicas.

| Componente                  | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Área condicional / segmento | <p>Muestra contenido en esta sección solo cuando el participante pertenezca a un determinado <a href="/pages/126d9847dc94fcc1f9794b4b95ecb9bbeb8edd85">segmento de usuario</a>.</p><p>Para establecer el segmento de usuario, abre las propiedades del componente y edita la expresión JSONata en el <em>Condición</em> campo.</p><p>Los usuarios dentro del segmento configurado verán todo el contenido mostrado en la sección condicional, mientras que los usuarios que no estén en el segmento no verán el contenido.</p><p><img src="/files/8ffccfbe71b361b54637868c64071275d06b05e9" alt="" data-size="original"></p>                                                                        |
| Área condicional / campo    | <p>Muestra contenido en esta sección solo cuando un <a href="/pages/51179b32d7b0a6842878ce5bdec26dff26243470">campo personalizado</a> del perfil del participante contiene un valor determinado.</p><p>Para establecer el nombre y el valor del campo personalizado, abre las propiedades del componente y edita la expresión JSONata en el <em>Condición</em> campo.</p><p>Los usuarios con el valor correcto del campo personalizado verán todo el contenido mostrado en la sección condicional, mientras que los usuarios sin el valor correcto del campo personalizado no verán el contenido.</p><p><img src="/files/8ffccfbe71b361b54637868c64071275d06b05e9" alt="" data-size="original"></p> |
| Sección del programa        | <p>El componente de sección del programa te permite anular el ID de programa de sus componentes secundarios. Úsalo cuando quieras mostrar contenido que no esté vinculado a un programa específico. Incluido de forma predeterminada en la mayoría de las plantillas de widget y micrositio.</p><p><img src="/files/8ffccfbe71b361b54637868c64071275d06b05e9" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                      |

</details>

<details>

<summary>Tipografía</summary>

Los componentes de tipografía te permiten añadir bloques de texto con formato a tu widget o micrositio. Selecciona entre:

* Párrafo
* Encabezado 1
* Encabezado 2
* Encabezado 3
* Encabezado 4

  <div data-with-frame="true"><figure><img src="/files/8fa2bcdb002a63c30244f314362bb5add441c548" alt="" width="208"><figcaption></figcaption></figure></div>

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.impact.com/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.