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

{% hint style="success" %}
**Limitado**: Los componentes, aparte de los proporcionados en las plantillas dadas, solo están disponibles para ciertas ediciones o complementos del producto. 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 de 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 alinearse con tu marca.

Este artículo proporciona una lista categorizada de los componentes disponibles dentro de los editores de widget y micrositio. La mayoría de los componentes admiten estilos 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 informar a tus participantes de cómo les va en tu programa. Para ver una lista de las estadísticas que admiten 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 utiliza en programas de Advocate que recompensan a los participantes con puntos.                                          |
| Tarjetas regalo obtenidas        | Muestra la cantidad de recompensas de tarjetas regalo obtenidas por el Advocate.                                                                                          |
| Referidos                        | Muestra cuántas recomendaciones ha hecho el participante. Incluye recomendaciones 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 quitar estadísticas según se desee.                    |
| Otra estadística                 | Muestra una estadística de tu elección. Puedes elegir entre una estadística de recomendaciones, varias estadísticas de recompensas o crear una estadística personalizada. |

<figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fh7SqO0ijZKN04RyBL6ma%2FScreenshot%202026-05-20%20at%2009.51.59.png?alt=media&amp;token=55e2a10a-895a-4913-a2ba-16877a196a94" alt="" width="563"><figcaption></figcaption></figure>

</details>

<details>

<summary>Componentes comunes</summary>

*Componentes comunes* se utilizan ampliamente para mejorar tanto la funcionalidad como la coherencia del diseño en todo tu widget o micrositio. Abarcan 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 abarcan dos columnas. La imagen, el texto y el color de fondo se pueden actualizar.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-112e3e854f2ec884d09dcbf3c3a0dd91132b8065%2F0d6b6b7a5f3894b815b738a15afb7bd08e1ee77413858922235268a0119f528d.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                  |
| Imagen principal superpuesta     | <p>Una imagen de banner con texto superpuesto. La imagen, el texto y el color de fondo se pueden actualizar.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-def9dab1f6744d99f704005955522c5cae8f7ca1%2F1c8f53dc5117ebce1719f58d4974f97d4cb9fdddaa0a6d8741277d00139a5178.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e9f631d5fae5baef21e495c18995bcc41931ff86%2Fe0c44f0accab2819658563d03164459fb470eedf4929c402138476b2eb8afa36.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                               |
| Botón de enlace                  | <p>Un botón clicable 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-875e756c5a4d4a79e4b62187ff8acb00da68f51d%2Fc0ebb75eb41b33f85ab7695f287a373730909122d616a7c19fd4bdd0675c8787.png?alt=media" alt="" data-size="original"></p>                                                                                                                                    |
| Explicador del programa          | <p>Una plantilla que explica cómo funciona un programa de Advocate, como cómo ganar 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 establecido a nivel del Contenedor de marca.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ccd03061b907a18c914385b9fbdfcc1c54dfdd7e%2Fd7a265c23d586b3a6bcd9198cbee8eea2fedda9817794a468f309717081e72c0.png?alt=media" 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 establecido a nivel del Contenedor de marca.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-abf1a9d883d813187d2013fc7c8cd815639c0351%2Fba66c3ec6beb608ff42bb2cbb3757c5e98ad4e1946809fee380b0069cee8677a.png?alt=media" alt="" data-size="original"></p>                                                                                              |
| Cronología del programa          | <p>Muestra una vista general del recorrido de recomendación 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 las entradas está controlado por el Color de marca establecido a nivel del Contenedor de marca.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ad4d74aab6ba3e437ed0b5c2ba350e95e584491c%2Fecfa298fa0a457c5061fc7de31fa195868d524d0905ba16cf512470cb6a9de33.png?alt=media" 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 recomendación. El color del icono circular y de las líneas entre las entradas está controlado por el Color de marca establecido a nivel del Contenedor de marca.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0d702f85b541b49847a0131fa6094cf37d45b95b%2F6cce8eebc7410fd43031702177f3fa6450cb172e8d420a31b7041ccc926011be.png?alt=media" alt="" data-size="original"></p>                                                    |
| Mostrar nombre de usuario        | <p>Recupera 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-454b0c94d3cdf37d3bec1f9feb38efa895ce21d4%2F333618f77b6dee4e26c899eb87962d2769ebbc161da05a90aadb3a5f2b59c3cf.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                       |

