# Widget pós-checkout do Shopify

Indicações frequentemente vêm de páginas pós-compra com alto volume de tráfego, tornando esses locais ideais para promover seu programa de indicações. O Widget Pós-Checkout da Shopify permite engajar clientes logo após a compra, impulsionando indicações. Ao aproveitar a estrutura de extensibilidade da Shopify, este widget oferece uma experiência fluida e com a identidade da sua marca que maximiza o impacto do programa.

Se seu programa não estiver presente aqui, você pode estar perdendo engajamento valioso e ficando para trás em relação a concorrentes que já utilizam esses locais.

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

Nosso Widget Pós-Checkout utiliza **Extensibilidade do Checkout da Shopify** para colocar uma chamada para ação (CTA) de indicação com a identidade da marca em páginas 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 popup

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 da indicação

#### Recursos principais

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

O widget suporta opções de exibição tanto incorporadas quanto em popup, 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ções para criar ou atualizar perfis de participantes e obter os dados necessários de indicação, como o link de compartilhamento, código de indicação e opções de compartilhamento social. Podem ser exibidos 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 central. Você pode ajustar o conteúdo para cada etapa, incluindo cabeçalhos, subcabeçalhos, botões 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 da marca. Importante: todas essas configurações podem ser definidas dentro do Editor de Páginas da Shopify, tornando fácil ajustar sem sair do admin da Shopify.

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

#### Adicione o Widget ao Seu Site

Para adicionar o widget do Advocate à sua loja Shopify:

1. Navegue até o seu *editor de tema*.
2. Selecione o **navegador de páginas** no topo da tela, então escolha **Checkout e contas de cliente**.
3. Repita a etapa acima para a *página de agradecimento* .
4. Na seção principal, selecione **Adicionar bloco**, então escolha **Widget de Indicação Advocate** na seção de integração do 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 nome e e-mail, a menos que ele já esteja logado na Shopify, caso em que esta etapa é automaticamente pulada. Uma vez capturadas as informações do usuário, ele é adicionado ao seu programa como um novo participante ou seus dados são atualizados se já estiver no programa.

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

{% step %}

### **Etapa 2:**

Ao cliente são exibidos os detalhes da indicação. Isso inclui um link de indicação único 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 mensagem curta 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                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Compartilhado entre estados do widget     | <p>• URL da imagem (opcional)</p><p>• Cabeçalho (obrigatório)</p><p>• Subcabeçalho (opcional)</p><p>• Link de termos e condições (opcional)</p>                                                                                                                                                                                                                                                          |
| Opções específicas do popup               | • Rótulo do botão 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 de 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.
