# Componentes de Widget e Microsite Explicados

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

{% hint style="success" %}
**Limitado**: Componentes, além daqueles fornecidos nos templates dados, estão disponíveis apenas para certas edições do produto ou complementos. Se você quiser um controle mais detalhado sobre quais componentes seus microsites usam, entre em contato conosco para atualizar seu programa.
{% endhint %}

Componentes são os blocos de construção individuais, como imagens principais e cartões de tarefa, que compõem o widget ou microsite do seu programa Advocate. Esses elementos moldam a [experiência do participante](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences) e podem ser personalizados para alinhar-se à sua marca.

Este artigo fornece uma lista categorizada dos componentes disponíveis nos editores de widget e microsite. A maioria dos componentes suporta estilização e personalização, embora alguns tenham limitações de design. Você também pode visualizar os estados do seu componente na interface do editor.

<details>

<summary>Estatísticas</summary>

Use *Estatísticas* componentes para informar seus participantes sobre seu desempenho no programa. Para uma lista de estatísticas que esses componentes podem suportar, visite [Estatísticas de Widget e Microsite](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained).

| Componente                      | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Saldo de Pontos                 | <p>Mostra o saldo de Pontos do participante. Usado em programas Advocate que recompensam participantes com pontos.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ff7233d6a49bcc71a20dc6cfb3bf75ee62364ff4%2Fe1d9aac51361456cf34386eb5b5617d320af8f5087f2d38e3e3b25ff04f6efc4.png?alt=media" alt="" data-size="original"></p>                                                |
| GiftCards Recebidos             | <p>Mostra a contagem de recompensas em gift cards recebidas pelo Advocate.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-51c634a017ce4206b9e6412627708952b5768a3c%2F7ad00a45ca02abc61aa2883c4303e43a878e9702e3410bb5a6eedcb46d8100e4.png?alt=media" alt="" data-size="original"></p>                                                                                        |
| Referências                     | <p>Exibe quantas referências o participante fez. Inclui referências iniciadas e convertidas.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5433d26e89df79a0006bc70d66c7f136c8c4de9%2F40d8d181ce9bfcf7ca597db86ffddaf517b98fdcd65270945bcdef43faeccd2d.png?alt=media" alt="" data-size="original"></p>                                                                      |
| Contêiner com Três Estatísticas | <p>Um template com espaço para três estatísticas. As estatísticas exibidas podem ser alteradas. Estatísticas podem ser adicionadas e removidas conforme desejado.</p><p><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-eb3c3041a0cabee4b4be38ed5160f4baa660ba92%2F8526311212dbbab7ee4417e937d156eb481f6feb7a254b4c3e84d21c814d00c9.png?alt=media" alt="" data-size="original"></p> |
| Outra Estatística               | Exibe uma estatística de sua escolha. Você pode selecionar entre uma estatística de referência, várias estatísticas de recompensa ou criar uma estatística personalizada.                                                                                                                                                                                                                                                                                                     |

</details>

<details>

<summary>Componentes Comuns</summary>

*Componentes Comuns* são amplamente usados para aprimorar tanto a funcionalidade quanto a consistência de design no seu widget ou microsite. Eles cobrem elementos visuais e estruturais de uso geral, como imagens principais, formatação de layout e etapas descritivas do programa.

