Framer crea los sitios como aplicaciones de una sola página (SPA), lo que cambia el comportamiento de los widgets insertados. Conocer esto de antemano evita los dos problemas que los estudios reportan con más frecuencia: que el widget no aparezca cuando un visitante llega a la página desde otra parte del sitio, y que las ventanas emergentes queden confinadas a un cuadro pequeño.
Antes de empezar
Genera el código de tu widget en el back office de bsport: Configuración → Widgets, elige el tipo de widget, configura tus opciones y luego desplázate hacia abajo y copia el código. Cada vez que cambias una configuración se genera un nuevo código, y debes pegar la nueva versión en tu sitio para que el cambio surta efecto.
Método 1 — Componente Embed (rápido, con limitaciones)
En el lienzo de Framer, haz clic en Insert → busca Embed
Arrástralo a la página
En el panel derecho, elige HTML y pega el código de tu widget
Ajusta el tamaño del marco y pulsa Publish
El problema de las aplicaciones de una sola página
Framer no recarga la página cuando un visitante se mueve entre secciones de tu sitio: en su lugar, sustituye el contenido en el mismo sitio. Además, el componente Embed envuelve tu código en un iframe, por lo que pierdes el control sobre cuándo se ejecuta el script del widget. El resultado: el widget puede mostrarse vacío en la primera visita, especialmente en iOS (Safari y Chrome), y solo aparecer después de una recarga completa. Como funciona al recargar, el problema a menudo pasa desapercibido durante las pruebas.
⚠️ Si ves el widget al recargar pero no en la primera carga ni al navegar hacia la página, esta es la causa. La solución consiste en sustituir el componente Embed por un componente de código de Framer (Método 2 a continuación), que carga el script del widget y monta el propio widget cada vez que se muestra la página.
Método 2 — Componente de código (recomendado)
En Framer, abre el panel Assets y crea un nuevo componente de código.
Elimina el código predeterminado y pega el código siguiente.
import { useEffect } from "react";// Replace with the parentElement value from your bsport widget code
const WIDGET_ID = "bsport-widget-XXXXXX";export default function BsportWidget() {
useEffect(() => {
// Copy these values from your bsport widget code
const config = {
parentElement: WIDGET_ID,
companyId: 1234, // replace with your company ID
franchiseId: null,
dialogMode: 1,
widgetType: "calendar",
showFab: false,
fullScreenPopup: false,
styles: undefined,
config: {
calendar: {},
},
}; const widgetScriptId = "bsport-widget-cdn"; const loadScript = () => {
return new Promise((resolve, reject) => {
if (window.BsportWidget) {
return resolve("already loaded");
}
const existingScript = document.getElementById(widgetScriptId);
if (existingScript) {
existingScript.addEventListener("load", resolve);
existingScript.addEventListener("error", reject);
return;
}
const script = document.createElement("script");
script.id = widgetScriptId;
script.src = "https://cdn.bsport.io/scripts/widget.js";
script.async = true;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}; const mountWidget = (config, repeat = 1) => {
if (repeat > 50) return;
if (!window.BsportWidget) {
return setTimeout(() => mountWidget(config, repeat + 1), 100 * repeat);
}
// Avoid mounting twice
if (document.getElementById(WIDGET_ID)?.hasChildNodes()) {
return;
}
// Clear a previous registration so the widget can mount again
const list = window.BsportWidget.el_list_id;
if (list?.includes(WIDGET_ID)) {
list.splice(list.indexOf(WIDGET_ID), 1);
}
window.BsportWidget.mount(config);
}; loadScript()
.then(() => mountWidget(config))
.catch(console.error);
}, []); return <div id={WIDGET_ID}></div>;
}En el código de tu widget de bsport, busca el objeto dentro de
MountBsportWidget({ ... })y copia sus valores (ID de empresa, tipo de widget, opciones) en el objetoconfigde abajo.<script>
...
</script>
<script>
MountBsportWidget({
"parentElement": "bsport-widget-441452",
"companyId": companyId,
"franchiseId": null,
"dialogMode": 1,
"widgetType": "calendar",
"showFab": false,
"fullScreenPopup": false,
"styles": undefined,
"config": {
"calendar": {
}
}
});
</script>Define
WIDGET_IDcon el valor deparentElementdel código de tu widget (por ejemplo,bsport-widget-441452).Elimina el antiguo componente Embed de tu página y, en su lugar, arrastra el nuevo componente de código desde Assets hacia la página.
Ajusta el ancho y el alto del componente a Fill para que el widget no quede recortado ni oculto.
Pulsa Publish y prueba navegando hacia la página desde otra página de tu sitio y desde un iPhone, no solo con una recarga.
Por qué funciona
En una aplicación de una sola página, moverse entre páginas no provoca una recarga completa, por lo que los scripts insertados, especialmente dentro de un iframe, pueden no volver a ejecutarse. El componente de código carga el script de bsport por sí mismo y monta el widget directamente en su propio contenedor cada vez que se muestra la página, de modo que el widget se renderiza de forma fiable en la primera carga, al navegar dentro del sitio y en visitas posteriores.
Solución de problemas
El widget aparece al recargar pero no en la primera carga ni al navegar desde otra página.
Es el problema de las aplicaciones de una sola página descrito anteriormente. Cambia al Método 2.
Se abre una ventana emergente pero aparece cortada.
Es la limitación del iframe en el Método 1. Cambia al Método 2.
El componente de código no muestra nada.
Comprueba que WIDGET_ID coincide con el parentElement del código de tu widget, que el ID de empresa es correcto y que el componente está configurado como Fill.
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 sustituye completamente el anterior, luego vuelve a publicar. Si usas el Método 2, actualiza los valores dentro del objeto config en su lugar.
El widget se ve diferente a la vista previa del back office.
Activa el Modo de compatibilidad en la configuración de tu widget y luego copia y pega el nuevo código.
¿Sigues sin poder resolverlo? Ponte en contacto con nuestro equipo de soporte indicando la URL de la página y una captura de pantalla, y lo revisaremos.