Móvil: cómo utilizar el nuevo editor visual (solo para el SDK móvil v1.13.1+)

Breve descripción general

Puedes crear recorridos guiados en el modo avanzado de la aplicación o comenzar a crear ShoutOuts, Launchers y Encuestas haciendo clic en NUEVO en la pestaña MIS CAMPAÑAS de la consola móvil.

Una vez que hayas creado un Walk-Thru, hecho clic en NUEVO y seleccionado el tipo de campaña y la plantilla en la pestaña MIS CAMPAÑAS, o hecho clic en el icono de edición de una campaña ya existente, puedes crearlo o editarlo utilizando el Editor Visual del Asistente de Campañas en la pantalla EDITAR CAMPAÑA.

¡Aquí está el Editor Visual en toda su gloria!

Consejo útil: Esta es la Interfaz de Usuario del Editor Visual que ves al editar o diseñar un Launcher. El diseño difiere ligeramente según el tipo de campaña.

Comprensión del árbol de OBJETOS

Cada elemento del árbol de OBJETOS corresponde a un objeto que actualmente se encuentra en la pantalla de vista previa del dispositivo:

Personalización del lienzo de la campaña

El objeto raíz de cada campaña es el objeto lienzo, en el que se encontrarán todos los demás objetos de la campaña. Personaliza el lienzo según tu plan para la apariencia de tu campaña.

El objeto Canvas tiene cuatro pestañas de personalización:

• La pestaña FORMATO, para diseñar el lienzo en sí y asignarle una animación;
• La pestaña CLOSE BUTTON (solo se aplica a campañas de tipo ShoutOut y Walk-Thru) para permitir la aparición de un icono "X" en el lienzo;
• La pestaña SCREEN OVERLAY, para decidir si deseas que un efecto similar al reflector esté detrás del lienzo; y
• La pestaña TAMAÑO y POSICIÓN, donde puedes configurar el tamaño y la ubicación del lienzo en relación con la pantalla de la aplicación;

Al hacer clic en el objeto Lienzo de una campaña (ya sea en la pantalla de vista previa del dispositivo o en el árbol OBJETOS), comenzarás en la pestaña FORMATO predeterminada, donde puedes configurar el lienzo:

• Color;
• Opacidad (visibilidad; cuanto menor sea el porcentaje de opacidad, más se podrá ver a través del lienzo hasta el contenido de la aplicación en segundo plano).
• Radio de las esquinas (cuanto mayor sea el radio, más redondeadas serán las esquinas);
• Configuración de bordes;
• Configuración de animación. Las opciones de animación incluyen:
  • Instantáneo (donde el lienzo aparecerá instantáneamente);
  • Desvanece (donde el lienzo se desvanecerá); y
  • Deslizar (donde la campaña se deslizará hacia arriba, abajo, izquierda o derecha; la dirección es configurable); y
• Dirección del texto.

  

A continuación, haz clic en la pestaña CERRAR (si estás creando un ShoutOut o Walk-Thru; de lo contrario, omite este paso) y decide si quieres que los usuarios finales puedan hacer clic en una "X" para cerrar la campaña:

A continuación, haz clic en la pestaña SCREEN OVERLAY (Superposición de pantalla) y decide si quieres una superposición detrás de la campaña. Si es así, puedes personalizar la superposición:

• Color;
• Opacidad (visibilidad); y
• Acción (consulta la sección Acciones disponibles para botones, formas, listas y superposiciones a continuación).

Finalmente, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el tamaño y las unidades del lienzo, así como el posicionamiento en relación con la pantalla de la aplicación:

Comprender el TAMAÑO y la POSICIÓN

Si bien la forma más intuitiva de editar el tamaño y la posición de un objeto sigue siendo directamente desde la pantalla de vista previa del dispositivo (es decir, estirando y arrastrando objetos con el mouse), la pestaña TAMAÑO Y POSICIÓN es ideal para realizar ajustes cuando se requiere más precisión.