</details>

<details>

<summary>Recompensas</summary>

{% hint style="info" %}
**Nota:** *Recompensa* los componentes solo pueden utilizarse para widgets y micrositios con 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 de 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 establecido a nivel del Contenedor de marca.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d1742cb883be61d63192bcb218ab5d53757e9e82%2Fe992aa7cf1f554169c1e60d351739a9bd8990ad01c4c29bf1deb2d971e07c8c4.png?alt=media" alt="" data-size="original"></p> |
| Canje de recompensas        | <p>Permite a los participantes canjear las recompensas obtenidas por otro tipo de recompensa.</p><p>Debes tener <a href="/brand/es/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/reward-exchange-explained.md">Canje de recompensas</a> configurado para usar esta función.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-bbfbff1ec1b5d7b899ab55217f300e5bdf820502%2F914a34e427693bf936d3363a8075046dd25ef3de091552fc7de4cb82e00b3d7b.png?alt=media" alt="" data-size="original"></p>                                                          |
| Tabla de recompensas        | <p>Muestra una lista de las recompensas que ha obtenido el participante. Puede incluir recompensas manuales y/o recompensas obtenidas en varios programas de Advocate.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-5b4272b710f08544f2091db011583b6300278788%2Facbbaa66b154eaf370ec5457fd9e77b39272a679f7a9c67b17383c5530362f92.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                      |
| Columna de nota del cliente | <p>Añade otra columna de notas a la tabla de recompensas. Debe colocarse dentro del componente Tabla de recompensas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-49a7a7000c4e43d73944d65d9268d049ce733f22%2F4bb3b31be09584ce982c27d57b373dc3ba807de9f29be528bab2361ae68d8c8e.png?alt=media" 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 Tabla de recompensas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9f1dabcef083a77ff77adb59d8d2877821b52e6c%2Fe36fb74a08d833bfbb0ebae4b1ef3ba7b49018b00c9cf835c75f1a6a73f3df9f.png?alt=media" 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 Tabla de recompensas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e64ef4645152bb65dd8c3e0ad3b8bee76f930f16%2Fd32357695c9503d7751f493e28b36d9bd8ee1af725556d43a072b2dbc2d1e9f0.png?alt=media" 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 Tabla de recompensas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e22f21797957227a12deafc7384625cf77154c01%2F57891cdf76885a886769e0fa768567c48e36f38c00a0e72e25ca640a21e6c92e.png?alt=media" 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 Tabla de recompensas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-10a40c5e3746406038e4e8bac76d9fffabfa2733%2F73173dd2ce38046c737485ea1c0123f1d51c18195c684f59ab776aac9f6f76b9.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                       |

</details>

<details>

<summary>Componentes del micrositio</summary>

*Micrositio* los componentes se utilizan 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 fue marcada a un campo personalizado del participante de Advocate. Lee Ver tus envíos del formulario de registro del micrositio para obtener más información.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b755fcb2cb0a2a4332d334c5d4df9750abc74535%2Fbe707549d5ab3386580210dadc39c277a8221a2294690f6f5098f8fa49e91dad.png?alt=media" alt="" data-size="original"></p>                                                           |
| Campo desplegable del formulario                | <p>Añade 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 de Advocate. Contacta con Soporte para obtener ayuda con esto.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d4d06463b739d6320cca385d51aef2ebb21a06e9%2Fbcfe9233e8daa3f5cdd4213fc80fb2a8ecef610eecaed1be02e99d4939ff14e5.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-22dbac6584da989b0190425decc62f668a813320%2F9324f8dd94e41ba973d7753c410bbd020e8d61f060652fcabbd14482b4d242c5.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f516e369b49dd1fa5220e0eb0fd5a8a5e13715cc%2Ff86f4e367584f563904db00af1e76cdad40c92a4b2694146b5b755a017e76886.png?alt=media" 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 puede colocarse en el diseño de inicio de sesión del micrositio.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-22080a0fa46172389a9f84eb1f5b915a9cb9bd53%2F927e9d1ef0ec4a6d3c1797199be78426ffcbaf84e4007288b303eee91d005e3d.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d11ad739227f7ef4d5ef2155131766cef7bfe569%2Fc09a224e7a38863ef546d342ef93fac272cfde0e95b47c6e99c73302159aece9.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                |

