Creación de lanzadores avanzados

Breve descripción general

Conviértete en un creador experto de Decentralized Application (DAP) y cumple con los requisitos de creación que deseas. El siguiente artículo explica cómo lograr las tres opciones más solicitadas para la construcción del Launcher.

Crear un lanzador intermitente

1. Haz clic en "Personalizar"
2. Haz clic en la pestaña "CSS"
3. Pega el siguiente texto en la parte inferior del panel CSS y reemplaza las x con el ID del Launcher. Puedes encontrarlo pasando el cursor sobre los 3 puntos verticales junto al Launcher y haciendo clic en "Copiar ID".

   .walkme-launcher-id-xxxxxx .walkme-launcher-image-div {
        animation: scale-pulse 1.75s cubic-bezier(.39,.58,.38,.75) normal infinite forwards;
   }
   
   @keyframes scale-pulse {
     from {
       transform: scale(1.0);
               opacity: 1;
        }
     to {
       transform: scale(1.5);
           opacity: 1;
       }
   }

Crear un Launcher invisible.

Casos de uso:

• Iniciar un proceso una vez que el usuario haga clic en un elemento existente en tu sitio
• Ocultar/Impedir que se haga clic en un elemento existente en tu sitio
• Bloquear un botón para evitar una acción

Pasos para crear un lanzador invisible:

1. Haz clic en el lanzador que deseas que sea invisible
2. Haz clic en el botón "Cambiar lanzador" en la pestaña Interacción
3. Haz clic en "Personalizar" y crea/edita uno de los diseños del iniciador
4. Elimina el texto añadiendo un espacio en el campo de texto.
5. Simplemente haz clic en el botón del icono del iniciador invisible al editar un nuevo diseño de iniciador:

Crear un globo constante

Un globo permanecerá en pantalla mientras continúa el tutorial.

Caso de uso: quieres que un globo general permanezca en pantalla mientras el usuario rellena un formulario.

1. Crea un globo con el texto y el diseño que desees.
2. Convierte el globo en una imagen (Captura de pantalla-Pegar en Paint y editar - Guardar-Subir a S3).
3. Añade la imagen como iniciador. Y ubícalo donde se habría ubicado el globo.
4. Crea un WM-Data (datos de WM) en el que deseas que aparezca el globo en el recorrido guiado (Walk-Thru).
5. Añade los mismos datos de WM que anulan los anteriores donde deseas que el globo desaparezca.
6. Segmenta el "Lanzador de globos" para que aparezca solo cuando existan los datos de WM (datos de World Manager).
7. Haz que el lanzador compruebe las segmentaciones (frecuencia de las mismas).

Rotar/Inclinar un lanzador

Para que el lanzador se muestre en un ángulo, utiliza el CSS global.

1. Inspecciona el lanzador y copia sus credenciales: walkme-launcher-id-xxxxxxx
2. En el Editor, abre Configuración -> Editar CSS global
3. En la pestaña CSS, utiliza la siguiente sintaxis:

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

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

4. Encuentra más ejemplos de sintaxis para las propiedades de transform skew() y rotate() en los siguientes artículos:
   skew()
   rotate()

Crea un llamador de atención

Caso de uso: has cambiado el widget a un iniciador o tienes un iniciador importante.

1. Copia la URL del Captador de Atención (puedes utilizarla y luego copiarla del HTML).
2. Crea un nuevo iniciador y pega la URL del Captador de Atención en la línea de URL.
3. Crea un tutorial que se inicie automáticamente con los siguientes pasos (la frecuencia del inicio automático determinará las veces que se mostrará el Captador de Atención):

• • Retraso (Opcional pero recomendado)
  • Establecer datos de WalkMe
  • Paso invisible con un Spotlight (opcional: solo por diversión, para que el usuario centre su atención en el iniciador).

4. Crea una segmentación para el lanzador: aparecerá solo si existe WalkMe.

5. Configura el lanzador en "Fijación fuerte" y "Frecuencia de evaluación de segmentos".

Actualizar el diseño del lanzador personalizado

Caso de uso: quieres actualizar algunos lanzadores personalizados a la vez en lugar de abrir cada uno por separado para ahorrar tiempo.

1. Crea un lanzador de prueba en un elemento aleatorio de la página.
2. Haz clic para cambiar el lanzador.
3. Una vez que estés en el menú de selección de todos los lanzadores personalizados, puedes actualizarlos uno tras otro sin guardar el lanzador actual en el que estás trabajando.
4. Después de actualizar todos los lanzadores, puedes simplemente cancelar el lanzador de prueba en el que estabas trabajando; todos los cambios se guardarán en tus lanzadores personalizados.

Oculta el icono de mano del lanzador invisible que bloquea.

Desactiva el widget y utiliza un lanzador en su lugar.

1. Desactiva el Widget yendo a Personalizar > Reproductor > Widget y establece ninguna visualización:
2. A continuación, deberás crear un iniciador para abrir el menú. Para ello, puedes abrir la aplicación del iniciador en el Editor y colocar el iniciador donde deseas que aparezca en la aplicación.
3. Además, puedes elegir el tipo de iniciador de menús que deseas en Opciones del iniciador -> Interacción -> Cambiar iniciador. Desde aquí puedes elegir entre las imágenes predeterminadas del iniciador, cargar tu propia imagen o crear una imagen del iniciador dentro del Editor.
4. Por último, en la pestaña Interacción, asegúrate de configurar la acción para Abrir Menú. También puedes elegir qué pestaña deseas que sea visible cuando los usuarios abran el menú por primera vez:
   

Convertir un lanzador en una imagen

Añade el siguiente CSS a tu CSS global en el Editor:

.walkme-launcher-id-xxxxx {

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

padding-top: 24px;

padding-right: 2px;

padding-bottom: 18px;

padding-left: 1px;

}

Consulta la imagen a continuación como ejemplo.

Asegúrate de reemplazar la URL con la imagen de tu elección y los xxx (identificación del lanzador) con el ID del lanzador. Sigue estos pasos para encontrar el ID único del lanzador:

1. Pasa el cursor sobre los 3 puntos verticales a la derecha del lanzador
2. Haz clic en "Copiar ID" en el menú desplegable.

Oculta elementos en tu sitio con Launchers.

Crea un Launcher de efectos 3D.

Añade animaciones y efectos especiales a los Launchers.

Para más consejos, consulta los videos de Launchers Tip Tuesday.