# Widget de Pós-Checkout do Shopify

Os encaminhamentos frequentemente vêm de páginas de pós-compra com alto tráfego, tornando esses locais ideais para promover seu programa de indicação. O widget de pós-checkout da Shopify permite que você engaje clientes de forma fluida logo após a compra, aumentando os encaminhamentos. Ao aproveitar a estrutura de extensibilidade da Shopify, esse widget oferece uma experiência contínua e com a sua marca, maximizando o impacto do programa.

Se o seu programa não estiver presente aqui, você pode estar perdendo interações valiosas e ficando para trás em relação a concorrentes que já aproveitam esses locais.

#### O que é o widget de pós-checkout da Shopify?

Nosso widget de pós-checkout aproveita **a extensibilidade do Shopify Checkout** para inserir uma chamada para ação de indicação com a sua marca (CTA) nas páginas de pós-checkout. Ele espelha o popular [Widget de Acesso Instantâneo](/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget.md) e oferece suporte a:

* Exibição incorporada
* Exibição em modal pop-up

Ambas as versões apresentam dois estados principais do widget:

* Captura de e-mail / Identificação do usuário
* Página de compartilhamento com detalhes do encaminhamento

#### Principais recursos

O widget de pós-checkout da Shopify foi projetado para maximizar o engajamento com indicações. Ele apresenta um fluxo de duas etapas: primeiro, o widget identifica o usuário coletando o e-mail dele (se ele ainda não estiver logado), e então exibe o link ou código de indicação personalizado, junto com botões de compartilhamento. Para usuários da Shopify logados, a etapa de e-mail é totalmente ignorada, proporcionando uma experiência mais fluida.

O widget oferece suporte a opções de exibição incorporada e em pop-up, para que você possa escolher o formato que melhor se adapta ao layout da sua loja e à experiência do cliente. Ele se conecta perfeitamente ao seu programa de indicação para criar ou atualizar perfis de participantes e buscar os dados necessários de encaminhamento, como o link de compartilhamento, o código de indicação e as opções de compartilhamento social. É possível exibir até 3 botões de compartilhamento, com suporte para plataformas como E-mail, Facebook, WhatsApp, Messenger, LinkedIn, X (antigo Twitter) e SMS.

A personalização é um recurso essencial. Você pode adaptar o conteúdo de cada etapa, incluindo títulos, subtítulos, botões de CTA e mensagens de compartilhamento. Você também tem a opção de incluir uma imagem no topo do widget para reforçar a identidade visual. Importante: todas essas configurações podem ser feitas no Editor de Páginas da Shopify, facilitando os ajustes sem sair do admin da Shopify.

Por fim, o widget foi projetado para herdar a identidade visual do seu site, então não há necessidade de configurar manualmente cores ou fontes. Isso garante uma aparência consistente com o restante da sua loja.

#### Adicione o Widget ao Seu Site

Para adicionar o widget da Advocate à sua loja Shopify:

1. Navegue até o seu *editor de tema*.
2. Selecione a **navegador de páginas** na parte superior da tela e, em seguida, escolha **Checkout and customer accounts**.
3. Repita o passo acima para a seção *Thank you* .
4. Na seção principal, selecione **Adicionar bloco**e, em seguida, escolha **Advocate Referral Widget** na seção de integração da Impact.com.

#### Fluxo do widget

A experiência do widget foi projetada para guiar os usuários por duas etapas simples.

{% stepper %}
{% step %}

#### **Etapa 1:**

O widget solicita que seu cliente insira o nome e o endereço de e-mail, a menos que ele já esteja logado na Shopify, caso em que essa etapa é pulada automaticamente. Assim que as informações do usuário são capturadas, ele é adicionado ao seu programa como um novo participante ou seus dados são atualizados, caso já faça parte do programa.

<div data-with-frame="true"><figure><img src="/files/154229d9410a6f188a79ccefa2549459500900a7" alt="" width="484"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### **Etapa 2:**

O cliente visualiza os detalhes da sua indicação. Isso inclui um link de indicação exclusivo ou um código de indicação, dependendo de como o programa está configurado. O widget também exibe até 3 botões de compartilhamento, e você também pode incluir uma breve mensagem acima das informações de indicação para incentivar o compartilhamento e reforçar os benefícios do programa.

<div data-with-frame="true"><figure><img src="/files/dfb40fc4ea441dfb71993b0e44c265336a3e6c31" alt="" width="492"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

**Opções de personalização**

Todo o conteúdo visual pode ser configurado para refletir a voz da sua marca. Essas personalizações estarão disponíveis diretamente no **Editor de Páginas da Shopify** para facilitar o uso.

| Personalização                            | Seções editáveis                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Compartilhadas entre os estados do widget | <p>• URL da imagem (opcional)</p><p>• Cabeçalho (obrigatório)</p><p>• Subcabeçalho (opcional)</p><p>• Link dos termos e condições (opcional)</p>                                                                                                                                                                                                                                                             |
| Opções específicas do pop-up              | • Rótulo do botão de CTA (por exemplo, “Começar”)                                                                                                                                                                                                                                                                                                                                                            |
| Opções de coleta de e-mail                | <p>• CTA do botão "Começar a indicar"</p><p>• Campo de nome (opcional)</p>                                                                                                                                                                                                                                                                                                                                   |
| Opções de informações de compartilhamento | <p>• Texto personalizado acima do link</p><p>• Selecione até 3 meios para o botão de compartilhamento:</p><p>• E-mail</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Link direto</p><p>• E-mail</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Link direto</p> |


---

# Agent Instructions: Querying This Documentation

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

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

```
GET https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/widget-experiences/shopify-post-checkout-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