| Componente                        | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Imagem Principal em Duas Colunas  | <p>Uma imagem de banner e texto de cabeçalho que se estendem por duas colunas. A imagem, o texto e a cor de fundo podem ser atualizados.</p><p><img src="https://526234278-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>                                                                                                                                                       |
| Imagem Principal com Sobreposição | <p>Uma imagem de banner com texto sobreposto. A imagem, o texto e a cor de fundo podem ser atualizados.</p><p><img src="https://526234278-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>                                                                                                                                                                                        |
| Imagem                            | <p>Uma foto. A cor de fundo, alinhamento, altura e largura podem ser alterados.</p><p><img src="https://526234278-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ão de Link                     | <p>Um botão clicável que redireciona os participantes para o link que você selecionar. A cor do botão é controlada pela Cor da Marca definida no nível do Contêiner de Marca.</p><p><img src="https://526234278-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 do Programa            | <p>Um template que explica como um programa Advocate funciona, por exemplo, como ganhar recompensas. Inclui duas etapas explicativas do programa por padrão. Mais etapas podem ser adicionadas. A cor é controlada pela Cor da Marca definida no nível do Contêiner de Marca.</p><p><img src="https://526234278-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>                  |
| Etapa do Explicador do Programa   | <p>Adicione texto descritivo para explicar parte do seu programa. Cabe dentro de um componente explicador do programa. A cor é controlada pela Cor da Marca definida no nível do Contêiner de Marca.</p><p><img src="https://526234278-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>                                                                                           |
| Linha do Tempo do Programa        | <p>Exiba uma visão geral da jornada de referência e das recompensas para seus participantes. Adicione ou remova entradas da linha do tempo conforme necessário. A cor do ícone circular e das linhas entre as entradas é controlada pela Cor da Marca definida no nível do Contêiner de Marca.</p><p><img src="https://526234278-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 da Linha do Tempo         | <p>Cabe dentro de um componente de linha do tempo do programa para mostrar uma etapa da jornada de referência. A cor do ícone circular e das linhas entre as entradas é controlada pela Cor da Marca definida no nível do Contêiner de Marca.</p><p><img src="https://526234278-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>                                                  |
| Exibição do Nome do Usuário       | <p>Puxa dinamicamente o nome completo do participante. Padrão para “Usuário Anônimo” se o participante não tiver inserido um nome.</p><p><img src="https://526234278-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" %}
**Observação:** *Recompensa* componentes só podem ser usados em widgets e microsites com acesso verificado.
{% endhint %}

| Componente                      | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Feed de Cartões de Tarefa       | <p>Cartões de tarefa permitem que seus usuários realizem ações ou vejam o progresso em direção às metas do programa Advocate diretamente no widget ou microsite. Este componente adiciona múltiplos cartões de tarefa ao seu widget ou microsite. A cor do botão é controlada pela Cor da Marca definida no nível do Contêiner de Marca.</p><p><img src="https://526234278-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> |
| Troca de Recompensa             | <p>Permita que os participantes troquem recompensas ganhas por outro tipo de recompensa.</p><p>Você deve ter <a href="../advocate-rewards/reward-exchange-explained">Troca de Recompensa</a> configurado para usar esse recurso.</p><p><img src="https://526234278-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>                                                                                                         |
| Tabela de Recompensas           | <p>Exiba uma lista de recompensas que o participante ganhou. Pode incluir recompensas manuais e/ou recompensas ganhas em múltiplos programas Advocate.</p><p><img src="https://526234278-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>                                                                                                                                                                                   |
| Coluna de Observação do Cliente | <p>Adicione outra coluna de observação à tabela de recompensas. Deve ser colocada dentro do componente Tabela de Recompensas.</p><p><img src="https://526234278-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>                                                                                                                                                                                                            |
| Coluna de Data                  | <p>Adicione outra coluna de data à tabela de recompensas. Deve ser colocada dentro do componente Tabela de Recompensas.</p><p><img src="https://526234278-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>                                                                                                                                                                                                                  |
| Coluna de Recompensa            | <p>Adicione outra coluna de recompensa à tabela de recompensas. Deve ser colocada dentro do componente Tabela de Recompensas.</p><p><img src="https://526234278-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>                                                                                                                                                                                                            |
| Coluna de Fonte                 | <p>Adicione outra coluna de origem à tabela de recompensas. Deve ser colocada dentro do componente Tabela de Recompensas.</p><p><img src="https://526234278-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>                                                                                                                                                                                                                |
| Coluna de Status                | <p>Adicione outra coluna de status à tabela de recompensas. Deve ser colocada dentro do componente Tabela de Recompensas.</p><p><img src="https://526234278-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 de Microsite</summary>

