O Wix oferece duas formas de adicionar um widget bsport ao seu site. Ambas funcionam, mas comportam-se de forma muito diferente — e a que o Wix sugere primeiro é a que está por trás da maioria dos problemas relatados pelos estúdios. Este artigo explica ambos os métodos, descreve as limitações do Wix por trás desses problemas e mostra como evitá-los.
Prefere que configuremos isto por si? O método recomendado (Método 2) implica adicionar código personalizado ao seu site Wix. Se quiser que o implementemos, contacte o suporte bsport e envie-nos um convite de colaborador para o seu site Wix (no Wix: Settings → Roles & Permissions). Tratamos do resto.
Antes de começar
Gere o código do seu widget no back office bsport: Settings → Widgets, escolha o tipo de widget, configure as suas opções, depois desça 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 — Elemento Embed HTML (rápido, com limitações)
No Editor Wix, clique em Add Elements → Embed Code → Embed HTML
Arraste o elemento para a página onde pretende colocar o widget
Clique em Enter Code e cole o código do seu widget
Redimensione o elemento tanto no modo de ambiente de trabalho como no modo móvel e clique em Publish
O que deve saber antes de escolher este método: o iframe
O Wix coloca automaticamente tudo o que é adicionado através do elemento Embed HTML dentro de um iframe — uma moldura de tamanho fixo que não cresce com o conteúdo. É assim que o Wix está construído, não algo relacionado com o widget, e isto causa quatro problemas recorrentes:
O widget fica confinado a uma caixa de tamanho fixo. Não pode crescer além do tamanho definido para o elemento, nem adaptar-se ao ambiente envolvente, mesmo sendo o próprio widget responsivo.
O scroll deixa de funcionar em dispositivos móveis e tablets. Se o conteúdo for mais alto do que a moldura, os visitantes frequentemente não conseguem fazer scroll até ele — um gesto de deslize tátil dentro de um iframe de altura fixa é normalmente captado pela página e não pela moldura. Este é o problema mais relatado.
As janelas pop-up e diálogos ficam presos. Um diálogo de detalhes de sessão ou de check-out só pode cobrir a moldura, não a página, pelo que pode aparecer cortado.
O tracking não chega à sua página. Os eventos enviados pelo widget ficam dentro da moldura, pelo que o Google Tag Manager ou outras ferramentas de analítica no seu site Wix não os detetam.
Se encontrar algum destes problemas, aconselhamos a utilização do Método 2.
Calendário no Wix: manter o elemento Embed HTML e corrigi-lo
Se estiver a adicionar o widget de calendário e quiser manter o elemento Embed HTML — por exemplo, para continuar a poder posicioná-lo com arrastar e largar no Editor Wix — pode corrigir os seus dois principais problemas de iframe com alguns scripts adicionais:
o calendário ficar cortado quando a sua altura muda (por exemplo, ao mudar de semana)
os pop-ups de reserva e descrição abrirem demasiado acima ou abaixo do ecrã do visitante
Siga o nosso guia passo a passo: Calendário no Wix: corrigir o redimensionamento e a posição dos pop-ups.
Esta opção exige um domínio ligado e um plano Wix premium. Não torna os eventos do widget visíveis para o Google Tag Manager — para isso, utilize o Método 2.
Método 2 — Custom Code (recomendado)
Este método coloca o widget diretamente na página, em vez de numa moldura. Assim, o widget expande-se até à sua altura natural, acompanha o scroll da página, abre diálogos sobre a página inteira e os seus eventos ficam visíveis para o tracking.
Importante: os widgets adicionados desta forma não são movidos por arrastar e largar. O widget não aparece como um elemento no Editor Wix, pelo que não pode arrastá-lo nem redimensioná-lo aí. Em vez disso, a sua posição é definida no código: indica ao código em que secção da página o widget deve ser colocado (o targetSelector, explicado abaixo). Para mover o widget mais tarde, altere esse valor no código.
Passos
Aceda ao seu painel Wix → Settings → Custom Code
Clique em Add Custom Code
Cole o código abaixo, depois de substituir os valores descritos em Valores a substituir
Em Add Code to Pages, escolha a página específica em vez de todas as páginas
Defina Place Code in como Body - end
Dê-lhe um nome que reconheça mais tarde e depois clique em Apply e Publish
O 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 substituir
companyId— substitua1234pelo seu ID de empresa bsport. Encontra-o no código do widget gerado no seu back office.containerId— qualquer nome à sua escolha para o contentor do widget, por exemplobsport-widget-planning. Utilize um nome diferente para cada widget na mesma página.widgetType— o tipo de widget que pretende mostrar, por exemplocalendar. Copie-o da linhawidgetTypedo código do widget no back office.targetSelector— onde o widget aparece na página. Trata-se de um seletor CSS que aponta para a secção onde o widget é adicionado. Para o encontrar, abra a sua página publicada no Chrome, clique com o botão direito na secção onde pretende colocar o widget, escolha Inspect e, em seguida, clique com o botão direito no elemento destacado e escolha Copy → Copy selector. É isto que substitui o arrastar e largar: para mover o widget, altere este valor.config— as opções do widget. Copie o objetoconfigdo código do widget no back office para que o widget mantenha os filtros e as opções de visualização que escolheu.
Para mostrar mais do que um widget, adicione outro bloco createBsportWidget({ ... }) em WIDGET INSTANCES, com o seu próprio containerId, targetSelector, widgetType e config.
Se o widget não aparecer onde pretende, ou se preferir não editar código, contacte o suporte bsport e nós configuramo-lo por si.
Comparação entre os dois métodos
Elemento Embed HTML (arrastar e largar)
Fácil de posicionar visualmente no editor Wix
Sujeito a todas as limitações do iframe acima descritas
Adequado para um widget curto e de altura fixa no ambiente de trabalho
Custom Code (injetado no corpo da página)
Sem iframe — o widget expande-se livremente e acompanha o scroll da página
Os diálogos abrem sobre a página inteira
Os eventos de tracking chegam ao seu site
Sem arrastar e largar: a posição é definida no código com
targetSelector
Adicionar o botão de login ao cabeçalho
O widget do botão de login bsport não pode ser adicionado a um cabeçalho Wix por arrastar e largar: os cabeçalhos Wix não aceitam de todo o elemento Embed HTML.
Ainda assim, pode ser feito com o Método 2. Ao injetar o código do botão de login no corpo da página através de Settings → Custom Code, coloca-se no cabeçalho sem o invólucro do iframe. Como isto implica posicionar o botão através de código, normalmente configuramos isto por si — ver Como podemos ajudar abaixo.
Resolução de problemas
Os visitantes não conseguem percorrer tudo em dispositivos móveis.
Esta é a limitação do iframe descrita acima. Mude para o Método 2.
Um pop-up abre mas fica cortado.
O widget está dentro de um iframe. Mude para o Método 2 — ou, no caso do widget de calendário, consulte Calendário no Wix acima.
O Google Tag Manager não deteta os eventos do widget.
Os eventos não conseguem sair do iframe. Mude para o Método 2.
O widget não aparece com o Método 2.
Verifique se o targetSelector aponta para uma secção que existe nessa página, se o ID da empresa está correto e se o código está atribuído à página certa em Add Code to Pages.
As alterações feitas no back office não aparecem.
A configuração não é atualizada automaticamente no seu site. Copie o código recém-gerado e substitua por completo o anterior. Com o Método 2, atualize antes os valores de widgetType e config no seu código personalizado.
O widget tem um aspeto diferente da pré-visualização do back office, ou não responde a cliques.
Ative o Compatibility Mode nas definições do seu widget e, em seguida, copie e cole o novo código.
Não aparece nada.
Verifique se o widget não foi adicionado duas vezes — através de um elemento Embed e de Custom Code em simultâneo. Duas cópias na mesma página entram em conflito.
O layout está apertado.
O widget é responsivo, mas precisa de espaço. Certifique-se de que a secção que o contém é suficientemente larga e verifique a vista móvel separadamente no editor Wix.
Como podemos ajudar
Passar para o método Custom Code implica fazer alterações dentro do seu site Wix: adicionar ou editar código em Settings → Custom Code e, por vezes, ajustar o layout ou o estilo da página. Se preferir que tratemos disto, teremos todo o gosto em:
Mover um widget existente para fora do iframe para corrigir problemas de scroll e de pop-up
Adicionar o botão de login ao seu cabeçalho através de Custom Code
Ajustar o tamanho, a posição e o overflow do widget
Orientar o seu programador web ao longo da implementação
Para isto, precisamos de um convite de colaborador para o seu site Wix (no Wix: Settings → Roles & Permissions). Contacte a nossa equipa de suporte e tratamos do resto.
Continua com dificuldades? Contacte a nossa equipa de suporte com o URL da página e uma captura de ecrã, e nós analisamos o caso.





