Breve visão geral

Torne-se um especialista em construção de DAP (Aplicações Descentralizadas) e atenda aos requisitos de construção desejados. O artigo a seguir explica como realizar as três principais opções de construção do lançador mais solicitadas.

Criar um lançador piscando

1. Clique em "Personalizar"
2. Clique na aba "CSS"
3. Cole o texto a seguir na parte inferior do painel CSS e substitua os x pelo ID do seu Lançador. Você pode encontrá-lo passando o mouse sobre os 3 pontos verticais ao lado do seu Lançador e clicando em "copy ID"

   .walkme-launcher-id-xxxxxx .walkme-launcher-image-div {
    animation: scale-pulse 1.75s cubic-bezier(0.39,0.58,0.38,0.75) normal infinite forwards;
   }
   
   @keyframes scale-pulse {
    from {
    transform: scale(1.0);
    opacity: 1;
    }
    até {
    transform: scale(1.5);
    opacity: 1;
    }
   }

Criar um Lançador invisível

Caso de uso: para bloquear um botão para impedir uma ação de acordo com as práticas recomendadas. Você pode usá-lo para iniciar um Smart Walk-Thru ou simplesmente não fazer nada.

1. Na guia Design do Lançador, clique no ícone Editar modelo

   

2. A tela de design personalizado será aberta
3. Clique em Deixar invisível

   
   

Criar um balão fixo

Um balão permanecerá na tela enquanto o tutorial continua.

Caso de uso: você deseja que um balão geral permaneça na tela enquanto o usuário preenche um formulário.

1. Crie um balão com o texto e o design desejados.
2. Transforme o balão em uma imagem (Print screen - Cole no Paint e edite - Salve - Carregue no S3).
3. Adicione a imagem como um Lançador. E localize-o onde você teria colocado o balão.
4. Crie um WM-Data onde deseja que o balão apareça no Walk-Thru.
5. Adicione o mesmo WM-Data que substitui o anterior onde você deseja que o balão desapareça.
6. Segmente o 'Balloon Launcher' para que apareça apenas quando o WM-Data existir.
7. Faça com que o Lançador verifique segmentações (frequência de segmentações).

Girar/inclinar um Lançador

Para fazer com que o Lançador apareça em um ângulo, use o CSS global.

1. Inspecione o seu lançador e copie as credenciais: walkme-launcher-id-xxxxxxx
2. No Editor, abra Configurações -> Editar CSS global
3. Na guia CSS, use a seguinte sintaxe:

   .walkme-launcher-id-xxxxxxx {
   
   transform: skew(Xdeg) !important;
   
   }

   Exemplo:
   .walkme-launcher-id-123456 {
   
   tranform: skewX(10deg) !important;
   
   }

4. Encontre mais exemplos de sintaxe para as propriedades 'transform' skew() e rotate() nos artigos a seguir:
   skew()
   rotate()

Atualizar o design do lançador personalizado

Caso de uso: você deseja atualizar alguns Lançadores personalizados de uma só vez, em vez de abrir cada um separadamente para economizar tempo.

1. Crie um Lançador de teste em um elemento aleatório na página.
2. Clique para alterar o Lançador.
3. Depois de entrar no menu de seleção de todos os seus Lançadores personalizados, você poderá atualizá-los um após o outro sem salvar o Lançador atual no qual você está trabalhando.
4. Depois de atualizar todos os Lançadores, você pode simplesmente cancelar o Lançador de teste no qual estava trabalhando - todas as alterações serão salvas nos seus Lançadores personalizados.

Ocultar o ícone da mão do Lançador Invisível Bloqueado

Desative o widget e use um lançador em vez disso

1. Desative o Widget indo para Personalizar > Personalizar Player > Widget e defina a exibição como Nenhuma:
2. Em seguida, você vai querer criar um Lançador para abrir o menu. Para fazer isso, você pode abrir o aplicativo Lançador no Editor e anexar o Lançador ao local onde deseja que ele apareça no aplicativo.
3. Além disso, você pode escolher o que deseja para seus Lançadores de Menu indo para Opções do Lançador -> Interação -> Alterar Lançador. A partir daqui, você pode escolher entre as imagens padrão do lançador, carregar sua própria imagem ou criar uma imagem do lançador no Editor.
4. Por fim, na guia Interação, certifique-se de configurar a ação para Abrir Menu. Você também pode escolher qual guia deve estar visível quando os usuários abrirem o menu pela primeira vez:
   

Transformar um Lançador em uma imagem

Adicione o seguinte CSS ao seu CSS global no Editor:

.walkme-launcher-id-xxxxx {

background-image: url(url.png) !important;

padding-top: 24px;

padding-right: 2px;

padding-bottom: 18px;

padding-left: 1px;

}

Veja a imagem abaixo para ver um exemplo.

Certifique-se de substituir a URL pela imagem de sua escolha e os xxx pelo seu ID do Lançador. Siga estas etapas para encontrar o ID exclusivo do Lançador:

1. Passe o mouse sobre os 3 pontos verticais à direita do Lançador
2. Clique em "Copiar ID" no menu suspenso.

Ocultar elementos no seu site com os Lançadores

Criar um Lançador de efeitos 3D

Adicionando animações e efeitos especiais aos lançadores

Para obter mais dicas, confira os vídeos da Dica de Terça-feira de Lançadores.