</details>

<details>

<summary>Acceso instantáneo</summary>

*Acceso instantáneo* los componentes facilitan y agilizan 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 recomendación 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>El <a href="/brand/es/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/fuel-tank-rewards-explained.md">depósito de recompensas de Fuel Tank</a> debe disponer de códigos de cupón disponibles para que este componente funcione según lo previsto.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b6751473ff9a89ec2635661cbefd69fe20e2606c%2Fdc86a733cfb70c7df0a19df89b1dd5c9bbc57d5e0ff52bb5278be069d9543ed6.png?alt=media" alt="" data-size="original"></p>                                     |
| Registro de Advocate             | <p>Permite que nuevos Advocates introduzcan su dirección de correo electrónico para registrarse y hacer recomendaciones. Tras introducir su dirección de correo electrónico, se llevará a los usuarios a una segunda pantalla donde pueden acceder a sus enlaces de recomendación para compartir. Se utiliza para el widget de recomendación del sitio web de acceso instantáneo.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-848bf4497a7280a28c48b76e0031a7cabd2702d1%2Fcb04ab4a85a9c132631ae16c6f15215af60c9f5355ab77de58469379dc65e0a9.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0a4b2367a12e92611062ba6b3385739c3f25f195%2Fcf128314c155054d77102dafd71a5e5082975ee8851b79b718d105095f498eef.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                           |
| Registro de amigo                | <p>Permite que los amigos referidos introduzcan su dirección de correo electrónico para registrarse. Tras introducir su dirección de correo electrónico, se llevará a los usuarios a una segunda pantalla donde pueden acceder a su recompensa de Código de cupón. Se utiliza para el widget de amigos de acceso instantáneo.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-848bf4497a7280a28c48b76e0031a7cabd2702d1%2Fcb04ab4a85a9c132631ae16c6f15215af60c9f5355ab77de58469379dc65e0a9.png?alt=media" 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 hero de dos columnas     | <p>Añade un diseño hero con dos columnas de contenido.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90fbc0943f7a9bf20af2a8ef5224fe307b4cd447%2Fe9d5fb3e534e6d42f93128e7f52c08f21cefd7f0c378c1f6e72877b5fbfe8703.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c6a50f4ca39b0fa9df127beda85b8fda790dbd1c%2F792b42fe4a633f3b3950954d520b5f5d8e7bce7c15d0d6ce14cc041c0244ea3c.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c6a50f4ca39b0fa9df127beda85b8fda790dbd1c%2F792b42fe4a633f3b3950954d520b5f5d8e7bce7c15d0d6ce14cc041c0244ea3c.png?alt=media" alt="" data-size="original"></p>                                                                                       |
| Pestaña                         | <p>Añade una nueva pestaña a un grupo genérico de pestañas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-bf80a7b35daafb8849d2fabb0acac194eb8de4ae%2F5517db3bff5c64677ef351b5ec94ce32336e728877cca2b5614cdc719bbdd087.png?alt=media" alt="" data-size="original"></p>                                                                                                                                             |
| Grupo genérico de pestañas      | <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 quitar o añadir pestañas según sea necesario.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f38bb2abbd959f6de3dd3057279bef72b167bd7a%2F6d51c82449438758a0d7e7c667b4e41e8b1ba274f5f32206ea0a934ef967349b.png?alt=media" alt="" data-size="original"></p> |
| Sección con título              | <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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d2e2627c0305da170e459293404b3a7a32bbdd57%2Fd5c2b7ee84117e3804a0afe8d99c1681b0c370c578620d960f2cd780b1b034f9.png?alt=media" 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 expandible de facturas que alberga datos de ganancias.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-4c505a7531266547be4dd870343a448fbe506af7%2F987ceee7ddf4cf17d9cc5978b505139e06c16cab3e44c221d7374f65e563fa19.jpg?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-fb42d6e770406c2e2cc06864b1aaf1d129d7df72%2F48530b7fb857185f3571f592166d3b8f937e5a2f84e6d8b0387c6b63c2e382de.png?alt=media" alt="" data-size="original"></p>            |