*Microsite* componentes são usados principalmente para o formulário de registro do seu microsite e a barra lateral de navegação. Esses componentes não podem ser adicionados aos widgets do programa.

| Componente                              | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Campo de Caixa de Seleção do Formulário | <p>Adicione uma caixa de seleção ao formulário de registro. Você pode mapear se a caixa foi marcada para um campo personalizado no participante Advocate. Leia Visualize Suas Submissões de Formulário de Registro do Microsite para mais informações.</p><p><img src="https://526234278-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 de Lista Suspensa do Formulário   | <p>Adicione uma lista suspensa com itens personalizáveis ao formulário de registro. Você pode mapear o item selecionado pelo usuário para um campo personalizado no participante Advocate. Contate o Suporte para assistência com isso.</p><p><img src="https://526234278-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 do Formulário          | <p>Adicione um campo de entrada de texto livre ao formulário de registro. Você pode mapear o texto inserido pelo usuário para um campo personalizado no participante Advocate. <a href="https://app.impact.com/support/portal.ihtml?createTicket=true&#x26;">Contate o suporte</a> para assistência com isso.</p><p><img src="https://526234278-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 Nome do Formulário            | <p>Adicione campos preenchíveis de Nome e Sobrenome ao formulário de registro.</p><p><img src="https://526234278-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>                                                                                                                                                                                                                                |
| Item da Barra Lateral                   | <p>Adicione uma nova página ou link à navegação da barra lateral do seu microsite. Só pode ser colocado no Layout Conectado do microsite.</p><p><img src="https://526234278-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 Senha do Formulário            | <p>Adicione um campo de senha preenchível ao formulário de registro.</p><p><img src="https://526234278-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>Acesso Instantâneo</summary>

*Acesso Instantâneo* componentes tornam rápido e fácil para amigos referidos se inscreverem ou resgatar recompensas sem passar pelo processo padrão de registro. Eles são ideais para programas que usam widgets de referência com acesso instantâneo ou fluxos de registro de amigos.

| Componente                       | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Código de Cupom                  | <p>Exiba um código resgatável para uma recompensa Fuel Tank.</p><p>O <a href="../advocate-rewards/fuel-tank-rewards-explained">tank de recompensas</a> deve ter códigos de cupom disponíveis para que este componente funcione como previsto.</p><p><img src="https://526234278-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>Permita que novos Advocates insiram seu endereço de e-mail para se registrarem e fazerem referências. Após inserir o e-mail, os usuários serão levados a uma segunda tela onde poderão acessar seus links de compartilhamento de referência. Usado para o Widget de Referência de Website com acesso instantâneo.</p><p><img src="https://526234278-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> |
| Encerrar sessão do usuário atual | <p>Permita que o visualizador saia da exibição personalizada de acesso instantâneo.</p><p><img src="https://526234278-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 Amigos               | <p>Permita que amigos referidos insiram seu endereço de e-mail para se registrarem. Após inserir o e-mail, os usuários serão levados a uma segunda tela onde poderão acessar sua recompensa de Código de Cupom. Usado para o Widget de Amigos com acesso instantâneo.</p><p><img src="https://526234278-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>Layout</summary>

*Layout* componentes permitem organizar e agrupar outros componentes. Use-os para criar seções, linhas, colunas ou abas.

| Componente                     | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Layout de Hero em Duas Colunas | <p>Adicione um layout hero com duas colunas de conteúdo.</p><p><img src="https://526234278-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>                                                                                                                        |
| Contêiner de Layout em Linha   | <p>Adicione um novo contêiner de linha para conteúdo. Outros componentes podem ser colocados dentro da linha.</p><p><img src="https://526234278-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>                                                                   |
| Contêiner de Layout em Coluna  | <p>Adicione um novo contêiner de coluna para conteúdo. Outros componentes podem ser colocados dentro da coluna.</p><p><img src="https://526234278-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>                                                                 |
| Aba                            | <p>Adicione uma nova aba a um grupo genérico de abas.</p><p><img src="https://526234278-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 Abas         | <p>Adicione um grupo de abas. Cada aba pode conter componentes e conteúdo distintos. Tem três abas por padrão, mas abas podem ser removidas ou adicionadas conforme necessário.</p><p><img src="https://526234278-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> |
| Seção Inclinada                | <p>Adicione uma nova seção que contenha um título e um parágrafo de texto. Outros componentes podem ser adicionados à seção com título abaixo do cabeçalho.</p><p><img src="https://526234278-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>Faturas</summary>

