Breve Visão Geral

Você pode criar Walk-Thrus no Modo Power do aplicativo ou começar a criar ShoutOuts, Lançadores e Pesquisas clicando em NOVO na guia MINHAS CAMPANHAS do Console Móvel.

Depois de criar um Walk-Thru, clicar em NOVO e selecionar o tipo de campanha e o modelo na guia MINHAS CAMPANHAS ou clicar no ícone de edição de uma campanha já existente, você pode criá-lo ou editá-lo usando o Editor Visual do Assistente de Campanha na tela EDITAR CAMPANHA.

Aqui está o Editor Visual em toda a sua glória!

Dica Pro: Esta é a interface do usuário do Editor Visual que você vê ao editar/projetar um Lançador. O layout difere ligeiramente de acordo com o tipo de campanha.

Compreendendo a Árvore OBJETOS

Cada item na árvore OBJETOS corresponde a um objeto que está atualmente na tela do dispositivo de visualização:

Personalizando o Canvas da sua campanha

O objeto raiz de cada campanha é o objeto Canvas, no qual todos os outros objetos da campanha ficarão. Personalize a tela em si de acordo com o plano para a aparência da campanha.

O objeto Canvas tem quatro abas de personalização:

• A guia FORMATO, para projetar a tela em si e atribuir uma animação a ela;
• A aba BOTÃO FECHAR (aplica-se apenas às campanhas ShoutOut e Walk-Thru), para ativar o aparecimento de um ícone "X" na tela;
• A guia SCREEN OVERLAY, para decidir se deseja que um efeito de holofote esteja por trás da tela; e
• A guia TAMANHO e POSIÇÃO, onde você pode configurar o tamanho e o posicionamento da tela em relação à tela do aplicativo;

Ao clicar no objeto Canvas de uma campanha (na tela de visualização do dispositivo ou na árvore OBJETOS), você começará na guia FORMATO por padrão, onde você pode configurar a canvas:

• Cor;
• Opacidade (visibilidade; quanto menor a porcentagem de opacidade, mais você pode ver através da tela para o conteúdo do aplicativo em segundo plano);
• Raio dos cantos (quanto maior o raio, mais arredondados os cantos);
• Configurações de borda;
• Configurações de animação. As opções de animação incluem:
  • Instantâneo (onde a tela aparecerá instantaneamente);
  • Desbotamento (onde a tela desaparece e desaparece); e
  • Fly In (onde a campanha será exibida de cima, abaixo, esquerda ou direita; a direção é configurável); e
• Direção do texto.

  

Em seguida, clique na guia FECHAR (se estiver criando um ShoutOut ou Walk-Thru; caso contrário, pule esta etapa) e decida se deseja que os usuários finais possam clicar em um "X" para fechar a campanha:

Em seguida, clique na guia SOBREPOSIÇÃO DE TELA e decida se deseja uma sobreposição por trás da campanha. Em caso afirmativo, você pode personalizar as sobreposições:

• Cor;
• Opacidade (visibilidade); e
• Ação (consulte a seção Ações disponíveis para botões, formas, listas e sobreposições abaixo).

Por fim, clique na guia TAMANHO e POSIÇÃO, onde você pode configurar o tamanho da tela, as unidades e o posicionamento em relação à tela do aplicativo:

Compreendendo o TAMANHO e a POSIÇÃO

Embora a maneira mais intuitiva de editar o tamanho e a posição de um objeto ainda seja diretamente da tela de visualização do dispositivo (por exemplo, esticar e arrastar objetos com o mouse), a guia TAMANHO e POSIÇÃO é ideal para ajustes quando mais precisão é necessária.

Além disso, a guia TAMANHO e POSIÇÃO permite criar campanhas usando design responsivo (capacidade de resposta às diferenças entre dispositivos com tamanhos e orientações variados).

A guia é composta por até três seções: Reordenar, Tamanho e Posição:

Você também pode bloquear a proporção de um objeto clicando no ícone de cadeado:

1. Reordenar: aqui você pode alterar a ordem das camadas de um objeto em relação a outros objetos na tela;
   • Em ordem de aparição, os ícones significam 1) passar para a camada mais frontal, 2) avançar uma camada, 3) recuar uma camada, e 4) passar para a camada mais remota.
