Móvil: Cómo construir ShoutOuts.
Pasos para construir un ShoutOut.
Construcción del esqueleto de ShoutOut.
Sigue estos pasos para crear el esqueleto básico de ShoutOut:
- Selecciona cualquiera de las plantillas existentes de ShoutOut en la galería de plantillas o utiliza la plantilla "Blank".
- Utiliza el Asistente de Campañas para personalizar la interfaz de usuario de ShoutOut.
- WYSIWYG heredado: si el lienzo de un ShoutOut está configurado para tener una tapa posterior (en la configuración de elementos de Canvas), se tratará como una llamada a la acción del tipo QUIZÁS al descartar el ShoutOut tocando la tapa posterior.
- Nuevo WYSIWYG: En el nuevo editor WYSIWYG, la cubierta posterior ahora se denomina "superposición de pantalla". Si el lienzo de ShoutOut está configurado para tener una superposición de pantalla (en la pestaña Superposición de Pantalla), descartar el ShoutOut tocando la superposición de pantalla se tratará como una acción del tipo que elijas.
Añadir objetos de Vista-Web a ShoutOuts
El ShoutOut es el tipo de campaña principal en el que se utilizan elementos de visualización web. Las vistas web en ShoutOuts pueden representar encuestas web, videos u otros recursos externos en la interfaz de usuario de la aplicación anfitriona.
Arrastra el icono de Web-View del directorio OBJETOS a donde sea que desees, para que aparezca la vista web en la pantalla de la aplicación.
Al añadir o hacer clic en una vista web, la pestaña predeterminada será la pestaña FORMATO, donde puedes hacer lo siguiente:
- Introduce la URL de la vista web que deseas que aparezca en la campaña.
- Introduce una Dismiss URL (la URL que, cuando se alcanza, hará que la campaña se descarte/cierre automáticamente sin la necesidad de que el usuario final realice ninguna otra acción):
Pasos 1 y 2: haz clic en Web-View e introduce la URL deseada (OBLIGATORIO) y Dismiss URL (OPCIONAL).
A continuación, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el orden de capas de las vistas web (similar a z-index), el tamaño y las unidades, y el posicionamiento en relación con el objeto Canvas:
Los elementos de vista web admiten encuestas basadas en Google Forms y videos en streaming. Se puede proporcionar soporte para vídeo en línea utilizando un script de S3 (ponte en contacto con el equipo de WalkMe Mobile para consultar).
Añadir widgets de Carrusel a ShoutOuts
Los carruseles son widgets u objetos complejos compuestos por otros objetos simples, cada uno de los cuales se puede configurar. Los widgets de Carrusel son los más adecuados para ser utilizados en ShoutOuts, aunque también se pueden utilizar en otros lugares (por ejemplo, en Encuestas para una mejor interfaz de usuario con varias preguntas).
Arrastra el icono del carrusel del directorio OBJECTS a donde sea que aparezca en la pantalla de la aplicación.
Solo puedes añadir un objeto de Carrusel por lienzo.
Configuración principal del widget (Carrusel).
Al añadir o hacer clic en un icono de Carrusel, el objeto predeterminado será el widget principal (Carrusel) y la pestaña predeterminada será la pestaña FORMATO, donde puedes configurar los siguientes ajustes globales:
- El número de subobjetos (diapositivas) que aparecen en el carrusel;
- El número predeterminado es tres y el número máximo es diez.
- También puedes añadir nuevas diapositivas desde el menú del botón derecho o haciendo clic en la pestaña azul en el lado derecho del objeto:
- Si se deben mostrar o no los indicadores de diapositivas (puntos en la parte inferior de cada diapositiva que muestran en qué diapositiva se encuentra actualmente y cuántas diapositivas hay en total).
- Estos indicadores son clicables para navegar entre las diapositivas durante el proceso de creación de contenido y para los usuarios finales de la aplicación.
- También puedes navegar entre las diapositivas haciendo clic en las alas azules que aparecen en los lados derecho e izquierdo de una diapositiva cuando pasas el cursor sobre ella en la pantalla de vista previa del dispositivo, o simplemente haciendo clic en un objeto Diapositiva en el árbol OBJETOS.
- Si se permite o no la navegación entre diapositivas utilizando una acción de deslizar el dedo en la pantalla de la aplicación:
Pasos 1 y 2: haz clic en el Carrusel 1 y configura las propiedades globales del carrusel.
A continuación, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el orden de capas del carrusel (similar a z-index), el tamaño y las unidades, y el posicionamiento en relación con el objeto Canvas:
Configuración de subobjetos (Diapositiva)
Una vez que hayas terminado de configurar los ajustes del carrusel global, haz clic en uno de los subobjetos (iconos de diapositiva) para configurar tu subobjeto individual.
Debido a que la configuración del tamaño y la posición de las diapositivas se configuran en el objeto Carrusel, solo hay una pestaña, la pestaña FORMATO, con una sección llamada Estilo de fondo de diapositivas, donde puedes configurar lo siguiente:
- Color de fondo de la diapositiva individual;
- El nivel de opacidad (visibilidad) de la diapositiva individual;
- El radio de las esquinas individuales de la diapositiva (cuanto más alto sea el radio de las esquinas, más redondeadas serán las esquinas de la diapositiva); y
- Si la diapositiva individual tiene un borde y, de ser así, el color y el radio del borde:
Pasos 1 y 2: haz clic en el icono de una diapositiva y configura las propiedades individuales de la diapositiva.
Puedes añadir cualquier otro objeto del directorio Objetos a una diapositiva. ¡Pruébalo!
Añadir listas a tus anuncios destacados
Los widgets de lista solo se pueden utilizar en campañas del tipo anuncios destacados.
Arrastra el icono de Lista del directorio OBJETOS a donde quieras que aparezca la lista en la pantalla de tu aplicación.
Las listas, al igual que los carruseles, son widgets o objetos complejos compuestos por otros objetos simples, cada uno de los cuales se puede configurar:
Configuración del objeto principal (Lista)
Al añadir o hacer clic en una lista, el objeto predeterminado será el objeto principal y la pestaña predeterminada será la pestaña FORMATO, donde se pueden configurar los siguientes ajustes globales:
- En la sección Estilo general del texto, establece lo siguiente:
- Fuente de texto general global;
- Tamaño de fuente de texto global;
- Color de fuente de texto global;
- Alineación global del texto; y
- Estilo.
- En la sección Estilo de elementos de lista, establece lo siguiente:
- Color de fondo global;
- Opacidad (visibilidad);
- Altura de los elementos de lista (la altura de cada rectángulo que contiene el texto de la lista; esto es importante cuando se añaden elementos adicionales a la lista y se desea que sean visibles sin desplazarse); y
- Si hay líneas divisorias entre los subobjetos.
- En la sección Icono, establece lo siguiente:
- Decide si quieres que aparezca un icono junto a cada elemento de la lista y, de ser así, qué icono:
Pasos 1-4: haz clic en la lista, elige la configuración deseada de Estilo de texto, Estilo de elementos de lista e Iconos. Estas son configuraciones globales que se aplicarán a cada uno de los subobjetos, a menos que los configures por separado.
- Decide si quieres que aparezca un icono junto a cada elemento de la lista y, de ser así, qué icono:
A continuación, haz clic en la pestaña FORMATO DE SECCIONES, que se aplica a las secciones que añades a tu lista. Aquí puedes configurar los siguientes ajustes globales:
- En la sección Título de la sección, establece la fuente global del texto de toda la lista, el tamaño de la fuente del texto de la sección, el color de la fuente del texto de la sección, la alineación del texto de la sección y el estilo.
- En la sección Fondo, establece el color de fondo de la sección, el nivel de opacidad (visibilidad) y la altura:
Pasos 5-7: haz clic en FORMATO SECCIONES y configura el título, el fondo y el icono de las secciones según tus preferencias. Estos ajustes son globales (se aplicarán a todas las secciones de la lista).
Finalmente, haz clic en la pestaña TAMAÑO Y POSICIÓN, donde puedes configurar el orden de capas de la lista (como unidad) (similar al índice z), el tamaño y las unidades, el posicionamiento relativo al objeto Canvas y el tamaño de los elementos de la lista:
Configuración de subobjetos (elemento de lista).
Si bien tres elementos de lista y cero secciones son el predeterminado para las listas, puedes añadir elementos y secciones adicionales a la lista con el menú del botón derecho o haciendo clic en la pestaña azul a la derecha de la lista:
Una vez que hayas terminado de configurar la configuración de la lista global, haz clic en uno de los subobjetos (iconos de elementos de lista) para configurar tus subobjetos individuales.
Solo hay una pestaña, la pestaña FORMATO, desde donde puedes configurar lo siguiente:
- En la sección Acción, establece una acción que se producirá cuando un usuario final haga clic en este subobjeto individual.
- Consulta la sección Acciones disponibles para botones, formas, listas y superposiciones en el nuevo artículo sobre WYSIWYG.
- En la sección Fuente, configura el color de fuente del subobjeto individual.
- En la sección Fondo, configura el color de fondo y la opacidad (visibilidad) del subobjeto individual.
- En la sección Icon, decide si quieres que aparezca un icono junto a cada subobjeto y, de ser así, qué icono, su tamaño y posicionamiento:
Pasos 1-5: haz clic en el elemento de la lista, elige la acción deseada, el color de fuente, el color de fondo y la opacidad, así como la configuración de iconos. Estas son configuraciones individuales que anularán las configuraciones globales que has establecido en esta lista, pero solo para este elemento individual de la lista.
Listas de incorporación
A partir de la versión 1.17.0 del SDK en adelante, puedes añadir listas de incorporación a tus ShoutOuts para mostrar a tus usuarios su progreso cuando completan diferentes objetivos dentro de la aplicación.
Este nuevo tipo de widget, que solo está disponible en las campañas de ShoutOut, abre la puerta a nuevos casos de uso que puedes crear con WalkMe Mobile, que incluyen:
- Gamificación para la incorporación: alienta a los usuarios a completar el 100% de su incorporación.
- Formación estructurada: permite que los usuarios realicen un seguimiento de los procesos que ya han revisado y completado.
- Medición del progreso de las acciones de los usuarios en la aplicación: ayuda a los usuarios a realizar un seguimiento de su progreso en procesos complejos.
- Lista de tareas pendientes: marca los elementos de la lista de usuarios a medida que los completan.
El widget de lista de incorporación está disponible para las campañas de ShoutOut y es bastante similar al widget estándar "Lista", pero lo que lo hace diferente es su capacidad para realizar un seguimiento de la finalización de los elementos de la lista, verificando si los usuarios han alcanzado o no el objetivo relacionado con cada elemento de la lista. Una vez que se alcance un objetivo relacionado con un elemento (independientemente de la interacción del usuario con la campaña de incorporación), este elemento se marcará como "Hecho" y la barra de progreso de la lista progresará en consecuencia.
El widget de la lista de incorporación en el editor WYSIWYG tiene algunas propiedades únicas (en comparación con el widget estándar "Lista"). Utiliza estas propiedades para personalizar y controlar la lista de incorporación según tus necesidades:
Icono de completado:
Si la lista de incorporación de usuarios está configurada para mostrar iconos para los elementos de la lista (pestaña Formatear elementos en el objeto de lista), podrás establecer un icono diferente para los elementos en su estado "Listo":
Para ver el estado "Listo" de cada elemento, puedes hacer clic derecho en el elemento y seleccionar la opción "Mostrar el estado 'Listo'.
Pestaña de progreso:
Aquí se personalizan los indicadores de progreso de la lista: el formato del texto de progreso y el diseño de la barra de progreso.
Propiedad del objetivo:
Cada elemento de la lista tiene una propiedad Objetivo que, cuando se alcanza, hará que el elemento se marque como "hecho".
Además de las propiedades relacionadas con el progreso, puedes seleccionar para mostrar elementos específicos de la lista de incorporación de usuarios en su estado "Listo" en el WYSIWYG, haciendo clic derecho en el elemento o haciendo clic en el botón del menú contextual junto al elemento:
En el estado "Listo", puedes previsualizar el icono "Listo" del elemento y cómo luce el elemento cuando se marca como completado en la lista.