# Web placement
Use o elemento **Web Placement** para mostrar [conteúdo web](/pt/product/content/web-popup-content/web-content/) no seu site para os usuários que chegam a esta etapa do journey. O conteúdo aparece como um popup sobre a página ou como um bloco inline dentro de um elemento da página, na próxima visualização de página do usuário ou logo após um evento.
Diferente de uma [campanha de popup web](/pt/product/messaging-channels/web-popups/), que atinge todos os visitantes que correspondem às suas regras, um placement é pessoal: apenas os usuários que chegam ao elemento o veem, e ele dura apenas o tempo que você definir.
O usuário avança para o próximo elemento assim que o placement entra na fila para ele. Para reagir ao que o usuário faz com o placement, adicione um elemento [Wait for Trigger](#react-to-shows-clicks-and-closes) depois dele.
Arraste o elemento **Web Placement** para a tela a partir de **Channels** e clique nele para abrir suas configurações.
## Escolher o conteúdo
Em **Web pop-up content**, selecione o conteúdo web a ser exibido. A lista mostra o conteúdo web do aplicativo do journey. Conteúdo web com campos de formulário (entrada de e-mail, entrada de tag, consentimento ou envio) não pode ser usado aqui. Para coletar dados dos visitantes, use uma [campanha de popup web](/pt/product/messaging-channels/web-popups/create-web-popups-campaigns/) com um [formulário web](/pt/product/content/web-popup-content/web-forms/).
Para mostrar produtos do seu catálogo no placement, adicione um [bloco Products](/pt/product/content/web-popup-content/blocks/#products) ao conteúdo.
## Escolher o tipo
* **Popup:** exibido sobre a página.
* **Inline:** inserido em um elemento da página. Defina:
* **CSS selector of the element:** o elemento em que o bloco é inserido, por exemplo `#cart-slot`. Até 255 caracteres. O elemento já deve existir no seu site.
* **Width:** a largura CSS do bloco, por exemplo `100%` ou `320px`. Deixe vazio para manter a largura própria do elemento.
Um bloco inline permanece em todas as páginas que têm o elemento até o fim do tempo de vida, até o usuário fechá-lo ou até o evento de ocultação acontecer. Um popup é exibido uma vez.
Aqui o elemento mostra o conteúdo **Free shipping nudge with cart items** como bloco inline no elemento `#pw-cart-slot`:
## Definir prioridade e tempo de vida
* **Priority:** **High**, **Medium** (padrão) ou **Low**. Quando vários placements têm como alvo o mesmo elemento, ou vários popups devem aparecer ao mesmo tempo, o usuário vê o de maior prioridade. Em caso de empate, o usuário vê o mais recente. Uma página mostra no máximo um popup e um bloco inline por elemento.
* **Lifetime:** quanto tempo o placement espera pelo usuário e permanece no site, em minutos, horas ou dias. De 1 minuto a 7 dias. O padrão é 1 hora. Se o usuário não visitar seu site dentro desse tempo, o placement não é exibido.
## Limitar as exibições de popup por dia
Para um popup, defina **Show at most, times a day**: quantos popups deste elemento um usuário pode ver por dia, de 0 a 100. `0` significa sem limite. O limite importa quando o mesmo usuário chega ao elemento várias vezes, por exemplo quando entra novamente no journey ou passa por um [Loop](/pt/product/customer-journey/journey-elements/flow-controls/loop/). Blocos inline não têm esse limite.
## Permitir que o usuário feche o placement
**The user can close it** vem ativado por padrão. O placement mostra um botão de fechar (✕). Os botões do conteúdo com a ação **Close the popup**, por exemplo **Keep shopping**, o fecham da mesma forma. Um placement fechado não volta, e o fechamento conta apenas como `PW_WebPlacementDismiss`, não como clique.
Quando a configuração está desativada, um bloco inline não tem ✕ e não mostra os botões **Close the popup** do conteúdo.
## Escolher quando mostrar o placement
Em **Show**, escolha:
* **On the next page view:** o placement aparece assim que o usuário abre qualquer página do seu site.
* **On event:** o placement aguarda o evento que você selecionar e aparece logo depois que o usuário o aciona. Opcionalmente, clique em **Add condition** para filtrar o evento pelos seus atributos.
No modo **On event**, contam apenas os eventos enviados depois que o usuário chega ao elemento. Se o evento não acontecer dentro do tempo de vida, o placement não é exibido.
## Ocultar o placement após um evento
Para tirar o placement do site quando o usuário fizer algo, por exemplo concluir um pedido, ative **Hide after an event** e selecione o evento. O placement é removido quando o evento acontece, tenha sido exibido ou não.
Os placements de um usuário também são removidos quando o usuário sai do journey ou o journey é interrompido.
## Pré-visualizar em um dispositivo de teste
Para verificar o placement no seu site antes de iniciar o journey:
1. Em **Preview**, selecione um [dispositivo de teste](/pt/product/first-steps/start-with-your-project/test-your-integration/test-devices/) do aplicativo. O dispositivo deve ser um navegador com seu site aberto.
2. Clique em **Show on test device**.
3. Nesse dispositivo, abra ou recarregue uma página do seu site.
A pré-visualização usa as configurações do formulário, então você não precisa salvar o journey antes. Ela ignora o evento de **Show** e aparece na próxima visualização de página. A pré-visualização fica disponível por 1 hora e não é contada nas estatísticas do journey.
## Reagir a exibições, cliques e fechamentos
Um placement envia três eventos para o usuário:
| Evento | Enviado quando |
| :---- | :---- |
| `PW_WebPlacementShow` | O placement é exibido. Um bloco inline conta como exibido quando entra na área visível ao rolar a página. |
| `PW_WebPlacementClick` | O usuário clica em um link ou botão no placement, exceto um botão de fechar. |
| `PW_WebPlacementDismiss` | O usuário fecha o placement com ✕ ou com um botão **Close the popup**. |
Cada evento tem o atributo `content_code` com o código do conteúdo web, para que você possa diferenciar os placements nas condições.
Use os eventos:
* Em um elemento [Wait for Trigger](/pt/product/customer-journey/journey-elements/flow-controls/wait-for-trigger/) após o elemento **Web Placement**, por exemplo uma ramificação **Clicked** com `PW_WebPlacementClick` e uma ramificação **Not triggered** que envia um push.
* Como [metas de conversão](/pt/product/customer-journey/journey-settings/#conversion-goals) do journey.
Um evento aparece na lista de eventos depois que seu aplicativo o recebe pelo menos uma vez. Para adicioná-lo à lista antes do lançamento, pré-visualize o placement em um dispositivo de teste e clique nele ou feche-o.
## Estatísticas do placement
Na tela e nos detalhes do elemento de um journey em execução, o elemento **Web Placement** mostra:
* **Shown:** quantas vezes o placement foi exibido.
* **Interactions:** quantas vezes ele foi clicado.
Os dois contadores são totais de eventos, não de usuários únicos. Um usuário que vê um bloco inline em cinco páginas soma cinco exibições.
## Configurar seu site
1. Use o Web SDK 3.108.1 ou posterior.
2. Quando um visitante fizer login, chame `setUserId` com o mesmo ID de usuário que ele tem no Pushwoosh. Os placements são entregues por ID de usuário: sem `setUserId`, o site recebe apenas os placements na fila para o próprio navegador, não os do usuário conectado.
3. Para placements inline, adicione os elementos em que os blocos são inseridos, por exemplo ``.
Os placements ficam ativados por padrão quando o SDK está atualizado. Para ignorá-los em um site, consulte [Web placements](/pt/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#web-placements) no guia do Web SDK.
## Escolher o conteúdo
Em **Web pop-up content**, selecione o conteúdo web a ser exibido. A lista mostra o conteúdo web do aplicativo do journey. Conteúdo web com campos de formulário (entrada de e-mail, entrada de tag, consentimento ou envio) não pode ser usado aqui. Para coletar dados dos visitantes, use uma [campanha de popup web](/pt/product/messaging-channels/web-popups/create-web-popups-campaigns/) com um [formulário web](/pt/product/content/web-popup-content/web-forms/).
Para mostrar produtos do seu catálogo no placement, adicione um [bloco Products](/pt/product/content/web-popup-content/blocks/#products) ao conteúdo.
## Escolher o tipo
* **Popup:** exibido sobre a página.
* **Inline:** inserido em um elemento da página. Defina:
* **CSS selector of the element:** o elemento em que o bloco é inserido, por exemplo `#cart-slot`. Até 255 caracteres. O elemento já deve existir no seu site.
* **Width:** a largura CSS do bloco, por exemplo `100%` ou `320px`. Deixe vazio para manter a largura própria do elemento.
Um bloco inline permanece em todas as páginas que têm o elemento até o fim do tempo de vida, até o usuário fechá-lo ou até o evento de ocultação acontecer. Um popup é exibido uma vez.
Aqui o elemento mostra o conteúdo **Free shipping nudge with cart items** como bloco inline no elemento `#pw-cart-slot`:
## Definir prioridade e tempo de vida
* **Priority:** **High**, **Medium** (padrão) ou **Low**. Quando vários placements têm como alvo o mesmo elemento, ou vários popups devem aparecer ao mesmo tempo, o usuário vê o de maior prioridade. Em caso de empate, o usuário vê o mais recente. Uma página mostra no máximo um popup e um bloco inline por elemento.
* **Lifetime:** quanto tempo o placement espera pelo usuário e permanece no site, em minutos, horas ou dias. De 1 minuto a 7 dias. O padrão é 1 hora. Se o usuário não visitar seu site dentro desse tempo, o placement não é exibido.
## Limitar as exibições de popup por dia
Para um popup, defina **Show at most, times a day**: quantos popups deste elemento um usuário pode ver por dia, de 0 a 100. `0` significa sem limite. O limite importa quando o mesmo usuário chega ao elemento várias vezes, por exemplo quando entra novamente no journey ou passa por um [Loop](/pt/product/customer-journey/journey-elements/flow-controls/loop/). Blocos inline não têm esse limite.
## Permitir que o usuário feche o placement
**The user can close it** vem ativado por padrão. O placement mostra um botão de fechar (✕). Os botões do conteúdo com a ação **Close the popup**, por exemplo **Keep shopping**, o fecham da mesma forma. Um placement fechado não volta, e o fechamento conta apenas como `PW_WebPlacementDismiss`, não como clique.
Quando a configuração está desativada, um bloco inline não tem ✕ e não mostra os botões **Close the popup** do conteúdo.
## Escolher quando mostrar o placement
Em **Show**, escolha:
* **On the next page view:** o placement aparece assim que o usuário abre qualquer página do seu site.
* **On event:** o placement aguarda o evento que você selecionar e aparece logo depois que o usuário o aciona. Opcionalmente, clique em **Add condition** para filtrar o evento pelos seus atributos.
No modo **On event**, contam apenas os eventos enviados depois que o usuário chega ao elemento. Se o evento não acontecer dentro do tempo de vida, o placement não é exibido.
## Ocultar o placement após um evento
Para tirar o placement do site quando o usuário fizer algo, por exemplo concluir um pedido, ative **Hide after an event** e selecione o evento. O placement é removido quando o evento acontece, tenha sido exibido ou não.
Os placements de um usuário também são removidos quando o usuário sai do journey ou o journey é interrompido.
## Pré-visualizar em um dispositivo de teste
Para verificar o placement no seu site antes de iniciar o journey:
1. Em **Preview**, selecione um [dispositivo de teste](/pt/product/first-steps/start-with-your-project/test-your-integration/test-devices/) do aplicativo. O dispositivo deve ser um navegador com seu site aberto.
2. Clique em **Show on test device**.
3. Nesse dispositivo, abra ou recarregue uma página do seu site.
A pré-visualização usa as configurações do formulário, então você não precisa salvar o journey antes. Ela ignora o evento de **Show** e aparece na próxima visualização de página. A pré-visualização fica disponível por 1 hora e não é contada nas estatísticas do journey.
## Reagir a exibições, cliques e fechamentos
Um placement envia três eventos para o usuário:
| Evento | Enviado quando |
| :---- | :---- |
| `PW_WebPlacementShow` | O placement é exibido. Um bloco inline conta como exibido quando entra na área visível ao rolar a página. |
| `PW_WebPlacementClick` | O usuário clica em um link ou botão no placement, exceto um botão de fechar. |
| `PW_WebPlacementDismiss` | O usuário fecha o placement com ✕ ou com um botão **Close the popup**. |
Cada evento tem o atributo `content_code` com o código do conteúdo web, para que você possa diferenciar os placements nas condições.
Use os eventos:
* Em um elemento [Wait for Trigger](/pt/product/customer-journey/journey-elements/flow-controls/wait-for-trigger/) após o elemento **Web Placement**, por exemplo uma ramificação **Clicked** com `PW_WebPlacementClick` e uma ramificação **Not triggered** que envia um push.
* Como [metas de conversão](/pt/product/customer-journey/journey-settings/#conversion-goals) do journey.
Um evento aparece na lista de eventos depois que seu aplicativo o recebe pelo menos uma vez. Para adicioná-lo à lista antes do lançamento, pré-visualize o placement em um dispositivo de teste e clique nele ou feche-o.
## Estatísticas do placement
Na tela e nos detalhes do elemento de um journey em execução, o elemento **Web Placement** mostra:
* **Shown:** quantas vezes o placement foi exibido.
* **Interactions:** quantas vezes ele foi clicado.
Os dois contadores são totais de eventos, não de usuários únicos. Um usuário que vê um bloco inline em cinco páginas soma cinco exibições.
## Configurar seu site
1. Use o Web SDK 3.108.1 ou posterior.
2. Quando um visitante fizer login, chame `setUserId` com o mesmo ID de usuário que ele tem no Pushwoosh. Os placements são entregues por ID de usuário: sem `setUserId`, o site recebe apenas os placements na fila para o próprio navegador, não os do usuário conectado.
3. Para placements inline, adicione os elementos em que os blocos são inseridos, por exemplo ``.
Os placements ficam ativados por padrão quando o SDK está atualizado. Para ignorá-los em um site, consulte [Web placements](/pt/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#web-placements) no guia do Web SDK.