2. Tamanho: aqui você pode selecionar o tipo de dimensionamento, entre Relativo (%), Absoluto (pt — iOS e dp — Android) e Personalizado (uma combinação de Relativo e Absoluto);
   • Relativo: Selecione um valor percentual para Largura e Altura, e o objeto permanecerá nessa porcentagem do objeto tela (pai) (a tela do aplicativo no caso da Tela, a Tela no caso de um objeto principal e um objeto principal no caso de um subobjeto), independentemente de o objeto tela (pai) crescer ou encolher;
     • Por exemplo, os objetos de botão localizados dentro de um slide de carrossel são objetos das crianças do slide no qual eles estão localizados, pois o slide atua como seu objeto de tela (pai).
     • Se você bloquear a proporção de aspecto de um item no modo Relativo, a altura se tornará "Automática", porque será necessário ajustar para manter a proporção de aspecto do objeto.
   • Absoluto: selecione um valor pt ou dp e o objeto permanecerá desse tamanho, independentemente do tamanho do objeto canvas (pai);
     • Se você bloquear a proporção no Absoluto, sempre que alterar um dos valores de Largura ou Altura, o outro será atualizado automaticamente para preservar a proporção atual.
   • Personalizado: selecione um valor pt / dp OU% para Largura e um valor pt / dp OU% para Altura;
     • Útil se, por exemplo, você quiser que um botão permaneça com a mesma altura, mas altere sua largura com base na largura da tela.
   • Dica profissional: se o objeto Canvas não estiver definido como relativo, não importa qual configuração de Tamanho você escolher para seus objetos filhos, pois o objeto Canvas nunca mudará de tamanho. Isso também se aplica aos objetos cuja posição está definida em% quando o Canvas está definido como Absoluto.
3. Posição: aqui você pode definir a posição do objeto em relação ao objeto canvas (pai). Você pode escolher entre Manual (onde você deve considerar mais fatores, mas tem mais controle sobre a posição exata do objeto) e Automático (onde você tem um pouco menos de controle, mas precisa configurar menos configurações).
   • Manual:
     • Para Horizontal, defina um valor% de quão longe você deseja que o objeto apareça da esquerda, do centro (a linha divisória vertical) ou do lado direito do objeto da tela:

       

       • Você pode definir um valor% positivo (à direita do valor selecionado) ou negativo (à esquerda do valor selecionado).
     • Para Vertical, defina um valor% de quão longe deseja que o objeto apareça da parte superior, do centro (a linha divisória horizontal) ou da parte inferior do objeto de tela:

       

   • Automático:
     • Automático é semelhante ao Manual, exceto que, quando você seleciona Automático, você perde a capacidade de selecionar um valor De, e ele será automaticamente definido como Centro da Tela e Meio da Tela, respectivamente, ou na borda da tela, se você encaixar o objeto.
       • Basta colocar o objeto onde quiser na tela de visualização do dispositivo e o SDK WalkMe Mobile tentará manter esse posicionamento geral, independentemente do tamanho ou orientação do dispositivo.

Adicionando novos OBJETOS à sua campanha

Quando você clicar no ícone + acima de "ADICIONAR NOVO OBJETO" à esquerda do Editor Visual, você verá um diretório OBJETOS contendo todos os elementos que podem ser adicionados a essa campanha específica:

Adicionando texto padrão à sua campanha

Arraste o ícone Texto do diretório OBJETOS para onde quiser que o texto apareça na tela do aplicativo e digite o texto desejado na tela de visualização do dispositivo.

Ao adicionar ou clicar em um objeto de texto, você começará na guia FORMATO por padrão, onde você pode configurar a fonte do texto (extraída das fontes disponíveis no aplicativo), o tamanho da fonte, a cor da fonte, o alinhamento do texto e o estilo:

Em seguida, clique na guia TAMANHO e POSIÇÃO, onde você pode configurar a ordem das camadas do objeto de texto (a caixa na qual o próprio texto está localizado) (semelhante ao z-index), tamanho e unidades e posicionamento em relação ao objeto Canvas:

Edição de texto padrão

Agora você pode editar o texto do objeto Texto e Botão em linha, diretamente dentro da tela de visualização do dispositivo. Isso tornará mais fácil para você ver como o texto que você escreve se encaixa na campanha:

Adicionando texto enriquecido à sua campanha

Com o WalkMe Mobile SDK v1.14.0 e versões posteriores, os objetos de texto podem ser atualizados para o tipo de objeto Formato de Texto Avançado ("ATF"). Para atualizar, clique em Formatação Avançada na guia FORMATO.

Ao contrário de objetos de texto simples, nos quais você só pode definir um único formato para o objeto inteiro (por exemplo, se uma palavra estiver em negrito, todas as palavras devem ser em negrito), os objetos ATF dão suporte à definição de um formato diferente para cada caractere do objeto. Isso significa que você pode criar texto objetos que parecem L i k e t h i s (mas somente se você quiser).

O ATF também suporta a criação de parágrafos, o que significa que você pode criar quebras de linha para adaptar seus textos aos seus designs.