</details>

El *Clasificación* el componente te permite clasificar a los participantes de tu programa, ofrecer recompensas a los mejores rendimientos e incentivar a los participantes para obtener mejores resultados en tu programa. Añade clasificaciones 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 siguientes artículos para obtener más información:

* [Clasificaciones explicadas](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained.md)
* [Configurar una 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Recomendación iniciada   | <p>Este tipo de clasificación ordena a los participantes por el número de recomendaciones que han iniciado. Las puntuaciones de tus defensores de clientes corresponderán al número de recomendaciones iniciadas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-347d66dfe033a6dcf0e6d487801fbab053997704%2Fc4df3139983a0454f0cca11c832c8870fea8cf861c651210e437d2ee148ee757.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                          |
| Recomendación convertida | <p>Este tipo de clasificación ordena a los participantes por el número de recomendaciones que han convertido. Las recomendaciones se consideran convertidas una vez que el amigo referido logra un objetivo del programa, como realizar una compra de un valor que hayas definido. Las puntuaciones de tus defensores de clientes corresponderán al número de recomendaciones convertidas.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-347d66dfe033a6dcf0e6d487801fbab053997704%2Fc4df3139983a0454f0cca11c832c8870fea8cf861c651210e437d2ee148ee757.png?alt=media" alt="" data-size="original"></p> |
| Puntos obtenidos         | <p>Este tipo de clasificación ordena a los participantes por el número total de puntos que han obtenido en programas de Advocate que recompensan con puntos. Todos los puntos de la unidad de recompensa cuentan siempre que no estén pendientes o cancelados. Este tipo de clasificación solo es válido para el tipo de recompensa de puntos.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c77ede4e082778754887872f948e6b8b0d188474%2F83ae9393fa0cb1e9bc6f4dd53aa9d77e858bb40ef4e985a5247413950ff66729.png?alt=media" alt="" data-size="original"></p>                                             |
| Clasificación anónima    | <p>Una versión completamente anonimizada de la clasificación que no muestra ninguna información de identificación personal sobre otros participantes del programa. Puede mostrar cualquier tipo de clasificación.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7de957636976c1d06b91c963c3bc6befffa789d8%2Fb04ceffabe2ed8007c96b0f932ebf06063fd5d3a4af2dec81b1fad443ee7d4b5.png?alt=media" 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 se ha activado para 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 adicionales de configuración.<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 recibir más rápido tus futuras recompensas") les invita a proporcionar 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 a una cuenta en impact.com. El modal rellena automáticamente su información y les pide que la confirmen en lugar de volver a introducirla desde cero.</li></ul> |
| Alerta de estado de pago                                | <p>Advierte al participante de 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 sus ajustes de pago.</p><p>Opcionalmente, personaliza cualquiera de las descripciones de texto que verá el participante al ver el componente.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-4d9b5f8072ff2b0c78e1f173493cf4d2ddef9334%2F2c0be35e8e0bfbcb7d7b5e9b9ea30b1b794722e04336f566b033cc9850e1b486.png?alt=media" 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 al ver el formulario.</p><p>También puedes establecer alertas y requisitos de verificación dentro de este componente.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-00fc2e186e360a8330580a3163c8016aae9c6ecc%2F270f47b47bd597f40b6a4253ce541ea0b53a552847e5efc71afeaa74fba1354b.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                            |

</details>

<details>

<summary>Compartir</summary>

*Compartir* los componentes ofrecen a los participantes formas cómodas de promocionar sus enlaces y códigos de recomendación en varios 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 precompletado, listo para enviar.

Algunos componentes, como Código de recomendación, muestran el código individual de recomendación o promoción del participante junto con una opción para copiarlo al portapapeles y compartirlo rápidamente. Otros, como Códigos promocionales, presentan varios códigos disponibles (si se han asignado) en una vista deslizante 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 recomendaciones.

