Abre Tours del producto en el menú.

Un tour del producto muestra una burbuja junto a un botón, campo o menú real de tu web, paso a paso. Es ideal para dar la bienvenida a usuarios nuevos, explicar una novedad o guiar una configuración. Funciona en cualquier web o aplicación web con el Messenger instalado, incluidos productos SaaS para usuarios con sesión iniciada.

Crear un tour

Haz clic en Nuevo tour y ponle un nombre.
Añade tus pasos (hasta 10). Para cada paso:
- Elemento — haz clic en el cursor del campo. Tu web se abre en una ventana nueva; haz clic en el elemento que quieras y su selector se rellena solo. También puedes escribir un selector CSS. Déjalo vacío para un paso en el centro de la pantalla.
- Página (opcional) — la página del paso, por ejemplo /ajustes. Déjalo vacío para quedarte en la página actual.
- Posición de la burbuja — automática, o debajo, encima, a la derecha o a la izquierda del elemento.
- Título y texto — breves y claros. Puedes traducir cada paso; una traducción vacía muestra el texto en el idioma de tu espacio.
Elige tu color y cómo empieza el tour.

En la ventana de selección, usa Navegar por páginas para ir antes a otra página y luego Elegir.

Tours entre páginas

Da una Página a un paso y el tour lleva al visitante allí al llegar a ese paso, y continúa en la nueva página. El visitante puede avanzar y retroceder; el tour recuerda dónde estaba durante 30 minutos en esa pestaña. Las páginas deben estar en la misma web que el Messenger.

Cómo empieza un tour

Solo en las páginas que coincidan — elige las páginas y un retraso en Quién y cuándo. Cada persona lo ve una vez: no vuelve a empezar después de terminarlo o cerrarlo, y como mucho una vez al día si no lo terminó.
Solo desde tu página — inícialo con JavaScript, por ejemplo desde un enlace «Enséñame la web»:

Shopxare('startTour', 'ID_DEL_TOUR')

El editor muestra la línea exacta para copiar. Iniciado así, un tour siempre se puede repetir.

Pruébalo antes de publicarlo

En En tu web, escribe la dirección de tu página y haz clic en Vista previa en tu web. El tour se reproduce solo para ti, incluso como borrador, y no cuenta. El enlace de vista previa vale una hora.

Consejos para selectores estables

Los selectores basados en IDs o en tus propios atributos siguen funcionando aunque cambie el diseño. Añade un atributo data-tour a los elementos que quieras señalar:

<button data-tour="nuevo-proyecto">Nuevo proyecto</button>

y usa [data-tour="nuevo-proyecto"] como elemento. Si un elemento no aparece en 3 segundos, el paso se abre en el centro de la pantalla.

Resultados

Cada tour muestra cuántas personas lo vieron, lo terminaron y lo cerraron, contando a cada persona una vez. También puedes elegir una audiencia o segmento y fechas de inicio y fin.