*Fatura* componentes permitem inserir componentes de fatura para visualizar dados de ganhos.

| Componente                          | Descrição                                                                                                                                                                                                                                                                                                                                                                              |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tabela de Faturas                   | <p>Adicione um acordeão de fatura expansível que contenha dados de ganhos.</p><p><img src="https://526234278-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> |
| Coluna de Data da Tabela de Faturas | <p>Adicione uma nova coluna ao seu componente de tabela de faturas.</p><p><img src="https://526234278-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>

O *Quadro de Líderes* componente permite classificar seus participantes do programa, oferecer recompensas aos melhores colocados e incentivar os participantes a gerar melhores resultados no seu programa. Adicione quadros de líderes ao seu [widget com acesso verificado](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained) ou [microsite](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview), e configure o sistema de pontuação, o sistema de classificação e as opções de filtragem de participantes. Veja os artigos abaixo para mais informações:

* [Quadros de Líderes Explicados](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/leaderboards-explained)
* [Configurar um Quadro de Líderes](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard)

| Componente                | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Referência Iniciada       | <p>Este tipo de quadro de líderes classifica os participantes pelo número de referências que iniciaram. As pontuações dos seus defensores de clientes corresponderão ao número de referências iniciadas.</p><p><img src="https://526234278-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>                                                                                                                                                          |
| Referência Convertida     | <p>Este tipo de quadro de líderes classifica os participantes pelo número de referências que converteram. Referências são consideradas convertidas quando o amigo referido atinge um objetivo do programa, como fazer uma compra de um valor que você definiu. As pontuações dos seus defensores de clientes corresponderão ao número de referências convertidas.</p><p><img src="https://526234278-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> |
| Pontos Ganhos             | <p>Este tipo de quadro de líderes classifica os participantes pelo número total de Pontos que ganharam em programas Advocate que recompensam Pontos. Todas as unidades de recompensa em Pontos contam, desde que não estejam pendentes ou canceladas. Este tipo de quadro de líderes é válido apenas para o tipo de recompensa Pontos.</p><p><img src="https://526234278-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>                            |
| Quadro de Líderes Anônimo | <p>Uma versão completamente anonimizada do quadro de líderes que não exibe qualquer informação pessoal identificável sobre outros participantes do programa. Pode exibir qualquer tipo de quadro de líderes.</p><p><img src="https://526234278-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>Imposto e Dinheiro</summary>

