Web Layers são elementos on-site exibidos em páginas específicas, para públicos específicos, acionados por ações do usuário ou por um gatilho de tempo predefinido.

No entanto, este artigo não é sobre o que são Web Layers – preparamos outro artigo só para isso, clique aqui para acessá-lo –, mas sim um passo a passo sobre como configurar Web Layers em sua loja online.


Como configurar Web Layers

Para começar, acesse seu Mission Control e vá até ONSITE > WEB LAYERS.

Se você estiver acessando esta funcionalidade pela primeira vez, você verá um quadrado branco com um sinal "+" no centro.

Ao clicar neste quadrado, e então no botão EDIT, você abrirá o painel de configurações da sua primeira Web Layer.

NOTA: É possível ter no máximo oito Web Layers.

Para configurar a Web Layer, você passará por seis seções, que veremos em detalhes a seguir.

Antes de continuarmos, vale lembrar que temos três tipos de Web Layers:

  • Boas-vindas (acionada quando o usuário entra no site)

  • Saída (acionada quando o usuário aproxima seu mouse do botão que fecha a aba de navegação)

  • Ação (acionada quando o usuário toma uma ação específica, p. ex. adiciona um produto ao carrinho)

Tudo certo? Então vamos passar juntos por cada etapa!

Passo 1: Configurações

Nesta seção você terá cinco campos para preencher:

  • Web Layer Name: Escolha um nome descritivo e facilmente reconhecível para manter o seu trabalho organizado.

  • Web Layer Type: Escolha entre os tipos de Boas-vindas, Saída e Ação.

  • Web Layer Configuration: As opções de configuração variam de acordo com o tipo que você escolher:

    • Boas-vindas: você terá a opção de definir a periodicidade (com que frequência você deseja que a Web Layer seja exibida para o mesmo usuário) e o atraso (quanto tempo deseja esperar antes que ela apareça para os visitantes de seu site).

    • Saída: aqui você terá apenas a opção de definir a periodicidade (com que frequência você deseja que a Web Layer seja exibida para o mesmo usuário).

    • Ação: você escolherá entre dois tipos de ação: "adicionar ao carrinho", no qual a Web Layer será exibida assim que esta ação for tomada pelos visitantes de seu website; ou "assinatura da newsletter", exibida logo após o visitante assinar a sua newsletter. Você também escolherá a frequência com que deseja que esta Web Layer seja exibida.

  • Web Layer Tags: por padrão, você terá duas tags, "From WebLayer" e "Footer". Entretanto, você pode sempre removê-las ou adicionar outras tags para organizar melhor seu fluxo de trabalho.

  • Font parameters: aqui você poderá definir a fonte para os textos da sua Web Layer, mas isso não é necessário pois você também poderá alterar esta configuração na seção de Design, mais adiante.

  • Link whole Web Layer: Ao marcar esta opção, você efetivamente transformará sua Web Layer em um grande botão. Basta adicionar a URL desejada, e definir se você prefere que o link seja aberto em outra aba ou não.

Clique na aba Rules para continuar.

Passo 2: Rules

Talvez você já tenha criado um Pop-up Avançado. Neste caso, reconhecerá que esta seção é bastante parecida com a da configuração de pop-ups.

Aqui você irá definir as condições que determinarão quando e como as suas Web Layers vão aparecer, oferecendo ainda mais flexibilidade para criar mensagens on-site altamente eficazes:

  • URL address: você pode determinar em qual página ou páginas específicas você deseja apresentar a Web Layer. Por exemplo, se quiser que a Web Layer apareça em todas as páginas do seu site (p. ex. "sualoja.com.br"), escolha "URL → contains → sualoja.com.br". Se você quiser que apareça apenas em sua página de carrinho (p. ex. "sualoja.com.br/meu-carrinho"), você pode escolher "URL → is → sualoja.com.br/meu-carrinho".

  • Screen size: nesta regra, você pode optar por mostrar sua Web Layer apenas em determinados tamanhos de tela, efetivamente segmentando por dispositivo: Desktop (≥1000 px); Tablet (≥576 and ≤1000 px); ou Smartphone (≤576 px).

  • User subscription status: usando esta regra, você determinará se quer mostrar ou ocultar a Web Layer para usuários que estejam inscritos ou não em sua newsletter.

  • HTML Element: permite que a Web Layer seja apresentada apenas quando um elemento HTML estiver presente na página. Basta colar o elemento neste campo.

  • Based on the date: determine se quer apresentar a Web Layer a partir de uma data específica, até uma data, ou durante um intervalo de datas.

  • Homepage: esta regra permite que você apresente a Web Layer exclusivamente na página principal do seu site. Basta definir "Homepage → is → sualoja.com.br"

