O Framer cria sites como aplicações de página única (SPAs), o que altera o comportamento dos widgets incorporados. Saber isto de antemão evita os dois problemas mais reportados pelos estúdios: o widget não aparecer quando um visitante acede à página a partir de outra parte do site, e os pop-ups ficarem confinados a uma pequena caixa.
Antes de começar
Gere o código do seu widget no back office da bsport: Definições → Widgets, escolha o tipo de widget, configure as suas opções e, em seguida, role para baixo e copie o código. Sempre que altera uma definição, é gerado um novo código, e tem de colar a nova versão no seu site para que a alteração tenha efeito.
Método 1 — Componente Embed (rápido, com limitações)
Na área de trabalho do Framer, clique em Insert → procure por Embed
Arraste-o para a página
No painel à direita, escolha HTML e cole o código do seu widget
Redimensione a moldura e clique em Publish
O problema das aplicações de página única
O Framer não recarrega a página quando um visitante se move entre secções do seu site — substitui o conteúdo no local. Além disso, o componente Embed envolve o seu código num iframe, pelo que perde o controlo sobre o momento em que o script do widget é executado. O resultado: o widget pode aparecer vazio na primeira visita — especialmente em iOS (Safari e Chrome) — e só aparecer após uma atualização completa da página. Como funciona ao atualizar, o problema passa muitas vezes despercebido durante os testes.
⚠️ Se vir o widget ao atualizar mas não no primeiro carregamento ou ao navegar para a página, esta é a causa. A solução é substituir o componente Embed por um code component do Framer (Método 2 abaixo), que carrega o script do widget e monta o próprio widget sempre que a página é apresentada.
Método 2 — Code component (recomendado)
No Framer, abra o painel Assets e crie um novo code component.
Elimine o código predefinido e cole o código abaixo.
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>;
}No código do seu widget bsport, encontre o objeto dentro de
MountBsportWidget({ ... })e copie os seus valores (ID da empresa, tipo de widget, opções) para o objetoconfigabaixo.<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>Defina
WIDGET_IDcom o valor deparentElementdo código do seu widget (por exemplo,bsport-widget-441452).Elimine o antigo componente Embed da sua página e, em seguida, arraste o novo code component de Assets para a página no seu lugar.
Defina a largura e a altura do componente como Fill para que o widget não fique cortado ou oculto.
Clique em Publish e, em seguida, teste navegando para a página a partir de outra página do seu site e num iPhone — não apenas com uma atualização.
Porque é que isto funciona
Numa aplicação de página única, mover-se entre páginas não desencadeia uma atualização completa, pelo que os scripts incorporados — especialmente dentro de um iframe — podem não ser executados novamente. O code component carrega o script da bsport por si próprio e monta o widget diretamente no seu próprio contentor sempre que a página é apresentada, pelo que o widget é renderizado de forma fiável no primeiro carregamento, após navegar dentro do site e em visitas de regresso.
Resolução de problemas
O widget aparece ao atualizar mas não no primeiro carregamento ou ao navegar a partir de outra página.
O problema das aplicações de página única descrito acima. Mude para o Método 2.
Abre-se um pop-up mas fica cortado.
A limitação do iframe no Método 1. Mude para o Método 2.
O code component não mostra nada.
Verifique se o WIDGET_ID corresponde ao parentElement do código do seu widget, se o ID da empresa está correto e se o componente está definido como Fill.
As alterações feitas no back office não aparecem.
A configuração não se atualiza automaticamente no seu site. Copie o código recém-gerado e substitua completamente o antigo, depois publique novamente. Se utilizar o Método 2, atualize os valores no objeto config.
O widget tem um aspeto diferente da pré-visualização no back office.
Ative o Modo de Compatibilidade nas definições do seu widget e, em seguida, copie e cole o novo código.
Continua com dificuldades? Contacte a nossa equipa de suporte com o URL da página e uma captura de ecrã, e nós vamos analisar o caso.