| Componente                                  | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Código de referido                          | <p>Muestra un campo de código de recomendación con una opción para copiar al portapapeles. Se utiliza como parte de la funcionalidad de Códigos promocionales.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-350b4cd5d21cca6714a3eadcac9b273250d1489b%2Fc765bebedb73ecdfcb67f14de17f261c9d55d4043cf4296025801350717df9ff.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                           |
| Códigos promocionales                       | <p>Bloque de componente preformateado que incluye un campo de código promocional de recomendación 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3fd5339df311e321f51f058bbaa88ddfaf08d6bc%2Ffe4b15e28eecd25533da83c6417660b98eb94e8dd083040f5f847d1683a8f7b2.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ac40825644d43883701dfefcf84d0d237ed0c694%2Fe90f8748aff7c0bf33cba007cab091851f916f9dfb24ec228bc27634bca575fe.png?alt=media" alt="" data-size="original"></p>                                                                                                                                     |
| Botón para compartir en X                   | <p>Muestra un botón Compartir en 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ce26efcd37d82f16d9f2d4d288f42b28e54bcb9b%2Fc4de3610b0ba8f1599ff74aa83740b07bf9d20a3ae09f33df7858dc15d8a82b2.png?alt=media" 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 y creará un nuevo correo con la Mensajería social de la marca precargada.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-99cd491d8066557af00352c2161adbf0d1ff80d9%2F65667d26945a492f02467c4d6cd3d88f4501f029c3fa924ce20587ae6661fde1.png?alt=media" alt="" data-size="original"></p>                                                                                                   |
| Botón de hoja para compartir 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 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b0aefc7accad7dc192307b765172cba66908faeb%2Fbf216b95fbd48c0377b824b12708e0ca1f8e6e2a9c1660359e7e0bbc65725b09.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2a776449d19fc08bb449a5f8351c7101075f1c74%2F2f76bd37890d40e8839f6cab5f0cb5a2b8b11d7bf5f9dfe02d48dad3a8d96cb1.png?alt=media" alt="" data-size="original"></p>                                                                                                                                     |
| Botón para compartir por SMS                | <p>Muestra un botón Envía un mensaje a un amigo con texto personalizable. Al hacer clic, el botón redirigirá a la aplicación de SMS/mensajería de texto predeterminada del usuario, y se creará un nuevo SMS/mensaje de texto con la Mensajería social de la marca precargada.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-798893a05da61813dc9d1935d7008941222a8b90%2F3a3fc9c019417421b28b3a5514384cc6a02b25046b7703325aeefe2ed4ca902a.png?alt=media" alt="" data-size="original"></p>                                                                           |
| Botón para compartir por Messenger          | <p>Muestra un botón Compartir por 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-93f82656f6614d7f34071466b5d061b7c3d1d463%2F2b31207d2addc11e7d589fada9808712bfa21e218fde0aebcbd0bc989d18919d.png?alt=media" alt="" data-size="original"></p>                                                                                                                             |
| Botón para compartir por WhatsApp           | <p>Muestra un botón Compartir por 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e3b0d2368c1eaa1b37d41216636f85eee4c9e138%2Fb939f470eb31109551821fe0d22887a99ae81678872ff3241ddcfe2e382c5796.png?alt=media" alt="" data-size="original"></p>                                                                                                                                         |
| Botón para compartir por LINE               | <p>Muestra un botón Compartir por 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0551e0947b75a319cd37b2fc5190f94aa7ac3275%2Fc9b7ee44e3f60422f7f0c1314fd669569eac6da0c1f4cdfe8baa7733f704b67b.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6c91830cc012ce3ddbdd99a80c2ab4808e27eb14%2F32f7f7814c6be91a947add2d5d7f0bb5b375a16f212313a18774e79dfa562374.png?alt=media" alt="" data-size="original"></p>                                                                                                                                   |
| Enlace para compartir                       | <p>Muestra el enlace para compartir del participante para este programa.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-a7096d63847a389d28ffebcc71d0883ed90cc525%2F2eb89dd61c2c37dbc09f4a4d765b980826a5a3f755bad93880e9fb9248593db6.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                 |
| Código QR                                   | <p>Muestra el enlace para compartir del participante para este programa en forma de código QR.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1aa383efd76c4268b71ab2118635a650a5dca9b3%2Fb575c24753eb2779431f9a9bfe56e84abd836992751052ea5d6b58b54a2fd964.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                           |

