Ir para conteúdo principal

Como integrar um widget bsport no Wix

Guia passo a passo para adicionar um widget bsport a um site Wix, por que motivo o elemento Embed HTML causa problemas, e o método recomenda

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)

  1. No Editor Wix, clique em Add Elements → Embed Code → Embed HTML

  2. Arraste o elemento para a página onde pretende colocar o widget

  3. Clique em Enter Code e cole o código do seu widget

  4. 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

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

  1. Aceda ao seu painel Wix → Settings → Custom Code

  2. Clique em Add Custom Code

  3. Cole o código abaixo, depois de substituir os valores descritos em Valores a substituir

  4. Em Add Code to Pages, escolha a página específica em vez de todas as páginas

  5. Defina Place Code in como Body - end

  6. 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 — substitua 1234 pelo 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 exemplo bsport-widget-planning. Utilize um nome diferente para cada widget na mesma página.

  • widgetType — o tipo de widget que pretende mostrar, por exemplo calendar. Copie-o da linha widgetType do 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 objeto config do 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.

Isto respondeu à sua pergunta?