Además, la pestaña TAMAÑO Y POSICIÓN está pensada para permitirte crear campañas utilizando un diseño responsivo (capacidad de respuesta a las diferencias entre dispositivos con tamaños y orientaciones variables).

La pestaña se compone de hasta tres secciones: Reordenar, Tamaño y Posición:

También puedes bloquear la relación de aspecto de un objeto haciendo clic en el icono de candado:

1. Reordenar: aquí puedes alterar el orden de capas de un objeto en relación con otros objetos del lienzo.
   • En orden de aparición, los iconos significan 1) pasa a la capa más frontal, 2) avanza una capa, 3) mover una capa hacia atrás y 4) pasa a la capa más atrás.
2. Tamaño: aquí puedes seleccionar el tipo de tamaño, entre Relativo (%), Absoluto (pt — iOS y dp — Android) y Personalizado (una combinación de Relativo y Absoluto).
   • Relativo: Selecciona un valor porcentual para Anchura y Altura, y el objeto seguirá siendo este porcentaje de su objeto Canvas (padre) (la pantalla de la aplicación en el caso del Canvas, el Canvas en el caso de un objeto principal y un objeto principal en el caso de un subobjeto), independientemente de si el objeto Canvas (padre) crece o se contrae.
     • Por ejemplo, los objetos de botón que se encuentran dentro de una diapositiva de Carrusel son objetos secundarios de la diapositiva en la que se encuentran, ya que la diapositiva actúa como su objeto de lienzo (padre).
     • Si bloqueas la relación de aspecto de un elemento en el modo relativo, la altura se convertirá en "Automático", porque deberá ajustarse para mantener la relación de aspecto del objeto.
   • Absoluto: selecciona un valor pt o dp y el objeto seguirá siendo de este tamaño, independientemente del tamaño de su objeto Lienzo (padre).
     • Si bloqueas la relación de aspecto en Absoluto, cada vez que cambias uno de los valores de Anchura o Altura, el otro se actualizará automáticamente para preservar la relación de aspecto actual.
   • Personalizado: selecciona un valor pt / dp O % para Anchura y un valor pt / dp O % para Altura.
     • Útil si, por ejemplo, quieres que un botón mantenga la misma altura pero cambie su ancho en función del ancho de su lienzo.
   • Consejo profesional: si el objeto Lienzo no está establecido como relativo, no importa qué configuración de Tamaño elijas para sus objetos hijos, ya que el objeto Lienzo nunca cambiará de tamaño. Esto también se aplica a los objetos cuya posición se establece en % cuando el Lienzo se establece en Absoluto.
3. Posición: aquí puedes establecer la posición del objeto en relación con su objeto lienzo (padre). Puedes seleccionar entre Manual (donde debes considerar más factores, pero tienes más control sobre la posición exacta del objeto) y Automático (donde tienes un poco menos de control, pero debes configurar menos ajustes).
   • Manual:
     • Para Horizontal, establece un valor de porcentaje de hasta qué punto deseas que el objeto aparezca desde el lado izquierdo, el centro (la línea divisoria vertical) o el lado derecho del lienzo:

       

       • Puedes establecer un valor % positivo (a la derecha del valor de referencia) o negativo (a la izquierda del valor de referencia) seleccionado.
     • Para Vertical, establece un valor de porcentaje de hasta qué punto deseas que el objeto aparezca desde la parte superior, el centro (la línea divisoria horizontal) o la parte inferior de su objeto de lienzo:

       

   • Automático:
     • Automático es similar a Manual, excepto que cuando seleccionas Automático, perderás la capacidad de seleccionar un valor de referencia, y se colocará automáticamente por defecto en el Centro del Lienzo y el Medio del Lienzo, respectivamente, o en el borde de la pantalla si acoplas el objeto.
       • Simplemente coloca el objeto donde desees en la vista previa de la pantalla del dispositivo y el SDK de WalkMe Mobile intentará mantener este posicionamiento general, independientemente del tamaño u orientación del dispositivo.