A formatação de um objeto ATF é feita na barra de ferramentas que aparece acima do objeto. Se a barra de ferramentas estiver posicionada em um local desconfortável, você pode simplesmente arrastá-la para a área do Editor Visual.

Como a formatação é feita por caractere, você deve destacar o(s) caractere(s) cujo formato deseja editar dentro do objeto e somente então definir as propriedades de formatação desejadas.

Caso você queira reverter sua atualização para o ATF (por exemplo, se quiser oferecer suporte a versões anteriores do SDK), clique no botão Limpar formatação na guia FORMATO no painel esquerdo.

Adicionando texto dinâmico à sua campanha

Com o WalkMe Mobile SDK v1.16.0 e versões posteriores, as campanhas podem ser personalizadas ainda mais com conteúdo personalizado adicionando texto dinâmico relevante para o usuário final.

O texto dinâmico está disponível em todos os objetos de Formatação de Texto Avançada (objeto de texto atualizado).

As opções de variáveis dinâmicas disponíveis podem ser vistas clicando no ícone <A> na barra de ferramentas Formatação Avançada ou simplesmente digitando @ em um objeto Formatação de Texto Avançada.

O texto dinâmico pode ser baseado em variáveis prontas para uso que existem em todos os aplicativos:

• Versão do app
• Versão do SO
• Locale do dispositivo
• Tipo de conexão

O texto dinâmico também pode ser baseado nas informações expostas ao SDK em Atributos de Usuário (todos os atributos de usuário adicionados no console aparecerão na lista) ou na API Identificador de Usuário (é o que "ID do usuário" se refere nas opções dinâmicas padrão).

Fontes

As fontes disponíveis para uso são herdadas do aplicativo quando pronto para uso e devem ser exibidas como opções no console quando você clica no menu suspenso de fontes. Se você não vir as opções listadas lá, tente entrar no modo de energia no aplicativo e tocar no ícone azul no aplicativo de sincronização de >informações do aplicativo>. Em seguida, atualize o console e verifique novamente. As fontes são retiradas do info.plist no iOS e da pasta de recursos de fontes no Android.

Adicionando imagens à sua campanha

Arraste o ícone Imagem do diretório OBJETOS para onde quiser que a imagem apareça na tela do aplicativo.

Formatos de imagem suportados incluem: png, jpg, jpeg, gif

Selecione a imagem desejada na BIBLIOTECA DE ATIVOS ou clique em + CARREGAR NOVO ATIVO para carregar uma nova foto na biblioteca e incluí-la na campanha.

Para personalizar o formato, tamanho e posição da imagem, clique no objeto de imagem relevante na árvore OBJETOS e clique na guia de personalização desejada à esquerda (FORMATO ou TAMANHO e POSIÇÃO).

Ao adicionar ou clicar em uma imagem, a guia padrão será a guia FORMATO, onde você pode fazer o seguinte:

• Alterar o arquivo de imagem;
• Defina o nível de opacidade da imagem (ou seja, até que ponto você pode ver através da imagem em relação ao fundo);
• Defina o raio dos cantos da imagem (quanto maior esse valor, mais arredondados serão os cantos da imagem); e
• Defina as configurações de borda da imagem:

Em seguida, clique na guia TAMANHO e POSIÇÃO, onde você pode configurar a ordem das camadas do objeto de imagem (a caixa na qual a imagem está localizada) (semelhante ao z-index), tamanho e unidades e posicionamento em relação ao objeto Canvas:

Adicionando botões à sua campanha

Arraste o ícone do botão do diretório OBJETOS para onde quiser que o botão apareça na tela do aplicativo.

Ao adicionar ou clicar em um botão, a guia padrão será a guia FORMATO, onde você pode fazer o seguinte:

• Na seção Ação, defina uma ação que ocorrerá quando um usuário final clicar neste botão;
  • Consulte a seção Ações disponíveis para botões, formas, listas e sobreposições abaixo.
• Na seção Estilo de texto, defina a fonte, o tamanho da fonte, a cor da fonte, o alinhamento do texto e o estilo;
• Na seção Estilo do Botão, defina o seguinte:
  • O nível de opacidade do botão (ou seja, até que ponto você pode ver através do botão em relação ao fundo);
  • O raio dos cantos do botão (quanto maior esse valor, mais arredondados serão os cantos do botão); e
  • As configurações da borda do botão:

    

Em seguida, clique na guia Ícone e clique na caixa de seleção se desejar adicionar um ícone ao botão:

Por fim, clique na guia TAMANHO e POSIÇÃO, onde você pode configurar a ordem das camadas do objeto botão (a caixa onde o botão está localizado) (semelhante ao z-index), tamanho e unidades e posicionamento em relação ao objeto Canvas:

Usando um botão para transformar uma imagem em uma área clicável

Para transformar um botão em uma área clicável, faça o seguinte:

1. Arraste o ícone do botão para a tela de visualização do dispositivo;
2. Coloque-o sobre uma imagem;
3. Redimensioná-lo para o tamanho da imagem (aproximadamente);
4. mova a Opacidade para 0% para tornar o botão transparente;
5. Atribua uma ação ao botão, e isso criará a ilusão de que a ação está vinculada à imagem subjacente:
   

Adicionando formas à sua campanha

Arraste o ícone Forma do diretório OBJETOS para onde quiser que a forma apareça na tela do aplicativo.

Ao adicionar ou clicar em uma forma, a guia padrão será a guia FORMATO, onde você pode fazer o seguinte:

• Na seção Estilo de forma, defina as configurações de cor da forma, opacidade (visibilidade), raio de canto (arredondamento dos cantos) e borda;
• Na seção Ação, defina uma ação que ocorrerá quando um usuário final clicar nessa forma;
  • Consulte a seção Ações disponíveis para botões, formas, listas e sobreposições abaixo.

Em seguida, clique na guia TAMANHO e POSIÇÃO, onde você pode configurar a ordem das camadas da forma (semelhante ao índice z), o tamanho e as unidades e o posicionamento em relação ao objeto Canvas:

Adicionando listas aos seus ShoutOuts

As listas são usadas principalmente ao criar ShoutOuts. Para saber mais, consulte Como criar ShoutOuts.

Adicionando visualizações da Web à sua campanha

As visualizações da Web são usadas principalmente ao criar ShoutOuts. Para saber mais, consulte Como criar ShoutOuts.

Adicionando carrosséis à sua campanha

Os carrossels são usados principalmente ao criar ShoutOuts. Para saber mais, consulte Como criar ShoutOuts.

Ações disponíveis para botões, formas, itens de lista e sobreposições

As ações disponíveis do botão, forma e lista são as seguintes:

• Personalizado: um CTA positivo que enviará o usuário final para qualquer URL ou deep-link inserido no campo CTA;
  • A caixa de Redirecionamento Interno deve ser marcada se você estiver adicionando links profundos ao aplicativo selecionado atualmente no Android, e evita que pop-ups solicitando aos usuários a aprovação da navegação para o link profundo;
  • Depois que a caixa for marcada, você verá um campo que deve ser preenchido automaticamente com o nome do pacote do aplicativo atual, com o formato com.company.app.XXX.
• OK: um CTA positivo que conta para a Taxa de Cliques da campanha;
• Talvez: um CTA neutro (nem negativo nem positivo) que, quando clicado, fechará a campanha, mas fará com que a campanha reapareça na tela do usuário final em um momento aleatório nos próximos 1 a 3 dias;
  • Campanhas que reaparecem depois de clicar em MAYBE CTAs não contam para os limites de impressões.
• Nunca: um dos dois CTAs negativos que fecharão a campanha e garantirão que o usuário final nunca mais verá essa campanha;
• Fechar: o segundo de dois CTAs negativos. Clicar nele fechará a campanha, mas não afetará seu comportamento futuro em relação aos usuários finais (ao contrário do comportamento dos CTAs NUNCA);
• Mostrar configurações: um CTA positivo que, depois de clicado, redirecionará o usuário final para a página de configurações do aplicativo no nível do SO;
  • iOS - Vá para Configurações, > Escolha o aplicativo na lista
  • Android - Vá para Configurações > Aplicativos > Escolha um aplicativo na lista
• Campanha: um CTA positivo que vincula uma campanha à outra.
  • Selecione o nome da campanha na lista suspensa;
  • Se a campanha selecionada for um Walk-Thru, você pode decidir em qual etapa a campanha deve começar ou escolher Auto (padrão) para deixar o SDK decidir;
  • Marque a caixa Redirecionar usuário e insira um URL se quiser redirecionar o usuário final para uma página de aplicativo diferente para iniciar a campanha.
• Enviar: um CTA positivo que envia uma pesquisa;
  • Só aparece para botões e formas na campanha do tipo Pesquisa.
• Próximo slide/slide anterior: transfere o usuário final entre os diferentes slides de um Carrossel;
  • Só aparece para botões e formas no widget Carrossel.
• Próxima etapa/etapa anterior: leva você para a etapa seguinte ou anterior de um Walk-Thru.
  • Aparece apenas para botões e formas no Walk-Thrus;
  • Só verá essa opção se a etapa não for a última (para a "próxima etapa") ou a primeira (para a "etapa anterior") em uma tela.