Como criar um pop-up incorporado e adicioná-lo ao seu site

Pop-ups incorporados podem tornar o seu site mais interativo. Você pode usá-los para adicionar formulários a elementos existentes, fazer com que seus pop-ups se misturem com outros conteúdos do site ou adicionar widgets sem modificar o código do seu site.

Neste artigo, falaremos sobre como adicionar um pop-up incorporado ao seu site.

Conteúdo

Como criar um pop-up incorporado

Ao contrário dos pop-ups regulares que ocupam áreas visíveis da página, os pop-ups incorporados são adicionados a elementos específicos do site.

Vá para o seu projeto e clique em Adicionar pop-up.

Na janela modal, selecione Incorporado.

O projeto onde você cria seu pop-up deve corresponder ao site onde pretende adicioná-lo.

Selecione um modelo ou crie um pop-up do zero.

Saiba mais: Como criar um pop-up inteligente.

Personalize seu pop-up

Na aba Estilo, você pode selecionar um tipo e posicionamento de pop-up, ajustar sua largura e preenchimento interno, definir uma imagem de fundo e cores, e adicionar efeitos.

Certifique-se de que a largura e o tamanho do seu pop-up estejam alinhados com o elemento do site alvo. Também é melhor selecionar uma cor de pop-up que corresponda ao esquema de cores do seu site.

Na aba Elementos, você pode adicionar uma cobertura e outros elementos ao seu pop-up.

Configure as opções de exibição do pop-up

Vá para a aba Condições de exibição.

Adicione um seletor

Copie o seletor CSS do seu site alvo.

Saiba mais: Como encontrar um seletor de CSS.

Cole o seletor no formato #unique_id no campo Seletor do seu elemento do site, e clique em Verificar seletor.

Na janela modal aberta, insira o link do seu site no campo Domínio e clique em Verificar.

Seu site deve corresponder ao projeto onde você está criando este pop-up.

Você pode ver o status Selector not found ("Seletor não encontrado"). Se tiver certeza de que seu seletor é único, feche a janela modal e continue a configuração.

Configure a posição do seu pop-up

Você pode selecionar uma das seguintes opções:

Dentro do primeiro	Coloque seu pop-up dentro do elemento do site e mostre o pop-up primeiro.
Dentro do último	Coloque seu pop-up dentro do elemento do site e mostre o elemento primeiro.
Em vez de	Seu pop-up substituirá seu elemento do site até que suas condições de exibição sejam atendidas ou até que o visitante do site o feche. Depois disso, seu elemento do site reaparecerá como de costume.
Antes	Coloque seu pop-up antes do seu elemento.
Depois	Coloque seu pop-up após o seu elemento.

Selecione as condições de exibição

Abaixo, você pode personalizar o cenário de exibição do seu pop-up.

Saiba mais: Como configurar um cenário de exibição de pop-up.

Se você tiver um Launcher em seu projeto, você pode usá-lo para acionar seu pop-up. Para fazer isso, ative a chave Abrir este pop-up ao clicar no launcher e selecione um launcher na lista suspensa.