Añadir nuevos OBJETOS a tu campaña

Cuando haces clic en el icono + que está encima de "AÑADIR NUEVO OBJETO" a la izquierda del Editor visual, verás un directorio OBJETOS que contiene todos los elementos que se pueden añadir a esa campaña en particular:

Añadir texto estándar a tu campaña

Arrastra el icono de texto del directorio OBJETOS al lugar donde desees que aparezca el texto en la pantalla de la aplicación y escribe el texto deseado en la pantalla de vista previa del dispositivo.

Al añadir o hacer clic en un objeto de texto, comenzarás en la pestaña FORMATO (por defecto), donde puedes configurar la fuente del texto (extraída de las fuentes disponibles en la aplicación), el tamaño de fuente, el color de fuente, la alineación del texto y el estilo:

A continuación, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el orden de capas del objeto de texto (similar al índice z), el tamaño y las unidades, y el posicionamiento en relación con el objeto Canvas:

Edición de texto estándar

Ahora puedes editar el texto del objeto de texto y botón, justo dentro de la pantalla de vista previa del dispositivo. Esto te facilitará ver cómo el texto que escribes encaja en la campaña:

Añadiendo texto enriquecido a tu campaña

Con WalkMe Mobile SDK v1.14.0 y superiores, los objetos de texto se pueden actualizar al tipo de objeto de Formato de texto avanzado ("ATF"). Para actualizar, haz clic en Formato avanzado en la pestaña FORMATO.

A diferencia de los objetos de texto simples, donde solo puedes establecer un solo formato para todo el objeto (es decir, si una palabra está en negrita, todas las palabras deben estar en negrita), los objetos ATF admiten establecer un formato diferente para cada carácter del objeto. Eso significa que puedes crear texto. objetos que parecen L i k e t h i s (pero solo si lo deseas).

ATF también admite la creación de párrafos, lo que significa que puedes crear saltos de línea para adaptar los textos a tus diseños.

El formateo de un objeto ATF se realiza desde la barra de herramientas que aparece sobre el objeto. Si la barra de herramientas se coloca en un lugar incómodo, puedes simplemente arrastrarla al área del Editor visual.

Dado que el formato se realiza por carácter, debes resaltar el carácter o los caracteres cuyo formato deseas editar dentro del objeto y solo entonces establecer las propiedades de formato deseadas.

En caso de que desees revertir la actualización a ATF (por ejemplo, si deseas admitir versiones anteriores del SDK), haz clic en el botón Borrar formato, en la pestaña FORMATO del panel izquierdo.

Añadir texto dinámico a tu campaña

Con WalkMe Mobile SDK v1.16.0 y superiores, las campañas se pueden personalizar aún más con contenido personalizado añadiendo texto dinámico relevante para el usuario final.

El texto dinámico está disponible en todos los objetos de Formato de texto avanzado ("objeto de texto actualizado").

Las opciones de variables dinámicas disponibles se pueden ver haciendo clic en el icono <A> en la barra de herramientas de Formato avanzado o simplemente escribiendo @ en un objeto de Formato de texto avanzado.

El texto dinámico se puede basar en variables predefinidas que existen en todas las aplicaciones:

• Versión de la aplicación
• Versión del sistema operativo
• Configuración regional del dispositivo
• Tipo de conexión

El texto dinámico también se puede basar en la información expuesta al SDK en los atributos del usuario (cada atributo del usuario añadido en la consola aparecerá en la lista) o la API de Identificador (a eso se refiere el ID del usuario en las opciones dinámicas predeterminadas).

Fuentes

