> 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).

# Explicación de los componentes de widgets y micrositios

<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">Haz el curso de PXA</a>

{% hint style="success" %}
**Limitado**: Los componentes, aparte de los incluidos en las plantillas dadas, solo están disponibles para ciertas ediciones del producto o complementos. Si te gustaría tener 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 imágenes principales y tarjetas de tareas, que componen el widget o micrositio de tu programa Advocate. Estos elementos conforman 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 que coincidan con tu marca.

Este artículo proporciona una lista categorizada de los componentes disponibles dentro de los editores de widgets y micrositios. 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* los componentes para que tus participantes sepan cómo les está yendo en tu programa. Para ver una lista de estadísticas compatibles con estos componentes, visita [Estadísticas del widget y del 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 obtenidas     | Muestra un recuento de los premios de tarjeta de regalo obtenidos por el Advocate.                                                                                  |
| Referidos                        | Muestra cuántos referidos ha hecho el participante. Incluye referidos iniciados y convertidos.                                                                      |
| Contenedor con tres estadísticas | Una plantilla con espacio para tres estadísticas. Las estadísticas mostradas se pueden cambiar. Las estadísticas se pueden agregar y quitar según se desee.         |
| Otra estadística                 | Muestra una estadística de tu elección. Puedes elegir entre una estadística de referidos, 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 todo 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 texto de encabezado que se extienden a lo largo de 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 y que redirige a los participantes al enlace seleccionado. El color del botón está controlado por el color de marca establecido a 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 ganar recompensas. Incluye dos pasos del explicador del programa de forma predeterminada. Se pueden agregar más pasos. El color está controlado por el color de marca establecido a nivel del contenedor de marca.</p><p><img src="/files/84e165ac2fff3bb714c291ca9fe97f6071e05326" alt="" data-size="original"></p>                          |
| Paso del explicador del programa | <p>Agrega texto descriptivo para explicar una parte de tu programa. Encaja dentro de un componente explicador del programa. El color está controlado por el color de marca establecido a nivel del contenedor de marca.</p><p><img src="/files/e1cbe3391936cc11dae06884b10f68024d83ada7" alt="" data-size="original"></p>                                                                                                |
| Cronograma del programa          | <p>Muestra una descripción general del recorrido de referidos y de las recompensas para tus participantes. Agrega o quita entradas de la cronología según sea necesario. El color del ícono circular y de las líneas entre entradas está controlado por el color de marca establecido a 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 referidos. El color del ícono circular y de las líneas entre entradas está controlado por el color de marca establecido a nivel del contenedor de marca.</p><p><img src="/files/6a487a8b6a46e200b8e61ef519cf14771839a34c" alt="" data-size="original"></p>                                                            |
| Mostrar nombre de usuario        | <p>Obtiene dinámicamente el nombre completo del participante. Por defecto es “Usuario anónimo” si el participante no ha ingresado 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 en widgets y micrositios con acceso verificado.
{% endhint %}

| Componente                   | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Fuente de tarjetas de tareas | <p>Las tarjetas de tareas permiten a tus usuarios realizar acciones o ver su progreso hacia los objetivos del programa Advocate directamente desde el widget o el micrositio. Este componente agrega varias tarjetas de tareas a tu widget o micrositio. El color del botón está controlado por el color de marca establecido a nivel del contenedor de marca.</p><p><img src="/files/2a8e3e00d37b8c56b1bbf830149b2a750d137782" alt="" data-size="original"></p> |
| Intercambio de recompensas   | <p>Permite a los participantes intercambiar 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 recompensas que el participante ha ganado. 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>Agrega 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>Agrega 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>Agrega 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>Agrega 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>Agrega 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 del micrositio</summary>

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

| Componente                                      | Descripción                                                                                                                                                                                                                                                                                                                                                                                                        |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Campo de casilla de verificación del formulario | <p>Agrega una casilla de verificación al formulario de registro. Puedes asignar si la casilla estaba marcada a un campo personalizado del participante Advocate. Lee 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>Agrega una lista desplegable con elementos de lista personalizables al formulario de registro. Puedes asignar el elemento de lista seleccionado por el usuario a un campo personalizado del participante Advocate. Ponte en contacto con Soporte para recibir ayuda con esto.</p><p><img src="/files/f27bbaee0f851533b65fa9aa5472dd782c40f3ca" alt="" data-size="original"></p>                                 |
| Campo de entrada del formulario                 | <p>Agrega un campo de entrada de texto libre al formulario de registro. Puedes asignar el texto ingresado por el usuario a un campo personalizado del participante 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>Agrega 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>Agrega una nueva página o enlace a la navegación de la barra lateral de tu micrositio. Solo se puede colocar dentro del 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>Agrega 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 que los amigos referidos se registren o canjeen recompensas sin pasar por el proceso de registro estándar. Son ideales para programas que usan widgets de referidos 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 Fuel Tank.</p><p>La <a href="/pages/3f9f0331544fe8343349d47593329f71f2e71b72">tanque de combustible de recompensas</a> debe tener códigos de cupón disponibles para que este componente funcione como se espera.</p><p><img src="/files/a9822c6a8df7d8afdaf3aae726981dc8a59a5140" alt="" data-size="original"></p>                                                                                      |
| Registro de Advocate             | <p>Permite que los nuevos Advocates ingresen su dirección de correo electrónico para registrarse y hacer referidos. Después de ingresar su dirección de correo electrónico, los usuarios pasarán a una segunda pantalla donde pueden acceder a sus enlaces compartidos de referidos. Se usa para el widget de referidos 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 visitante 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 ingresen su dirección de correo electrónico para registrarse. Después de ingresar su dirección de correo electrónico, los usuarios pasarán a una segunda pantalla donde pueden 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>Agrega un diseño principal con dos columnas de contenido.</p><p><img src="/files/0384cd0d345d48b044ab5777c75d2dd7954d06b6" alt="" data-size="original"></p>                                                                                                                                              |
| Contenedor de fila del diseño    | <p>Agrega un nuevo contenedor de fila para contenido. Otros componentes se pueden colocar dentro de la fila.</p><p><img src="/files/cad6b8eb876b62924d01afa035cc048ec9eca871" alt="" data-size="original"></p>                                                                                              |
| Contenedor de columna del diseño | <p>Agrega un nuevo contenedor de columna para contenido. Otros componentes se pueden colocar dentro de la columna.</p><p><img src="/files/cad6b8eb876b62924d01afa035cc048ec9eca871" alt="" data-size="original"></p>                                                                                        |
| Pestaña                          | <p>Agrega 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>Agrega un grupo de pestañas. Cada pestaña puede contener componentes y contenido distintos. Tiene tres pestañas de forma predeterminada, pero se pueden quitar o agregar pestañas según sea necesario.</p><p><img src="/files/c54cc2f8cf9a8c0790cce0201e29d8fdfe3b9356" alt="" data-size="original"></p> |
| Sección titulada                 | <p>Agrega una nueva sección que contenga un encabezado y texto de párrafo. Se pueden agregar 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 los datos de ganancias.

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

</details>

La *Tabla de clasificación* el componente te permite clasificar a los participantes de tu programa, ofrecer recompensas a los de mejor rendimiento e incentivar a los participantes para impulsar mayores resultados en tu programa. Agrega 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Referido iniciado              | <p>Este tipo de tabla de clasificación ordena a los participantes según el número de referidos que han iniciado. Las puntuaciones de tus defensores de clientes corresponderán al número de referidos iniciados.</p><p><img src="/files/0dd57bd1621cb4010c1733e7e5e3335fec9fcf5e" alt="" data-size="original"></p>                                                                                                                                                                         |
| Referido convertido            | <p>Este tipo de tabla de clasificación ordena a los participantes según el número de referidos que han convertido. Los referidos se consideran convertidos una vez que el amigo referido alcanza un objetivo del programa, como realizar una compra de un valor que tú hayas definido. Las puntuaciones de tus defensores de clientes corresponderán al número de referidos convertidos.</p><p><img src="/files/0dd57bd1621cb4010c1733e7e5e3335fec9fcf5e" alt="" data-size="original"></p> |
| Puntos obtenidos               | <p>Este tipo de tabla de clasificación ordena a los participantes según el número total de puntos que han obtenido en programas Advocate que recompensan con puntos. Todos los puntos de 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 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 [*los 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 se ha activado para tu cuenta.

| Componente                                             | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alerta de estado del pago                              | <p>Advierte 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 vea el componente.</p><p><img src="/files/74ffa2ceb4f0adc8bf44ce4e06dd2df380ae40f1" alt="" data-size="original"></p>                  |
| Formulario de pago en efectivo del 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 vea el formulario.</p><p>También puedes configurar 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 convenientes de promocionar sus enlaces y códigos de referidos en múltiples canales. Cuando un participante hace clic en un botón de 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 referidos, muestran el código individual de referido o promoción del participante junto con una opción para copiar al portapapeles para compartir rápidamente. Otros, como Códigos promocionales, presentan varios códigos disponibles (si se han asignado) en una vista de carrusel, e incluyen botones de compartir para que los participantes puedan publicar o enviar al instante el código seleccionado. Estas herramientas facilitan que los participantes difundan el mensaje e impulsen nuevos referidos.

| Componente                                  | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Código de recomendación                     | <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 componente 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 Compartir en Facebook con texto personalizable. Al hacer clic, el botón redirigirá 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 Compartir vía X con texto personalizable. Al hacer clic, el botón redirigirá a una nueva publicación en la cuenta 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 Compartir por correo electrónico con texto personalizable. Al hacer clic, el botón abrirá la aplicación de correo electrónico predeterminada del usuario e iniciará un nuevo correo con la Mensajería social de la marca precargada.</p><p><img src="/files/6314a399817aea87cf7630c8564b69c04d0f5a38" alt="" data-size="original"></p>                                                                                                 |
| Botón de hoja para compartir en móvil       | <p>Muestra un botón para compartir dentro del navegador web del participante. Al hacer clic, el botón abrirá un menú que enumera todas las aplicaciones disponibles que el usuario puede abrir para compartir su enlace. Cuando se seleccione 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 Compartir en LinkedIn con texto personalizable. Al hacer clic, el botón redirigirá 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 Enviar un mensaje a un amigo con texto personalizable. Al hacer clic, el botón redirigirá 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 Compartir vía Messenger con texto personalizable. Al hacer clic, el botón redirigirá 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 Compartir vía WhatsApp con texto personalizable. Al hacer clic, el botón redirigirá 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 Compartir vía Line Messenger con texto personalizable. Al hacer clic, el botón redirigirá 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 Compartir en Pinterest con texto personalizable. Al hacer clic, el botón redirigirá 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>Referidos</summary>

*Referido* los componentes muestran información sobre los amigos referidos del participante y su estado de conversión. Facilitan a los participantes hacer seguimiento de a quién han referido, cuándo ocurrieron las conversiones y cualquier recompensa obtenida por esos referidos.

| Componente                                      | Descripción                                                                                                                                                                                                                                                                                                                                                                                 |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tarjeta de referido                             | <p>Bloque de componente preformateado que incluye <em>cronograma 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 agregar o quitar 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>Agrega 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>Agrega 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>Agrega 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>Agrega 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 para audiencias específicas.

| Componente                  | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Área / segmento condicional | <p>Muestra contenido en esta sección solo cuando el participante pertenece a un cierto <a href="/pages/126d9847dc94fcc1f9794b4b95ecb9bbeb8edd85">segmento de usuarios</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 establecido 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 / campo condicional    | <p>Muestra contenido en esta sección solo cuando un <a href="/pages/51179b32d7b0a6842878ce5bdec26dff26243470">campo personalizado</a> en el perfil del participante contiene un cierto valor.</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 del 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 agregar bloques de texto formateado 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.