NOTA: As regras seguem a lógica booleana (AND / OR em português, E / OU). Isso significa que é possível combinar regras para restringir a segmentação usando a operação AND (p. ex. mostrar a Web Layer apenas quando o usuário estiver visitando uma página específica E visualizar um produto) ou ampliá-la usando a operação OR (p. ex. mostrar a Web Layer quando um usuário não estiver inscrito OU estiver usando um dispositivo com tamanho de tela de smartphone).

Clique na aba Templates para continuar.

Passo 3: Templates

Aqui você poderá escolher dentre um de nossos templates e customizá-lo conforme suas necessidades.

Para continuar, clique na aba Posição.

Passo 4: Posição

Como você pode ter percebido, as Web Layers parecem Pop-ups mas são diferentes. Em vez de interromper a navegação do usuário, elas permitem que a navegação continue. Sendo assim, é possível aplicá-las em quase qualquer posição da tela!

NOTA: Você pode ver opções diferentes de posição dependendo do template escolhido no Passo 3.

Após escolher a posição desejada, prossiga para a aba Design.

Passo 5: Design

Aqui é onde sua Web Layer ganhará vida e personalidade! Nesta seção, você irá definir o visual da sua Web Layer e as informações que ela transmitirá.

Suas opções serão diferentes conforme o template escolhido no passo 3, mas as configurações gerais são as mesmas:

  • Animation in: Se você quiser, pode escolher uma animação para o momento em que sua Web Layer aparece na tela.

  • Animation out: Esta é a mesma opção que acima, mas aqui você escolherá a animação de quando a Web Layer desaparecerá da tela.

  • Botão EDIT: Nesta opção, você pode alterar a largura da sua Web Layer, se ela terá cantos arredondados, e o tipo de fundo (cor, imagem, gradiente or customizado).

  • Botão ELEMENTS: Aqui, você poderá editar cada elemento da sua Web Layer. As Web Layers são feitas de seções chamadas "containers", e você pode adicionar ou remover containers como preferir. É possível adicionar diferentes elementos (campo de formulário, botão, texto, checkbox, imagem, espaçador, seleção de gênero e seleção de aniversário) em cada container.

Você também pode editar facilmente cada elemento da sua Web Layer ao passar o mouse por cima dela.

Estamos quase lá! Clique na aba Pré-visualizar para chegar à última etapa.

Passo 6: Pré-visualizar

Agora só precisamos nos assegurar de que tudo está configurado como o desejado.

Para verificar a versão mobile da sua Web Layer, basta abrir a câmera do seu smartphone e apontá-la ao código QR que você verá na tela. A prévia será apresentada instantaneamente em seu smartphone.

Para conferir a versão de desktop, você pode clicar no botão GO TO STORE e ver a prévia no seu site, ou clicar no botão SEE IN MISSION CONTROL para ver a prévia no seu Mission Control.

Quando estiver feliz com as prévias, é só clicar no botão PUBLICAR, e pronto! Você acaba de elevar o nível das suas comunicações on-site.


Precisa de mais ajuda?

Se você tiver mais dúvidas sobre como configurar Web Layers, fique à vontade para entrar em contato conosco pelo e-mail hello@edrone.me


Não era isso que você estava procurando? Tente um desses artigos:

Encontrou a sua resposta?