Las fuentes disponibles para su uso se heredan de la aplicación de forma predeterminada y deben mostrarse como opciones en la consola cuando haces clic en el menú desplegable de fuentes. Si no ves las opciones enumeradas allí, intenta entrar en el modo de alimentación en la aplicación y tocar el icono azul de la aplicación. Luego actualiza la consola y vuelve a verificar. Las fuentes se extraen desde info.plist en iOS y desde la carpeta de activos de fuentes en Android.

Añadir imágenes a tu campaña

Arrastra el icono de Imagen del directorio OBJETOS a donde desees que aparezca la imagen en la pantalla de la aplicación.

Los formatos de imagen compatibles incluyen: png, jpg, jpeg, gif.

Selecciona la imagen deseada en la BIBLIOTECA DE RECURSOS o haz clic en + SUBIR NUEVO RECURSO para cargar una nueva foto en tu biblioteca e incluirla en tu campaña.

Para personalizar el formato, el tamaño y la posición de la imagen, haz clic en el objeto de imagen relevante en el árbol de OBJETOS y haz clic en la pestaña de personalización deseada a la izquierda (FORMATO o TAMAÑO Y POSICIÓN).

Al añadir o hacer clic en una imagen, la pestaña predeterminada será la pestaña FORMATO, donde puedes hacer lo siguiente:

• Cambia el archivo de imagen;
• Establece el nivel de opacidad de la imagen (es decir, hasta qué punto se puede ver a través de la imagen con respecto al fondo).
• Establece el radio de las esquinas de la imagen (cuanto más alto sea este valor, más redondeadas serán las esquinas de la imagen); y
• Establece la configuración de borde de la imagen:

A continuación, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el orden de capas del objeto de imagen (el cuadro en el que se encuentra la imagen) (similar al índice z), el tamaño y las unidades, y el posicionamiento en relación con el objeto Canvas:

Añadir botones a tu campaña

Arrastra el icono del botón del directorio OBJETOS a donde quieras que aparezca el botón en la pantalla de la aplicación.

Al añadir o hacer clic en un botón, la pestaña predeterminada será la pestaña Formato, donde puedes hacer lo siguiente:

• En la sección Acción, configura una acción que ocurrirá cuando un usuario final haga clic en este botón.
  • Consulta la sección Acciones disponibles para botones, formas, listas y superposiciones a continuación.
• En la sección Estilo del texto, establece la fuente, el tamaño de fuente, el color de fuente, la alineación del texto y el estilo.
• En la sección Estilo de botón, establece lo siguiente:
  • El nivel de opacidad del botón (es decir, hasta qué punto se puede ver a través del botón hacia el fondo).
  • El radio de las esquinas del botón (cuanto más alto sea este valor, más redondeadas serán las esquinas del botón); y
  • La configuración del borde del botón:

    

A continuación, haz clic en la pestaña Icono y marca la casilla de verificación si deseas añadir un icono al botón:

Finalmente, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el orden de capas del objeto botón (la casilla en la que se encuentra el botón) (similar al z-index), el tamaño y las unidades, y el posicionamiento en relación con el objeto Canvas:

Uso de un botón para convertir una imagen en un área en la que se puede hacer clic

Para convertir un botón en un área en la que se puede hacer clic, haz lo siguiente:

1. Arrastra el icono del botón a la pantalla de vista previa del dispositivo.
2. Colócalo sobre una imagen;
3. Redimensiona al tamaño de la imagen (aproximadamente);
4. mueve la Opacidad al 0% para que el botón sea transparente.
5. Asigna una acción al botón y esto creará la ilusión de que la acción está vinculada a la imagen subyacente:
   

Añadir formas a tu campaña

Arrastra el icono de forma desde el directorio OBJETOS a donde desees que la forma aparezca en la pantalla de la aplicación.

Al añadir o hacer clic en una forma, la pestaña predeterminada será la pestaña FORMATO, donde puedes hacer lo siguiente:

