> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widgets de pós-compra

> Este documento apresenta os widgets de pós-compra disponíveis no Aftersell e como eles são usados para criar experiências de upsell pós-compra. Os widgets são agrupados por escopo e função, com cada widget documentado uma única vez para evitar duplicação.

***

<div id="funnel-wide-widgets">
  # Widgets de todo o funil
</div>

<div id="progress-bar">
  ## Barra de progresso
</div>

A **Barra de progresso** mostra aos clientes em que ponto do fluxo de pós-compra eles estão.

Quando ativada, a barra de progresso aparece em todas as ofertas de upsell dentro do funil. Qualquer alteração feita na barra de progresso se aplica a todo o funil.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-progress-bar.gif?s=f9ee14053add6280b48524aca197a791" alt="Barra de progresso pós-compra com as etapas Carrinho, Pedido realizado, Oferta especial e Concluído" width="2936" height="480" data-path="images/aftersell/ppu-widgets-post-purchase-progress-bar.gif" />

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

* Ative ou desative a barra de progresso para o funil
* Escolha um estilo de exibição:
  * **Minimal**
  * **Minimal with labels**
  * **Maximal**
* Selecione a aparência **Black** ou **White**
* Ajuste o espaçamento superior e inferior para controlar o espaçamento

***

<div id="offer-level-widgets">
  # Widgets no nível da oferta
</div>

Os widgets no nível da oferta controlam o conteúdo e o comportamento de uma oferta de upsell individual.

Esses widgets definem o que o cliente vê em uma etapa específica de upsell, incluindo mensagens, urgência, informações do produto, detalhes de preço e ações.

Cada oferta em um funil pode ser personalizada de forma independente usando widgets no nível da oferta, permitindo que você adapte a experiência em cada etapa.

