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