• En la sección Estilo de forma, establece el color de la forma, la opacidad (visibilidad), el radio de las esquinas (redondez de las esquinas) y la configuración de los bordes.
• En la sección Acción, establece una acción que se producirá cuando un usuario final haga clic en esta forma.
  • Consulta la sección Acciones disponibles para botones, formas, listas y superposiciones a continuación.

A continuación, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el orden de capas de la forma (similar al índice z), el tamaño y las unidades, y el posicionamiento en relación con el objeto Canvas:

Añadir listas a tus reconocimientos.

Las listas se utilizan principalmente al crear reconocimientos. Para obtener más información, consulta Cómo crear reconocimientos.

Añadir vistas web a tu campaña

Las vistas web se utilizan principalmente al crear ShoutOuts. Para obtener más información, consulta Cómo crear ShoutOuts.

Añadir carruseles a tu campaña

Los carruseles se utilizan principalmente al crear ShoutOuts. Para obtener más información, consulta Cómo crear ShoutOuts.

Acciones disponibles para botones, formas, elementos de lista y superposiciones.

El botón, el elemento y las acciones disponibles de la lista son las siguientes.

• Personalizado: un CTA positivo que enviará al usuario final a cualquier URL o enlace directo que introduzcas en el campo CTA.
  • La casilla de redirección interna debe estar marcada si estás añadiendo enlaces directos a la aplicación seleccionada actualmente en Android, y evita que aparezcan ventanas emergentes pidiendo a los usuarios que aprueben la navegación al enlace directo.
  • Una vez que se marque la casilla, verás un campo que debería completarse automáticamente con el nombre del paquete de la aplicación actual, con el formato com.company.app.XXX.
• OK: un CTA positivo que cuenta para la tasa de clics (CTR) de la campaña.
• Quizás: un CTA neutral (ni negativo ni positivo) que, cuando se hace clic, cerrará la campaña, pero hará que la campaña reaparezca en la pantalla del usuario final en un momento aleatorio en los siguientes 1-3 días.
  • Las campañas que reaparecen después de hacer clic en los CTAs QUIZÁS no cuentan para los límites de impresiones.
• Nunca: uno de dos CTAs negativos que cerrará la campaña y garantizará que el usuario final nunca vuelva a ver esta campaña.
• Cerrar: el segundo de dos CTAs negativos. Al hacer clic se cerrará la campaña, pero no afectará su comportamiento futuro hacia los usuarios finales (a diferencia del comportamiento de los CTAs NUNCA).
• Mostrar configuración: un CTA positivo que, una vez hecho clic, redirigirá al usuario final a la página de configuración de la aplicación a nivel del sistema operativo.
  • iOS: navega hasta Configuración. > Elige una aplicación de la lista.
  • Android: navega hasta Configuración > Aplicaciones. > Elige una aplicación de la lista.
• Campaña: un CTA positivo que vincula una campaña con otra.
  • Selecciona el nombre de la campaña en la lista desplegable.
  • Si la campaña seleccionada es una Guía Interactiva, puedes decidir en qué paso debe comenzar la campaña o elegir Automático (predeterminado) para dejar que el SDK decida.
  • Marca la casilla Redirigir Usuario e introduce una URL si deseas redirigir al usuario final a una página de aplicación diferente para comenzar la campaña.
• Enviar: un llamado a la acción positivo que envía una encuesta.
  • Solo aparece para los botones y las formas en la campaña de tipo encuesta.
• Siguiente diapositiva/diapositiva anterior: transfiere al usuario final entre las diferentes diapositivas de un carrusel.
  • Solo aparece para los botones y las formas en el widget del Carrusel.
• Siguiente paso/paso anterior: te lleva al siguiente paso o paso anterior de una Guía Interactiva.
  • Solo aparece para los botones y las formas en los recorridos guiados;
  • Solo se verá esta opción si el paso no es el final (para el "siguiente paso") o el primero (para el "paso anterior") en una pantalla.