Esses widgets incluem:\
[Texto](#text)\
[Timer](#timer)\
[Produto de upsell](#upsell-product)\
[Seleção de produto](#product-selection)\
[Desconto](#discount)\
[Selo](#badge)\
[Frete](#shipping)\
[Imagem](#image)\
[Botões](#buttons)\
[Detalhamento de preço](#price-breakdown)\
[Detalhes do produto](#product-details)\
[Opções de variante e plano](#variant--plan-options)\
[Layout](#layout)\
[Vídeo](#video)\
[Depoimentos](#testimonials)

***

<div id="text">
  ## Texto
</div>

O widget de **Texto** é usado para títulos e textos de apoio em toda a oferta.

Ele suporta um título e um texto de corpo opcional, com controles de tamanho de fonte, cor, peso, alinhamento, tachado e espaçamento.

Use a variável dinâmica `{first-name}` para personalizar a mensagem para cada cliente.

***

<div id="timer">
  ## Timer
</div>

O widget de **Timer** adiciona urgência exibindo uma contagem regressiva ao vivo.

Enquanto o timer estiver rodando, a oferta permanece visível. Quando o timer chega a zero, a oferta de upsell desaparece automaticamente e o cliente avança no funil.

***

<div id="upsell-product">
  ## Produto de upsell
</div>

O widget de **Produto de upsell** é o coração da oferta. Ele define qual produto está sendo exibido e atua como o contêiner de todos os widgets relacionados ao produto abaixo.

Tudo o que vem a seguir é configurado dentro deste widget.

***

<div id="product-selection">
  ## Seleção de produto
</div>

O widget de Seleção de produto controla qual produto é exibido em uma oferta de upsell.

Você pode selecionar um produto fixo ou determinar dinamicamente o produto de upsell com base no pedido original do cliente, permitindo experiências de upsell tanto estáticas quanto adaptativas.

<div id="product-type-options">
  #### Opções de tipo de produto
</div>

* **Produto específico**\
  Sempre exibe o mesmo produto no upsell.
* **Upsell automático**\
  Seleciona dinamicamente um produto usando lógica de upsell predefinida.
* **Mais caro do carrinho**\
  Usa o item de maior preço do pedido original do cliente.
* **Mais barato do carrinho**\
  Usa o item de menor preço do pedido original do cliente.

<div id="changing-the-product">
  #### Alterando o produto
</div>

O produto selecionado aparece no topo do widget. Para alterá-lo:

1. Clique em **Change product**
2. Selecione um tipo de produto
3. Escolha ou confirme o produto

Ao navegar pela aba **Products** no seletor, você pode marcar **Active products only** para ocultar produtos em rascunho e arquivados da lista. Esse filtro fica desativado por padrão e só se aplica à aba Products — as coleções não são afetadas.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-offer-editor-edit-product.gif?s=a281ef6837574437297ca063e861d119" alt="Editor de ofertas do Aftersell mostrando o painel Edit upsell product ao lado de uma prévia da oferta ao vivo" width="948" height="480" data-path="images/aftersell/ppu-widgets-offer-editor-edit-product.gif" />

<div id="identifying-products-with-identical-names">
  #### Identificando produtos com nomes idênticos
</div>

Se sua loja tiver vários produtos ou variantes com o mesmo título, ative a opção **Show IDs** no seletor de produtos para exibir o ID numérico do produto Shopify e o ID da variante abaixo de cada nome. Isso facilita confirmar que você está selecionando o produto correto.

A opção **Show IDs** está disponível na aba **Product** do seletor e fica desativada por padrão. Ela não está disponível na aba Collection.

***

<div id="discount">
  ## Desconto
</div>

O widget de **Desconto** aplica e exibe preços promocionais.

Você pode escolher entre um desconto percentual (%) ou um desconto de valor fixo (\$). Um texto de desconto personalizado pode ser adicionado, se desejado, e o desconto pode fazer referência ao preço comparativo do produto ou ignorá-lo.

<div id="bulk-discount-shortcut-for-multi-product-offers">
  ### Atalho de desconto em massa para ofertas com vários produtos
</div>

Para ofertas com vários produtos e de coleção, uma seção de **Discount** aparece diretamente nas configurações do widget Upsell Products — abaixo da área de seleção de produtos. Isso oferece uma maneira mais rápida de definir ou atualizar descontos em vários produtos sem abrir as configurações individuais de cada produto.

A seção fica recolhida por padrão. Quando você a expande:

* Uma lista de todos os produtos da oferta é exibida, cada um com uma caixa de seleção e um selo mostrando seu desconto atual (por exemplo, `17% off` ou `$18.00 off`).
* Selecione os produtos que deseja atualizar usando as caixas de seleção. Todos os produtos são selecionados por padrão.
* Um indicador abaixo da lista mostra a quantos produtos suas alterações serão aplicadas.
* Use os campos de tipo e valor de desconto para definir o desconto. As alterações se aplicam apenas aos produtos selecionados — os produtos não selecionados mantêm seus descontos existentes.

<div id="mixed-discounts-across-products">
  #### Descontos mistos entre produtos
</div>

Quando os produtos selecionados têm configurações de desconto diferentes, os campos mostram um texto de espaço reservado para indicar a variação:

* Se os produtos tiverem **tipos de desconto** diferentes (por exemplo, alguns são % off e outros são \$ off), o seletor de tipo mostra **Mixed**.
* Se os produtos tiverem **valores de desconto** ou tipos diferentes, o campo de valor mostra **Multiple values** com uma observação de que inserir um novo valor substituirá o desconto atual de cada produto selecionado.

<div id="info-icon-on-product-rows">
  #### Ícone de informação nas linhas de produto
</div>

Um ícone de informação (i) aparece ao lado do selo de desconto de um produto quando esse produto tem configurações adicionais de desconto — como um título de desconto personalizado, um preço comparativo ou um desconto de assinatura. Passar o mouse sobre o ícone mostra um resumo desses extras.

***

<div id="badge">
  ## Selo
</div>

O widget de **Selo** destaca atributos-chave do produto, como popularidade ou urgência.

Você pode selecionar um rótulo de selo predefinido, escolher entre vários estilos visuais, incluir um ícone e controlar onde o selo aparece na oferta ou diretamente na imagem do produto.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-offer-trending.png?fit=max&auto=format&n=SnVX3h-PpMMxQMDU&q=85&s=c7c4cf7649723721d24bffff865b6f2b" alt="Oferta pós-compra mostrando um selo Trending acima do título do produto" width="1920" height="898" data-path="images/aftersell/ppu-widgets-post-purchase-offer-trending.png" />

Imagens de selo personalizadas podem ser enviadas em **Advanced badge settings** (SVG ou PNG, até 10MB).

<Note>
  A edição de selos está disponível apenas em ofertas V2. Ofertas V1 preservam quaisquer selos configurados anteriormente, mas as configurações de selo não podem ser editadas em ofertas V1.
</Note>

***

<div id="shipping">
  ## Frete
</div>

O widget de **Frete** controla como os custos de frete são comunicados.

Você pode oferecer frete grátis ou cobrar pelo frete definindo um preço de frete específico.

***

<div id="image">
  ## Imagem
</div>

O widget de **Imagem** controla como as imagens do produto são exibidas.

Ele inclui opções para ajustar o tamanho da imagem principal, adicionar uma borda, ativar um carrossel de imagens e enviar uma imagem de produto personalizada em **Advanced image settings**.

***

<div id="language">
  ## Idioma
</div>

A seção de **Idioma** controla qual idioma é usado para todos os textos do sistema na oferta, incluindo texto de botões, rótulos de assinatura, rótulos de preços e outras strings não editáveis.

Selecione um idioma no menu suspenso **Language** para traduzir automaticamente os textos do sistema para aquela oferta. O Aftersell suporta 32 idiomas.

Essa configuração não afeta selos nem campos de texto personalizados — apenas o texto gerado pelo sistema é traduzido.

***

<div id="buttons">
  ## Botões
</div>

O **widget de Botões** controla como os clientes aceitam ou recusam um upsell durante o checkout.

Você pode personalizar como os botões se comportam e aparecem, incluindo:

* Selecionar o **texto padrão do botão de aceitar**
* Exigir um **clique de confirmação** antes de um upsell ser aceito
* Alterar o **estilo do botão de recusar** (por exemplo, botão ou link)
* Ajustar o **alinhamento dos botões** e a largura
* Adicionar **texto de apoio** opcional acima ou abaixo dos botões, com controles de estilo e suporte a variáveis dinâmicas

<div id="button-text">
  ### Texto do botão
</div>

Você pode configurar o texto do botão de aceitar para suas ofertas pós-compra usando o menu suspenso **Default accept button text**. As opções disponíveis dependem do tipo de oferta:

**Ofertas padrão:**

* **Pay Now** - Exibe "Pay Now • \[preço total do produto]" (ou "Add Now • Free" para produtos gratuitos)
* **Accept Offer** - Exibe "Accept Offer" independentemente do preço

**Ofertas de Upgrade de assinatura:**

* **Upgrade Subscription** - Exibe "Upgrade Subscription" (padrão para novas ofertas de Upgrade de assinatura)
* **Accept Offer** - Exibe "Accept Offer" independentemente do preço
* **Pay Now** - Exibe "Pay Now • \[preço total do produto]" (ou "Add Now • Free" para produtos gratuitos)

Para traduzir o texto dos botões, use a seção **Language** acima da seção Buttons.

<div id="button-layout-options">
  ### Opções de layout dos botões
</div>

Você também pode controlar a **posição dos botões de aceitar e recusar** em relação um ao outro. Os seguintes layouts são suportados:

* **Aceitar acima de recusar** - Exibe o botão de aceitar acima da opção de recusar
* **Recusar acima de aceitar** - Exibe a opção de recusar acima do botão de aceitar
* **Aceitar ao lado de recusar** - Exibe os botões de aceitar e recusar lado a lado

Essas opções de layout oferecem mais flexibilidade para corresponder à experiência de checkout e à hierarquia de mensagens desejadas.

***

<div id="price-breakdown">
  ## Detalhamento de preço
</div>

O widget de **Detalhamento de preço** adiciona clareza aos preços.

Ele pode exibir frete e impostos, incluir detalhes extras como subtotal e descontos, e ser alinhado ou posicionado próximo aos botões de pagamento para máxima clareza.

<div id="hide-shipping-adjustment-line">
  ### Ocultar linha de ajuste de frete
</div>

Quando sua oferta está configurada como um upsell de substituição (usando a configuração "Replace item in original order with upsell"), o detalhamento de preço inclui uma linha de **Ajuste de frete** que reflete qualquer diferença de custo de frete entre o produto original e o de substituição.

Você pode suprimir essa linha usando a caixa de seleção **Hide shipping adjustment line**, que aparece na seção Price Breakdown apenas quando um upsell de substituição está configurado. Essa configuração fica desativada por padrão, então as ofertas existentes não são afetadas.

* Quando marcada, a linha de ajuste de frete fica oculta no detalhamento de preço do cliente.
* Quando desmarcada, a linha de ajuste de frete é exibida normalmente.

Essa configuração afeta apenas a linha de ajuste de frete em ofertas de upsell de substituição. A linha de frete padrão em ofertas que não são de substituição não é afetada.

***

<div id="product-details">
  ## Detalhes do produto
</div>

O widget de **Detalhes do produto** controla como as informações-chave do produto são apresentadas.

Ele suporta avaliações de produto (ocultadas automaticamente se não houver avaliações), um seletor de quantidade opcional e a capacidade de pular a oferta se o produto já existir no pedido original.

Os títulos e preços dos produtos são totalmente estilizáveis e suportam algumas variáveis dinâmicas, incluindo `{product}`, `{original-price}`, `{current-price}`, `{savings}` e `{savings-line}`.

Uma descrição de oferta opcional pode ser adicionada para reforçar valor ou urgência.

<div id="product-review-star-colors">
  ### Cores das estrelas de avaliação do produto
</div>

Quando **Show product reviews rating** está ativado, você pode personalizar as cores da exibição de classificação por estrelas:

* **Star color** — a cor das estrelas preenchidas (ativas). O padrão é `#fdcc0d` (amarelo).
* **Empty star color** — a cor das estrelas não preenchidas (inativas). O padrão é `#d1d5db` (cinza claro).

Para alterar as cores, abra as configurações do widget **Product Details**, ative **Show product reviews rating** e use os campos de cor para definir os valores hexadecimais de sua preferência.

<div id="quantity-selector-presets">
  ### Predefinições do seletor de quantidade
</div>

Quando o seletor de quantidade está ativado, você pode configurar uma **quantidade predefinida** para controlar quantas unidades são exibidas ou permitidas quando a oferta é mostrada. As seguintes opções de predefinição estão disponíveis:

* **Fixo** — Define uma quantidade específica com a qual o cliente começa. O seletor de quantidade fica oculto e o cliente não pode alterar a quantidade.
* **Porcentagem da quantidade comprada** — Define a quantidade como uma porcentagem do número de unidades que o cliente comprou originalmente.
* **Quantidade mínima** — Define um piso para a quantidade. O cliente começa nesse valor e pode aumentar a partir dele.
* **Quantidade máxima** — Define um teto para a quantidade. O cliente começa em 1 e não pode aumentar além do máximo configurado (até 20). Uma mensagem é exibida ao cliente indicando a quantidade máxima do item.

<div id="description-position">
  ### Posição da descrição
</div>

Para ofertas de produto único, você pode controlar onde a descrição do produto aparece em relação aos botões de CTA:

* **Padrão (acima dos botões)** - A descrição aparece acima dos botões de aceitar e recusar
* **Abaixo dos botões** - A descrição aparece abaixo dos botões de aceitar e recusar

Essa configuração permite ajustar o layout para corresponder melhor à sua hierarquia de mensagens e preferências de design.

***

<div id="variant--plan-options">
  ## Opções de variante e plano
</div>

O widget de **Opções de variante e plano** controla a visibilidade de variantes, a seleção e o bloqueio de plano de assinatura.

Você pode mostrar ou ocultar variantes fora de estoque, ocultar o produto inteiro se todas as variantes estiverem indisponíveis e controlar se opções de variante com uma única escolha são exibidas. **Configurações avançadas permitem ocultar o seletor de variantes por completo**.

As opções de pré-seleção de variante incluem correspondência inteligente com a compra inicial, Não selecionada, exigindo a seleção do usuário, ou Primeira variante disponível.

Para produtos com várias opções de variante, todas as opções são exibidas e uma variante em estoque é pré-selecionada quando disponível; opções fora de estoque são exibidas como indisponíveis. Para produtos com uma única opção de variante, as opções fora de estoque ficam ocultas.

<div id="subscription-plan-locking">
  ### Bloqueio de plano de assinatura
</div>

Ao oferecer produtos por assinatura com vários planos de assinatura, você pode bloquear a oferta em um plano específico. Isso impede que os clientes alterem o plano de assinatura durante a experiência pós-compra, garantindo que eles recebam exatamente a opção de assinatura que você configurou.

**Para bloquear um plano de assinatura:**

1. Na seção **Variant & Plan Options**, localize o menu suspenso **Lock subscription plan**
2. Selecione um plano específico no menu
3. O plano agora está bloqueado — os clientes verão o nome do plano como texto estático em vez de um menu suspenso alterável

<Frame>
  <img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-variant-plan-options.gif?s=8851a3d937b3f732660588f555e8743b" alt="Painel Variant and Plan Options com o menu suspenso Lock subscription plan" width="848" height="1080" data-path="images/aftersell/ppu-widgets-variant-plan-options.gif" />
</Frame>

**Quando um plano está bloqueado:**

* Os clientes veem o nome do plano exibido como texto
* O menu suspenso de seleção de plano fica oculto
* Os clientes não podem alterar o plano de assinatura
* Se o plano bloqueado não estiver mais disponível no Shopify, a oferta recorre de forma elegante à exibição de todos os planos disponíveis

**Redefinição automática:**

A configuração de plano bloqueado é redefinida automaticamente se você alterar a opção de compra do produto para apenas compra única (removendo a opção de assinatura).

<div id="variant-selector-position">
  ### Posição do seletor de variantes
</div>

Você pode controlar onde o seletor de variantes aparece em relação aos botões de CTA:

* **Acima dos botões de CTA (padrão)** - O seletor de variantes aparece acima dos botões de aceitar e recusar
* **Abaixo dos botões de CTA** - O seletor de variantes aparece abaixo dos botões de aceitar e recusar

Quando tanto o seletor de variantes quanto a descrição do produto estão posicionados abaixo dos botões de CTA, você pode controlar a ordem deles:

* **Seletor de variantes primeiro** - O seletor de variantes aparece antes da descrição do produto
* **Descrição primeiro** - A descrição do produto aparece antes do seletor de variantes

Você também pode ajustar o espaçamento superior e inferior do seletor de variantes para refinar o espaçamento e criar o layout visual desejado.

***

<div id="layout">
  ## Layout
</div>

O widget de **Layout** controla a estrutura geral e o espaçamento do upsell.

Você pode escolher entre um layout de uma ou duas colunas, ajustar a largura máxima do layout e refinar o espaçamento superior e inferior para criar uma experiência limpa e legível.

***

<div id="video">
  ## Vídeo
</div>

O widget de **Vídeo** adiciona uma miniatura clicável a uma oferta que abre um player de vídeo hospedado em uma nova aba, com um fundo estilizado e um botão para retornar ao upsell. O vídeo é reproduzido em uma nova aba, e não inline, para que a oferta de upsell permaneça aberta na aba original.

O widget também suporta uma **cor de fundo** para combinar com sua marca ou focar a atenção no player, e **configurações de layout** para alinhamento (esquerda, centro, direita) e espaçamento superior e inferior.

Para pré-visualizar a experiência do cliente, clique na miniatura na **prévia da oferta** no editor. O player de vídeo hospedado abre em uma nova aba exatamente como aparecerá na loja, para que você possa confirmar a miniatura, o CTA e os comportamentos de fechamento antes de publicar.

<div id="browser-compatibility">
  ### Compatibilidade de navegadores
</div>

O widget de vídeo abre o player em uma nova aba. No desktop, isso sempre funciona, então o widget sempre é exibido.

No mobile, funciona ao contrário: o Aftersell exibe o widget apenas em navegadores que ele reconhece como capazes de abrir uma nova aba sem tirar o cliente do checkout. Isso inclui navegadores móveis nativos — Safari, Chrome, Firefox e outros bem conhecidos — junto com os navegadores integrados do Facebook e do Instagram.

**Todos os outros navegadores móveis ocultam o widget.** Isso inclui navegadores integrados como o do app do Google, TikTok e Pinterest, webviews genéricos e qualquer coisa que o Aftersell não reconheça. Como os navegadores não reconhecidos são ocultados em vez de exibidos, o conjunto de ambientes em que o widget não aparecerá não é uma lista fixa — um navegador que o Aftersell nunca viu antes também o oculta.

Onde o widget está oculto, você pode enviar uma **imagem de fallback** para exibir em seu lugar — uma imagem promocional estática ou um gráfico da marca, por exemplo. Ela é exibida sem link ou botão de play. Se nenhuma imagem de fallback for definida, nada é renderizado no lugar do widget.

<Tip>
  Defina uma **imagem de fallback** em qualquer widget de vídeo que você publicar. Como qualquer coisa não reconhecida é ocultada, suas fontes de tráfego sozinhas não dirão se alguns clientes estão deixando de ver o widget — e sem um fallback, esses clientes não veem nada.
</Tip>

<div id="video-source">
  ### Origem do vídeo
</div>

O widget reproduz um único vídeo de uma de duas origens. Use o botão **Upload** / **Link** nas configurações do widget para escolher qual origem o player usa:

* **Upload** — arraste e solte ou selecione um arquivo MP4, WebM ou MOV (até 50 MB) para hospedá-lo diretamente nos seus Shopify Files. Após o upload, o Shopify processa o arquivo e uma prévia aparece no editor.
* **Link** — cole uma URL do YouTube, uma URL do Vimeo ou um link direto para um arquivo de vídeo hospedado (por exemplo, um MP4 no seu próprio CDN).

Você pode preencher os dois, mas apenas a origem selecionada no botão é reproduzida — a outra fica guardada atrás da sua aba e **não** é usada como fallback automático. Se apenas uma origem estiver definida, essa origem é reproduzida independentemente do botão.

Você deve definir pelo menos uma origem — um vídeo enviado ou um link de vídeo — antes de poder salvar o widget.

<div id="supported-link-formats">
  #### Formatos de link suportados
</div>

O campo de link aceita o seguinte:

* **YouTube** — use a URL padrão do vídeo (por exemplo, `https://youtu.be/VIDEO_ID` ou `https://www.youtube.com/watch?v=VIDEO_ID`). URLs de YouTube Shorts (`youtube.com/shorts/...`) não são suportadas — abra o vídeo no YouTube e use o link de compartilhamento.
* **Vimeo** — use a URL padrão do vídeo (por exemplo, `https://vimeo.com/VIDEO_ID`). URLs de showcase e páginas de canal ou perfil que não apontam para um vídeo específico não são suportadas — use a URL do vídeo individual da barra de endereço. Uma URL de canal ou grupo que inclua o ID numérico do vídeo funciona.
* **Arquivo direto** — uma URL HTTPS publicamente acessível apontando para um arquivo de vídeo (por exemplo, um MP4 no seu CDN).

<div id="link-validation">
  #### Validação de link
</div>

O editor valida seu link em dois momentos:

* **Quando você sai do campo** — se o formato da URL estiver reconhecidamente errado (por exemplo, um link de YouTube Shorts ou uma URL de showcase do Vimeo), um erro inline explica o que usar no lugar.
* **Quando você salva** — o editor verifica com o provedor de vídeo para confirmar que o vídeo é incorporável. Se o vídeo for privado, tiver sido excluído ou tiver a incorporação desativada, o salvamento é bloqueado e o motivo é exibido no campo de link. Corrija o link e salve novamente para continuar.

Se a verificação do provedor estiver indisponível (por exemplo, devido a um problema de rede), o salvamento prossegue sem bloqueio.

<div id="shopify-files-permission">
  #### Permissão do Shopify Files
</div>

Enviar um vídeo requer a permissão `write_files`. Se essa permissão não tiver sido concedida, um banner aparece na área de upload com um botão **Update**. Clique nele para conceder a permissão e habilitar uploads.

<div id="upload-processing">
  #### Processamento do upload
</div>

Depois que você solta ou seleciona um arquivo, o uploader mostra **Uploading…** enquanto o arquivo é transferido e, em seguida, **Processing…** enquanto o Shopify o transcodifica. Uma prévia aparece quando o processamento é concluído. Você pode continuar editando outras configurações do widget enquanto o vídeo é processado.

Você não pode salvar um widget cuja única origem seja um vídeo que ainda está sendo processado — o salvamento fica bloqueado até a transcodificação terminar, ou até você adicionar um link de vídeo para usar como origem enquanto isso. Se você descartar as alterações ou fechar o editor antes de salvar, quaisquer uploads em andamento são excluídos dos Shopify Files.

Os links de vídeo são validados quando você salva o widget.

<div id="thumbnail-and-watch-video-cta">
  ### Miniatura e CTA de assistir ao vídeo
</div>

Envie a imagem que os clientes verão na oferta antes de abrirem o vídeo. Um CTA de assistir ao vídeo é automaticamente colocado sobre a miniatura para chamar atenção para a ação de reprodução. Você pode estilizar o texto do rótulo do CTA para combinar com sua marca. As miniaturas não são geradas automaticamente a partir do vídeo — elas precisam ser enviadas.

Você também pode enviar uma **miniatura exclusiva para mobile**. Quando definida, a miniatura mobile é exibida em dispositivos móveis e a miniatura padrão é usada no desktop, para que você possa adaptar a imagem a cada tamanho de tela.

<div id="fallback-image">
  ### Imagem de fallback
</div>

A configuração de **imagem de fallback** permite enviar uma imagem para exibir quando o widget de vídeo está oculto porque o navegador do cliente não consegue abrir o player — veja [Compatibilidade de navegadores](#browser-compatibility). A imagem de fallback é exibida sem link ou sobreposição de play; é apenas uma imagem estática.

Se nenhuma imagem de fallback for enviada, nada é renderizado no lugar do widget.

<div id="autoplay">
  ### Reprodução automática
</div>

A opção **Autoplay** controla se o vídeo começa a ser reproduzido automaticamente quando o player hospedado é aberto.

Quando a reprodução automática está ativada, o vídeo começa **sem som**. A maioria dos navegadores modernos bloqueia a reprodução automática de vídeos com som até que o cliente interaja com a página, então reproduzir sem som é necessário para que a reprodução automática realmente funcione de forma confiável. Os clientes podem ativar o som do vídeo usando os controles do player depois que ele começar.

Se você preferir que o áudio toque desde o primeiro quadro, deixe a reprodução automática desativada e conte com o cliente para clicar manualmente em play no vídeo.

<div id="closing-the-video">
  ### Fechando o vídeo
</div>

Há três maneiras de um cliente fechar o player hospedado e retornar à oferta de upsell:

* **Botão de voltar à oferta** — um botão abaixo do player que fecha a aba e retorna ao upsell.
* **Clique duplo em qualquer lugar** — um clique duplo em qualquer lugar do fundo fecha o player.
* **Fechamento automático ao terminar** — quando o vídeo termina de tocar, o player fecha automaticamente.

Como o vídeo abre em uma nova aba, fechar o player fecha essa aba — o upsell permanece na aba original.

<div id="language-and-translations">
  ### Idioma e traduções
</div>

Os textos da página do player de vídeo — o rótulo do botão de voltar à oferta, as dicas para desktop e mobile, e o título e a mensagem exibidos quando o vídeo está indisponível — seguem a configuração de **Language** da oferta e podem ser personalizados em **Settings > Translations**.

***

<div id="testimonials">
  ## Depoimentos
</div>

O widget de **Depoimentos** exibe avaliações reais de produtos na sua oferta pós-compra para gerar confiança e reforçar a decisão do cliente de aceitar um upsell.

As avaliações são obtidas do seu app de avaliações conectado. O widget aparece no seletor do editor de ofertas como **"Testimonials"** com um ícone de estrela.

Para usar este widget, você precisa ter um app de avaliações conectado em **Settings > Product Reviews**. Os apps suportados incluem Judge.me, Klaviyo, Okendo e Yotpo. Veja [Integrações de apps de avaliação](/pt/aftersell/checkout_widget_types#review-app-integrations) para instruções de configuração.

<div id="selection-modes">
  ### Modos de seleção
</div>

O widget de Depoimentos suporta dois modos:

* **Manual** — Você seleciona um conjunto curado de avaliações para exibir. As avaliações são mostradas na ordem em que você as salvou.
* **Dinâmico** — As avaliações são obtidas automaticamente do cache sincronizado do seu app de avaliações com base nos produtos da oferta de upsell. As avaliações são vinculadas aos produtos da oferta, não ao pedido original do cliente.

<div id="configuration-options">
  ### Opções de configuração
</div>

* **Review app** — Selecione de qual app de avaliações conectado obter as avaliações.
* **Mode** — Escolha Manual ou Dinâmico.
* **Minimum rating** — Defina a classificação mínima em estrelas para exibir avaliações (por exemplo, 4 estrelas ou mais).
* **Display toggles** — Mostre ou oculte elementos individuais da avaliação:
  * Classificação por estrelas
  * Título da avaliação
  * Nome do avaliador
  * Data da avaliação
  * Selo de comprador verificado
* **Truncate review text** — Defina um comprimento máximo de caracteres para o texto da avaliação. Avaliações que excedem esse limite são cortadas com reticências.
* **Max reviews to show** — Defina quantas avaliações aparecem, de 1 a 3.
* **Layout** — Organize as avaliações na **Horizontal** (lado a lado) ou na **Vertical** (empilhadas).
* **Padding** — Ajuste o espaçamento ao redor do widget.

<div id="dynamic-mode-and-review-syncing">
  ### Modo dinâmico e sincronização de avaliações
</div>

No modo dinâmico, o Aftersell importa avaliações do seu app de avaliações e as armazena para que possam ser exibidas na oferta. A primeira importação acontece automaticamente dentro de 24 horas após a conexão do seu app de avaliações e, depois disso, uma vez por semana.

Para importar avaliações imediatamente, vá em **Settings > Product Reviews** e clique em **Sync now** para o seu app de avaliações.

<div id="verified-buyer-badge">
  ### Selo de comprador verificado
</div>

Quando o selo de comprador verificado está ativado, um rótulo **"Verified buyer"** é exibido nas avaliações qualificadas. Esse rótulo é traduzido automaticamente para o idioma definido na oferta e suporta 32 idiomas.

***

<div id="adding-additional-widgets">
  ## Adicionando widgets adicionais
</div>

Os widgets podem ser adicionados **acima ou abaixo do widget Upsell Product**, permitindo que você controle o fluxo de informações antes ou depois do próprio produto.

Os widgets adicionais que podem ser adicionados incluem:

* **Imagem** - Exiba uma imagem de apoio para reforçar visualmente a oferta.
* **Texto** - Adicione texto de apoio para comunicar mensagens-chave.
* **Texto e imagem** - Combine texto e recursos visuais para destacar valor ou explicar a oferta.
* **Botão de compra extra** - Adicione uma chamada para ação adicional para incentivar a aceitação da oferta. Não disponível em ofertas que exibem mais de um produto.
* **Selo de confiança** - Exiba sinais de confiança, como garantias, segurança ou indicadores de credibilidade.
* **FAQs** - Responda a perguntas comuns dos clientes para reduzir atritos e aumentar a confiança.
* **Vídeo** - Incorpore um vídeo para demonstrar o produto ou contar a história da sua marca. Veja [Vídeo](#video).
* **Depoimentos** - Mostre avaliações reais de produtos do seu app de avaliações conectado. Disponível em ofertas V2. Veja [Depoimentos](#testimonials).

Para adicionar um widget:

1. Escolha se deseja que o widget apareça **acima ou abaixo** do widget Upsell Product
2. Clique em **Add widget** na seção selecionada
3. Selecione e configure o widget que deseja incluir

***

Para saber mais sobre o que são ofertas pós-compra, como elas funcionam e como começar a usá-las com o Aftersell, dê uma olhada [neste artigo para mais informações](/pt/aftersell/post_purchase_overview).

***

O comportamento e a aparência dos widgets estão limitados às opções de configuração disponíveis no editor.\
Personalizações adicionais não são suportadas devido a limitações do Shopify.

***

<div id="need-help">
  ## Precisa de ajuda?
</div>

Se você tiver dúvidas ou precisar de ajuda para configurar suas ofertas pós-compra, nossa equipe de suporte está à disposição. Você pode entrar em contato a qualquer momento pelo chat no app ou por e-mail.
