Recorridos del producto y «Muéstremelo»

Mostrar en lugar de explicar: un recorrido del producto guía a sus visitantes paso a paso por su página. La página se oscurece ligeramente, un anillo resalta el elemento correspondiente y, a su lado, aparece una burbuja con su texto y los botones Zurück (atrás), Weiter (siguiente) y Beenden (finalizar).

Crear recorridos

En /app/projects/{id}, pestaña Textos y formularios, sección Recorridos del producto, introduzca sus recorridos como JSON. Si deja el campo vacío y guarda, se eliminan todos los recorridos.

[
  {
    "id": "erste-schritte",
    "name": "First steps",
    "steps": [
      { "selector": "#konto", "title": "Your account", "text": "Change your details here." },
      { "selector": ".rechnung", "text": "And the invoices are here.", "placement": "top" }
    ]
  }
]

Un recorrido tiene:

• id: obligatorio y único. Letras minúsculas, dígitos, - y _; empieza por una letra o un dígito, con un máximo de 48 caracteres. Se utiliza para iniciar el recorrido.
• name: un nombre para usted.
• steps: de 1 a 30 pasos.

Un paso tiene:

• selector: obligatorio. Un selector CSS para el elemento de su página, con un máximo de 300 caracteres.
• text: obligatorio. El texto de la burbuja.
• title: opcional, un encabezado.
• placement: bottom (predeterminado) o top. Es una preferencia, no una garantía: si la burbuja no cabe arriba, se coloca abajo.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende: rótulos propios opcionales para los botones Siguiente, Atrás, Listo y Finalizar.

Límites: un máximo de 20 recorridos por proyecto y 32 KB en total. Al guardar, su cuenta comprueba el JSON e indica el error si algo no es correcto.

Iniciar un recorrido

Los recorridos se inician desde su código, por ejemplo, mediante un botón «Iniciar recorrido» o después del primer inicio de sesión:

ReactiveChat('tour', 'erste-schritte');

La llamada devuelve true si el recorrido empieza; en caso contrario, false. Puede finalizarlo con:

ReactiveChat('tourStop');

El visitante finaliza un recorrido con Beenden, en el último paso con Fertig (listo), o con la tecla Escape. Un contador muestra en qué paso se encuentra.

Si falta un elemento

Si el widget no encuentra el elemento de un paso, por ejemplo, porque no existe en esa página o está oculto, omite el paso. Si faltan todos los elementos, el recorrido no se inicia y la llamada devuelve false. Por eso, compruebe sus selectores exactamente en la página donde inicie el recorrido.

Diseño

Los recorridos tienen un diseño fijo y neutro, independiente de los colores de su marca y de su CSS propio. La burbuja tiene un ancho máximo de 320 px. Sin rótulos propios, los botones se llaman «Beenden», «Zurück», «Weiter» y «Fertig» en todos los idiomas. Por tanto, para recorridos en páginas en inglés o polaco, establezca los campos i18n_* en cada paso.

«Muéstremelo»

En su respuesta, el asistente de IA puede señalar un control de su página, por ejemplo, el botón «Añadir al carrito». Para ello, tras abrir el chat por primera vez, el widget lee los controles visibles de la página actual.

• Si el elemento está claramente visible, un anillo lo resalta y muestra a su lado la primera frase de la respuesta. La ventana del chat permanece abierta.
• Si está tapado o el visitante utiliza un teléfono, aparece un botón Muéstremelo en el mensaje. Solo al pulsarlo se muestra el elemento.
• Cualquier toque, la tecla Escape o desplazarse fuera de esa zona finaliza la visualización.

El chat nunca se cierra por sí solo para esto.

Puede desactivar la lectura de la página y, con ella, «Muéstremelo» en el código de inserción:

data-rc-dom-spiegel="false"

Para excluir áreas concretas, márquelas con data-rc-private o data-rc-ignore. Más información en Conocimiento y fuentes.