Principios básicos

Acceso a la sección: /admin/retailer/widget

Autorizar un sitio web a utilizar los widgets

Antes de nada, debe declarar el o los sitios web autorizados a mostrar sus widgets. Se trata de una medida de seguridad: solo los dominios que haya añadido explícitamente podrán cargar y mostrar sus widgets. Esto evita que cualquiera copie su código y lo utilice en un sitio de terceros.

Puede añadir varios sitios: por ejemplo, su sitio de producción, un entorno de preproducción para pruebas, o incluso varios sitios de venta si distribuye sus productos en diferentes plataformas.

Formulario de suscripción al boletín

La opción «Mostrar el formulario de suscripción al boletín» (Sí / No) permite mostrar una casilla en el widget Carrito. Cuando un cliente marca esta casilla al realizar su compra, su consentimiento se registra en su base de clientes (columna «Newsletter: Sí/No»). Esto le permitirá alimentar una herramienta de marketing automation como Brevo para sus campañas de email marketing mediante exportación, o si la conexión se realiza directamente entre Tourbiz y su herramienta de marketing automation.

Una palabra para los desarrolladores: scripts vs iframes

Los widgets de Tourbiz no son iframes. Son scripts JavaScript que se inyectan directamente en el DOM de su página. Esto presenta varias ventajas importantes:

• Herencia del CSS: el widget adopta automáticamente los estilos de su sitio (fuentes, colores, botones…), garantizando una integración visual coherente sin capa adicional que gestionar.
• Interacción JavaScript nativa: el widget puede comunicarse con su página (eventos, tracking, analytics) como cualquier componente nativo.
• Sin problemas de altura dinámica: a diferencia de los iframes, la altura se adapta de forma natural al contenido sin JavaScript adicional.

Crear un widget

Widget Calendario

Este widget muestra un calendario de disponibilidades para un producto determinado, con selección de fecha, hora y cantidades.

Pasos:

1. Seleccione el tipo «Calendario» en el menú desplegable.
2. Elija el idioma de visualización.
3. Seleccione el producto correspondiente — aparecerá inmediatamente una vista previa a la derecha.
4. Indique la URL de la página del carrito (ej.: https://www.susitio.com/carrito). Esta URL es indispensable: es a esta página a la que se redirigirá al cliente después de hacer clic en «Añadir al carrito», y es allí donde debe integrarse el widget Carrito.
5. Copie el código generado e intégrelo en su página.

¿No encuentra el producto en la lista? Verifique que lo haya activado en la pestaña Venta en línea > API. Solo los productos activados en esta pestaña están disponibles a través de los widgets y la API. Esta activación voluntaria le permite mantener ciertos productos «fuera de línea» — no distribuibles en línea — conservándolos en su catálogo interno.

Widget Carrito

Este widget muestra el carrito de compra y permite al cliente finalizar su pedido.

Pasos:

1. Seleccione el tipo «Carrito».
2. Elija el idioma correspondiente a la página donde se integrará.
3. Copie el código generado y péguelo directamente en su página de carrito.

¡Eso es todo! El widget recupera automáticamente los artículos añadidos desde el widget Calendario.

Widget Usar un bono regalo

Este widget permite a sus clientes introducir la referencia de un bono regalo para utilizarlo en una compra.

Pasos:

1. Seleccione el tipo «Usar un bono regalo».
2. Elija el idioma.
3. Indique la URL de la página de confirmación (ej.: https://www.susitio.com/bonoregalocomprado). Esta URL es obligatoria: es la página a la que se redirigirá al cliente tras validar su bono regalo.
4. Copie el código generado e intégrelo en la página dedicada de su sitio.

Widget Lista de productos y calendario

Este widget combina una lista de productos y un calendario interactivo. Es ideal cuando desea ofrecer varios productos en una misma página y dejar que el usuario elija.

Funcionamiento:

• Se muestra una lista de productos a la izquierda.
• Cuando el usuario hace clic en un producto, el calendario de la derecha se actualiza automáticamente para mostrar las disponibilidades de ese producto.

Pasos:

1. Seleccione el tipo «Lista de productos y calendario».
2. Elija el idioma.
3. Seleccione los productos a incluir (selección múltiple posible).
4. Indique la URL de la página del carrito.
5. Copie el código generado e intégrelo en su página.

Resumen