*Imposto e dinheiro* componentes permitem incorporar coleta de formulários fiscais e opções de pagamento em dinheiro no seu [widget com acesso verificado](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained) ou [microsite](https://help.impact.com/brand/pt-br/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview).

Este grupo de componentes está disponível apenas se o [*pagamentos em dinheiro*](https://help.impact.com/brand/pt-br/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained) recurso tiver sido ativado para sua conta.

| Componente                                                  | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alerta de Status de Pagamento                               | <p>Alerta o participante sobre ações que ele precisa tomar antes de poder receber um pagamento em dinheiro. O componente inclui um botão de chamada para ação que leva o participante a revisar suas configurações de pagamento.</p><p>Opcionalmente, personalize qualquer uma das descrições de texto que o participante verá ao visualizar o componente.</p><p><img src="https://526234278-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>       |
| Formulário de Pagamento em Dinheiro para Microsite & Widget | <p>Insira um formulário que colete as informações bancárias dos participantes e quaisquer formulários fiscais aplicáveis, como W-8 ou W-9.</p><p>Opcionalmente, personalize qualquer uma das descrições de texto que o participante verá ao visualizar o formulário.</p><p>Você também pode definir alertas e requisitos de verificação dentro deste componente.</p><p><img src="https://526234278-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>Compartilhamento</summary>

*Compartilhamento* componentes oferecem aos participantes maneiras convenientes de promover seus links e códigos de referência em múltiplos canais. Quando um participante clica em um botão de compartilhamento, ele abre o canal escolhido, como *Facebook*, *LinkedIn*, *WhatsApp*, ou *e-mail*, com uma mensagem ou link pré-preenchido, pronto para enviar.

Alguns componentes, como Código de Referência, exibem o código de referência ou promocional individual do participante junto com uma opção de copiar para a área de transferência para compartilhamento rápido. Outros, como Códigos Promocionais, apresentam múltiplos códigos disponíveis (se alocados) em uma visualização em slider, e incluem botões de compartilhamento para que os participantes possam postar ou enviar instantaneamente o código selecionado. Essas ferramentas facilitam que os participantes divulguem e gerem novas referências.

| Componente                                      | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Código de Referência                            | <p>Exiba um campo de código de referência com uma opção de copiar para a área de transferência. Usado como parte da funcionalidade de Códigos Promocionais.</p><p><img src="https://526234278-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 Promocionais                            | <p>Bloco de componente pré-formatado que inclui campo de código promocional de referência com slider para alternar entre vários códigos se mais de um tiver sido alocado. Também inclui um link de compartilhamento e componentes de botão de compartilhamento para Facebook, LinkedIn e Twitter / X.</p><p><img src="https://526234278-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ão de Compartilhar no Facebook               | <p>Exiba um botão Compartilhar no Facebook com texto personalizável. Quando clicado, o botão redirecionará para uma nova publicação no perfil do usuário no Facebook com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar no X                      | <p>Exiba um botão Compartilhar via X com texto personalizável. Quando clicado, o botão redirecionará para uma nova publicação na conta X do usuário com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar por E-mail                | <p>Exiba um botão Compartilhar por E-mail com texto personalizável. Quando clicado, o botão abrirá o aplicativo de e-mail padrão do usuário e iniciará um novo e-mail com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar (Menu do Navegador Móvel) | <p>Exiba um botão para compartilhar dentro do navegador web do participante. Quando clicado, o botão abrirá um menu listando todos os aplicativos disponíveis que o usuário pode abrir para compartilhar seu link. Quando um aplicativo for selecionado, uma nova publicação ou mensagem será criada com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar no LinkedIn               | <p>Exiba um botão Compartilhar no LinkedIn com texto personalizável. Quando clicado, o botão redirecionará para uma nova publicação no perfil do usuário no LinkedIn com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar por SMS                   | <p>Exiba um botão Enviar mensagem a um amigo com texto personalizável. Quando clicado, o botão redirecionará para o aplicativo de SMS/mensagens padrão do usuário, e uma nova mensagem SMS será criada com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar no Messenger              | <p>Exiba um botão Compartilhar via Messenger com texto personalizável. Quando clicado, o botão redirecionará para uma nova mensagem no aplicativo Facebook Messenger do usuário com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar no WhatsApp               | <p>Exiba um botão Compartilhar via WhatsApp com texto personalizável. Quando clicado, o botão redirecionará para uma nova mensagem na conta WhatsApp do usuário com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar no LINE                   | <p>Exiba um botão Compartilhar via Line Messenger com texto personalizável. Quando clicado, o botão redirecionará para uma nova mensagem no aplicativo Line Messenger do usuário com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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ão de Compartilhar no Pinterest              | <p>Exiba um botão Compartilhar no Pinterest com texto personalizável. Quando clicado, o botão redirecionará para uma nova publicação no perfil do usuário no Pinterest com a Mensagem Social da marca pré-carregada.</p><p><img src="https://526234278-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>                                                                                                                               |
| Link de Compartilhamento                        | <p>Exiba o link de compartilhamento do participante para este programa.</p><p><img src="https://526234278-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>Exiba o link de compartilhamento do participante na forma de um código QR para este programa.</p><p><img src="https://526234278-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>Referências</summary>

*Referência* componentes exibem informações sobre os amigos referidos pelo participante e seu status de conversão. Eles facilitam para os participantes rastrear quem eles referiram, quando ocorreram as conversões e quaisquer recompensas ganhas dessas referências.

| Componente                                     | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Cartão de Referência                           | <p>Bloco de componente pré-formatado que inclui <em>linha do tempo do programa</em>, <em>link de compartilhamento</em>, e <em>Facebook</em>, <em>LinkedIn,</em> e <em>Twitter / X</em> componentes de botão de compartilhamento. Pode adicionar ou remover outros componentes conforme necessário.</p><p><img src="https://526234278-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> |
| Tabela de Referências                          | <p>Exiba uma tabela mostrando os amigos referidos pelo participante, a data de conversão e o status de conversão.</p><p><img src="https://526234278-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>                                                                                                                                                                                  |
| Coluna de Data da Tabela de Referências        | <p>Adicione outra coluna de data à tabela de referências. Deve ser colocada dentro do componente Tabela de Referências.</p><p><img src="https://526234278-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>                                                                                                                                                                            |
| Coluna de Recompensas da Tabela de Referências | <p>Adicione outra coluna de recompensas à tabela de referências. Deve ser colocada dentro do componente Tabela de Referências.</p><p><img src="https://526234278-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>                                                                                                                                                                     |
| Coluna de Status da Tabela de Referências      | <p>Adicione outra coluna de status à tabela de referências. Deve ser colocada dentro do componente Tabela de Referências.</p><p><img src="https://526234278-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>                                                                                                                                                                          |
| Coluna de Usuário da Tabela de Referências     | <p>Adicione outra coluna de cliente (amigo referido) à tabela de referências. Deve ser colocada dentro do componente Tabela de Referências.</p><p><img src="https://526234278-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>Avançado</summary>

Componentes avançados dão mais controle sobre o que os participantes veem e quando veem. Eles permitem exibição condicional de conteúdo, substituições de programa e outras configurações especializadas que ajudam a adaptar a experiência para públicos específicos.

| Componente                  | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Área Condicional / Segmento | <p>Exiba conteúdo nesta seção somente quando o participante pertencer a um certo <a href="../manage-advocate-participants/manage-advocate-user-segments">segmento de usuário</a>.</p><p>Para definir o segmento de usuário, abra as propriedades do componente e edite a expressão JSONata no <em>Condição</em> campo.</p><p>Usuários dentro do segmento definido verão todo o conteúdo exibido na seção condicional, enquanto usuários fora do segmento não verão o conteúdo.</p><p><img src="https://526234278-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>Exiba conteúdo nesta seção somente quando um <a href="../manage-advocate-participants/custom-and-calculated-fields/custom-fields-for-advocate-explained">campo personalizado</a> no perfil do participante contiver um certo valor.</p><p>Para definir o nome e o valor do campo personalizado, abra as propriedades do componente e edite a expressão JSONata no <em>Condição</em> campo.</p><p>Usuários com o valor correto do campo personalizado verão todo o conteúdo exibido na seção condicional, enquanto usuários sem o valor correto do campo personalizado não verão o conteúdo.</p><p><img src="https://526234278-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> |
| Seção do Programa           | <p>O componente de seção do programa permite que você substitua o ID do programa de seus componentes filhos. Use-o quando quiser exibir conteúdo que não esteja vinculado a um programa específico. Incluído por padrão na maioria dos templates de widget e microsite.</p><p><img src="https://526234278-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>Tipografia</summary>

Componentes de tipografia permitem adicionar blocos de texto formatado ao seu widget ou microsite. Selecione entre:

* Parágrafo
* Cabeçalho 1
* Cabeçalho 2
* Cabeçalho 3
* Cabeçalho 4

  <div data-with-frame="true"><figure><img src="https://526234278-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>