</details>

<details>

<summary>Referidos</summary>

*Referidos* 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 cualquier recompensa obtenida por esas recomendaciones.

| Componente                                            | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tarjeta de recomendación                              | <p>Bloque de componente 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 botón para compartir. Se pueden añadir o quitar otros componentes según sea necesario.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f756a1f54cf83ab690539ad68993287112cce6c0%2F8f6c3feabc2b64c582ba9c730c7813b993ead61741d6b21490dd04cc1a92c766.png?alt=media" alt="" data-size="original"></p> |
| Tabla de recomendaciones                              | <p>Muestra una tabla con los amigos referidos del participante, la fecha de conversión y el estado de conversión.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ce55181b973b561145f087c8112c6008d71daac2%2F14f8e870dfa6c7bf6ab3d1d1fc0ccdc296b2e0b654b72d9b955d7e658fcce1a3.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                        |
| Columna de fecha de la tabla de recomendaciones       | <p>Añade otra columna de fecha a la tabla de recomendaciones. Debe colocarse dentro del componente Tabla de recomendaciones.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-8992234a958c425bfc53bf938cd323162d62d857%2Fd33d6f5ef933f7df85c392f6733973cafe2b798ea1798628f55b67f201cb0734.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                             |
| Columna de recompensas de la tabla de recomendaciones | <p>Añade otra columna de recompensas a la tabla de recomendaciones. Debe colocarse dentro del componente Tabla de recomendaciones.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ef97eededbc5f92ec490dcab90fd10fb97170671%2F12c9225c7808b735b15b3534fd04a4ffbb7556b6fdc457a942f3ffb76456ba69.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                       |
| Columna de estado de la tabla de recomendaciones      | <p>Añade otra columna de estado a la tabla de recomendaciones. Debe colocarse dentro del componente Tabla de recomendaciones.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e3440cacb4114c9d370932773b6d92b971729d75%2F1cbe3630384c042632077d3cf87577401eaa02496651fbf90e6e4dba9f62a5aa.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                            |
| Columna de usuario de la tabla de recomendaciones     | <p>Añade otra columna de cliente (amigo referido) a la tabla de recomendaciones. Debe colocarse dentro del componente Tabla de recomendaciones.</p><p><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-07c39fcbf12ca844c00d89c7e423190d5e7ee38e%2F2e6b9f6c02a9670ddd7b2bf8fc050f6a8776851c6eac94b794c42d3aa33ed2f8.png?alt=media" 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 mostrar contenido de forma condicional, anulaciones del programa y otras configuraciones especializadas que ayudan a adaptar la experiencia a públicos específicos.

| Componente                  | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Área condicional / segmento | <p>Muestra contenido en esta sección solo cuando el participante pertenezca a un determinado <a href="/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participants/manage-advocate-user-segments.md">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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2fe790e8458995641bd60d7f1efc8f81a0c5598e%2Fbb4c121de32787e766f9d5930e0e34f0ce2637ab3a1dfc6aa5fb7bf7bb4bd0d5.png?alt=media" alt="" data-size="original"></p>                                                                                                           |
| Área condicional / campo    | <p>Muestra contenido en esta sección solo cuando un <a href="/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participants/custom-and-calculated-fields/custom-fields-for-advocate-explained.md">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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2fe790e8458995641bd60d7f1efc8f81a0c5598e%2Fbb4c121de32787e766f9d5930e0e34f0ce2637ab3a1dfc6aa5fb7bf7bb4bd0d5.png?alt=media" 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2fe790e8458995641bd60d7f1efc8f81a0c5598e%2Fbb4c121de32787e766f9d5930e0e34f0ce2637ab3a1dfc6aa5fb7bf7bb4bd0d5.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                     |

</details>

<details>

<summary>Tipografía</summary>

Los componentes de tipografía te permiten añadir 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="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-a21333a42165afd0b94699beb820ce6f01d4967b%2F98486fd03f5278fcc0128c28d9b9c6a7a62508a7f08c0db73e8d274a1198d0e0.jpg?alt=media" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.