Ir al contenido principal

Cómo integrar un widget de bsport en Wix

Guía paso a paso para añadir un widget de bsport a un sitio de Wix, por qué el elemento Embed HTML causa problemas y el método recomendado d

Wix ofrece dos formas de añadir un widget de bsport a tu sitio. Ambas funcionan, pero se comportan de forma muy diferente, y la que Wix sugiere primero es la que provoca la mayoría de los problemas que reportan los estudios. Este artículo te guía por ambos métodos, explica las limitaciones de Wix detrás de esos problemas y muestra cómo evitarlos.

¿Prefieres que lo configuremos nosotros? El método recomendado (Método 2) consiste en añadir código personalizado a tu sitio de Wix. Si quieres que lo implementemos, contacta con el soporte de bsport y envíanos una invitación de colaborador a tu sitio de Wix (en Wix: Settings → Roles & Permissions). Nosotros nos encargamos del resto.

Antes de empezar

Genera el código de tu widget en el back office de bsport: Settings → Widgets, elige el tipo de widget, configura tus opciones y luego desplázate hacia abajo y copia el código. Cada vez que cambias un ajuste se genera un código nuevo, y debes pegar la nueva versión en tu sitio para que el cambio surta efecto.

Método 1 — Elemento Embed HTML (rápido, con limitaciones)

  1. En el editor de Wix, haz clic en Add Elements → Embed Code → Embed HTML

  2. Arrastra el elemento a la página donde quieras colocar el widget

  3. Haz clic en Enter Code y pega el código de tu widget

  4. Ajusta el tamaño del elemento tanto en modo escritorio como en modo móvil y haz clic en Publish

Qué debes saber antes de elegir este método: el iframe

Wix coloca automáticamente todo lo añadido con el elemento Embed HTML dentro de un iframe, un marco de tamaño fijo que no crece con su contenido. Así es como está construido Wix, no algo propio del widget, y esto provoca cuatro problemas recurrentes:

  • El widget queda confinado a una caja de tamaño fijo. No puede crecer más allá del tamaño que le asignes al elemento, ni adaptarse a su entorno, aunque el propio widget sea responsive.

  • El scroll falla en móvil y tablet. Si el contenido es más alto que el marco, a menudo los visitantes no pueden desplazarse para llegar a él: un gesto táctil dentro de un iframe de altura fija normalmente lo capta la página en lugar del marco. Este es el síntoma que más se reporta.

  • Las ventanas emergentes y los cuadros de diálogo quedan atrapados. El detalle de una sesión o el cuadro de diálogo de finalizar compra solo puede cubrir el marco, no la página, por lo que puede aparecer cortado.

  • El seguimiento (tracking) no llega a tu página. Los eventos que envía el widget se quedan dentro del marco, así que Google Tag Manager u otras herramientas de analítica de tu sitio Wix no podrán verlos.

Si te encuentras con alguno de estos problemas, te recomendamos usar el Método 2.

Calendario en Wix: mantén el elemento Embed HTML y corrígelo

Si estás añadiendo el widget de calendario y quieres conservar el elemento Embed HTML —por ejemplo, para poder seguir colocándolo arrastrándolo en el editor de Wix—, puedes corregir sus dos principales problemas de iframe con algunos scripts adicionales:

  • que el calendario se corte cuando cambia su altura (por ejemplo, al cambiar de semana)

  • que las ventanas emergentes de reserva y descripción se abran demasiado arriba o demasiado abajo respecto a la pantalla del visitante

Esta opción requiere un dominio conectado y un plan premium de Wix. No hace que los eventos del widget sean visibles para Google Tag Manager; para eso, usa el Método 2.

Método 2 — Custom Code (recomendado)

Este método coloca el widget directamente en la página en lugar de en un marco. Así, el widget se expande hasta su altura natural, se desplaza junto con la página, abre los cuadros de diálogo sobre la página completa, y sus eventos son visibles para tu seguimiento (tracking).

Importante: los widgets añadidos de esta forma no se mueven arrastrándolos. El widget no aparece como un elemento en el editor de Wix, por lo que no puedes arrastrarlo ni cambiar su tamaño ahí. En su lugar, su posición se define en el código: indicas en el código en qué sección de la página debe colocarse el widget (el targetSelector, que se explica más abajo). Para mover el widget más adelante, cambia ese valor en el código.

Pasos

  1. Ve a tu panel de Wix → Settings → Custom Code

  2. Haz clic en Add Custom Code

  3. Pega el código de abajo, después de reemplazar los valores descritos en Valores a reemplazar

  4. En Add Code to Pages, elige la página específica en lugar de todas las páginas

  5. Configura Place Code in como Body - end

  6. Ponle un nombre que reconozcas más adelante, luego haz clic en Apply y en Publish

El código

<script>
(function() {
'use strict';

// ─── SHARED CDN LOADER ───
function loadCDN() {
if (!window._bsportCDNPromise) {
window._bsportCDNPromise = new Promise((resolve) => {
if (window.BsportWidget) return resolve();
if (!document.getElementById('bsport-widget-cdn')) {
const script = document.createElement('script');
script.id = 'bsport-widget-cdn';
script.src = 'https://cdn.bsport.io/scripts/widget.js';
script.onload = resolve;
document.head.appendChild(script);
} else {
const interval = setInterval(() => {
if (window.BsportWidget) { clearInterval(interval); resolve(); }
}, 100);
}
});
}
return window._bsportCDNPromise;
}

// ─── WAIT FOR ELEMENT WITH RETRY ───
function waitForElement(selector, timeout = 15000) {
return new Promise((resolve) => {
// 1. Check immediately
const found = document.querySelector(selector);
if (found) return resolve(found);

// 2. Otherwise observe DOM changes
const observer = new MutationObserver(() => {
const el = document.querySelector(selector);
if (el) {
observer.disconnect();
clearTimeout(timer);
resolve(el);
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});

// 3. Fallback timeout
const timer = setTimeout(() => {
observer.disconnect();
resolve(null);
}, timeout);
});
}

// ─── REUSABLE WIDGET FACTORY ───
function createBsportWidget({ containerId, widgetType, targetSelector, config }) {
let mounted = false;
let mountAttempts = 0;
const maxMountAttempts = 5;

async function addContainer() {
const existing = document.getElementById(containerId);
if (existing) {
return true;
}

const parentContainer = await waitForElement(targetSelector, 15000);
if (!parentContainer) {
return false;
}

const container = document.createElement('div');
container.id = containerId;
parentContainer.appendChild(container);
return true;
}

function mountWidget() {
if (mounted) return;

mountAttempts++;
if (mountAttempts > maxMountAttempts) {
return;
}

loadCDN().then(() => {
const container = document.getElementById(containerId);
if (!container) {
setTimeout(mountWidget, 500);
return;
}

if (typeof window.BsportWidget?.mount !== 'function') {
setTimeout(mountWidget, 500);
return;
}

try {
window.BsportWidget.mount({
parentElement: containerId,
companyId: 1234, // REPLACE with your company ID
franchiseId: null,
dialogMode: 1,
widgetType,
showFab: false,
fullScreenPopup: false,
styles: undefined,
config
});
mounted = true;
} catch (e) {
mounted = false;
setTimeout(mountWidget, 500);
}
});
}

function init() {
async function start() {
const added = await addContainer();
if (added) mountWidget();
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => setTimeout(start, 3000));
} else {
start();
}
}

init();
}

// ─── WIDGET INSTANCES ───
createBsportWidget({
containerId: 'bsport-widget-planning', // REPLACE with a name of your choice
targetSelector: 'main[id="PAGES_CONTAINER"] section > div:nth-child(2) > div', // REPLACE with the section where the widget should appear
widgetType: 'calendar', // REPLACE with your widget type
config: { // REPLACE with the config from your widget code
calendar: {
}
}
});

})();
</script>

Valores a reemplazar

  • companyId — reemplaza 1234 por tu ID de empresa de bsport. Lo encontrarás en el código del widget generado en tu back office.

  • containerId — cualquier nombre que prefieras para el contenedor del widget, por ejemplo bsport-widget-planning. Usa un nombre distinto para cada widget en la misma página.

  • widgetType — el tipo de widget que quieres mostrar, por ejemplo calendar. Cópialo de la línea widgetType del código de tu widget en el back office.

  • targetSelector — dónde aparece el widget en la página. Es un selector CSS que apunta a la sección en la que se añade el widget. Para encontrarlo, abre tu página publicada en Chrome, haz clic derecho en la sección donde quieras colocar el widget, elige Inspect, y luego haz clic derecho en el elemento resaltado y elige Copy → Copy selector. Esto sustituye al arrastrar y soltar: para mover el widget, cambia este valor.

  • config — las opciones del widget. Copia el objeto config del código de tu widget en el back office para que el widget conserve los filtros y las opciones de visualización que elegiste.

Para mostrar más de un widget, añade otro bloque createBsportWidget({ ... }) debajo de WIDGET INSTANCES, con su propio containerId, targetSelector, widgetType y config.

Si el widget no aparece donde quieres, o prefieres no editar código, contacta con el soporte de bsport y lo configuraremos por ti.

Comparación de los dos métodos

Elemento Embed HTML (arrastrar y soltar)

  • Fácil de colocar visualmente en el editor de Wix

  • Sujeto a todas las limitaciones del iframe mencionadas arriba

  • Adecuado para un widget corto y de altura fija en escritorio

Custom Code (inyectado en el body)

  • Sin iframe: el widget se expande libremente y se desplaza junto con la página

  • Los cuadros de diálogo se abren sobre la página completa

  • Los eventos de seguimiento llegan a tu sitio

  • Sin arrastrar y soltar: la posición se define en el código con targetSelector

Añadir el botón de inicio de sesión a tu encabezado

El widget del botón de inicio de sesión de bsport no se puede añadir a un encabezado de Wix arrastrándolo: los encabezados de Wix no aceptan en absoluto el elemento Embed HTML.

Aun así, se puede hacer con el Método 2. Al inyectar el código del botón de inicio de sesión en el body de la página mediante Settings → Custom Code, se coloca en el encabezado sin el contenedor iframe. Como esto implica posicionar el botón en el código, normalmente lo configuramos nosotros; consulta Cómo podemos ayudarte más abajo.

Solución de problemas

Los visitantes no pueden desplazarse por todo el contenido en móvil.
Esta es la limitación del iframe descrita más arriba. Cambia al Método 2.

Se abre una ventana emergente pero aparece cortada.
El widget está dentro de un iframe. Cambia al Método 2, o, para el widget de calendario, consulta Calendario en Wix más arriba.

Google Tag Manager no detecta los eventos del widget.
Los eventos no pueden salir del iframe. Cambia al Método 2.

El widget no aparece con el Método 2.
Comprueba que targetSelector apunte a una sección que exista en esa página, que el ID de empresa sea correcto, y que el código esté asignado a la página correcta en Add Code to Pages.

Los cambios realizados en el back office no se muestran.
La configuración no se actualiza automáticamente en tu sitio. Copia el código recién generado y reemplaza por completo el anterior. Con el Método 2, actualiza en su lugar los valores de widgetType y config en tu código personalizado.

El widget se ve diferente a la vista previa del back office, o no responde a los clics.
Activa Compatibility Mode en la configuración de tu widget, y luego copia y pega el nuevo código.

No aparece nada en absoluto.
Comprueba que el widget no se haya añadido dos veces, tanto con un elemento Embed como con Custom Code. Dos copias en una misma página entrarán en conflicto.

El diseño se ve apretado.
El widget es responsive, pero necesita espacio. Asegúrate de que la sección que lo contiene sea lo bastante ancha, y revisa por separado la vista móvil en el editor de Wix.

Cómo podemos ayudarte

Cambiar al método Custom Code implica hacer cambios dentro de tu sitio de Wix: añadir o editar código en Settings → Custom Code, y a veces ajustar el diseño o el estilo de la página. Si prefieres que nos encarguemos nosotros, con gusto podemos:

  • Sacar un widget existente del iframe para solucionar problemas de scroll y de ventanas emergentes

  • Añadir el botón de inicio de sesión a tu encabezado mediante Custom Code

  • Ajustar el tamaño, la colocación y el desbordamiento del widget

  • Guiar a tu desarrollador web a lo largo de la implementación

Para hacerlo, necesitamos una invitación de colaborador a tu sitio de Wix (en Wix: Settings → Roles & Permissions). Contacta con nuestro equipo de soporte y nosotros nos encargamos del resto.

¿Sigues atascado? Contacta con nuestro equipo de soporte con la URL de la página y una captura de pantalla, y lo revisaremos.

¿Ha quedado contestada tu pregunta?