Framer crea siti come single-page application (SPA), il che cambia il comportamento dei widget incorporati. Sapere questo in anticipo evita i due problemi più segnalati dagli studi: il widget che non appare quando un visitatore arriva alla pagina da un'altra parte del sito e i popup confinati in un riquadro troppo piccolo.

Prima di iniziare

Genera il codice del widget nel back office bsport: Impostazioni → Widget, scegli il tipo di widget, configura le opzioni, poi scorri verso il basso e copia il codice. Ogni volta che modifichi un'impostazione viene generato un nuovo codice, e devi incollare la nuova versione sul tuo sito perché la modifica abbia effetto.

Metodo 1 — Componente Embed (rapido, con limiti)

Nell'area di lavoro di Framer, clicca su Insert → cerca Embed
Trascinalo sulla pagina
Nel pannello a destra scegli HTML e incolla il codice del tuo widget
Ridimensiona il riquadro e clicca su Pubblica

Il problema delle single-page app

Framer non ricarica la pagina quando un visitatore si sposta tra le sezioni del tuo sito: sostituisce il contenuto sul posto. Inoltre, il componente Embed racchiude il tuo codice in un iframe, facendoti perdere il controllo su quando viene eseguito lo script del widget. Il risultato: il widget può apparire vuoto alla prima visita, soprattutto su iOS (Safari e Chrome), e comparire solo dopo un aggiornamento completo della pagina. Poiché funziona dopo l'aggiornamento, il problema spesso passa inosservato durante i test.

⚠️ Se vedi il widget dopo l'aggiornamento ma non al primo caricamento o quando navighi verso la pagina, questa è la causa. La soluzione è sostituire il componente Embed con un code component di Framer (Metodo 2 qui sotto), che carica lo script del widget e lo monta ogni volta che la pagina viene mostrata.

Metodo 2 — Code component (consigliato)

In Framer, apri il pannello Assets e crea un nuovo code component.

Elimina il codice predefinito e incolla il codice qui sotto.

import { useEffect } from "react";// Sostituisci con il valore parentElement dal codice del tuo widget bsport
const WIDGET_ID = "bsport-widget-XXXXXX";export default function BsportWidget() {
  useEffect(() => {
    // Copia questi valori dal codice del tuo widget bsport
    const config = {
      parentElement: WIDGET_ID,
      companyId: 1234, // sostituisci con il tuo ID azienda
      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);
      }
      // Evita di montare due volte
      if (document.getElementById(WIDGET_ID)?.hasChildNodes()) {
        return;
      }
      // Cancella una registrazione precedente così il widget può essere montato di nuovo
      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>;
}

Nel codice del tuo widget bsport, trova l'oggetto all'interno di MountBsportWidget({ ... }) e copia i suoi valori (ID azienda, tipo di widget, opzioni) nell'oggetto config qui sotto.

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

Imposta WIDGET_ID sul valore di parentElement dal codice del tuo widget (ad esempio bsport-widget-441452).
Elimina il vecchio componente Embed dalla tua pagina, poi trascina il nuovo code component da Assets sulla pagina al suo posto.
Imposta larghezza e altezza del componente su Fill in modo che il widget non venga tagliato o nascosto.
Clicca su Pubblica, poi effettua il test navigando verso la pagina da un'altra pagina del tuo sito e su un iPhone, non solo con un aggiornamento.

Perché funziona

In una single-page app, spostarsi tra le pagine non attiva un ricaricamento completo, quindi gli script incorporati, soprattutto dentro un iframe, potrebbero non essere eseguiti di nuovo. Il code component carica lo script bsport autonomamente e monta il widget direttamente nel proprio contenitore ogni volta che la pagina viene mostrata, così il widget si visualizza in modo affidabile al primo caricamento, dopo la navigazione all'interno del sito e nelle visite successive.

Risoluzione dei problemi

Il widget appare dopo l'aggiornamento ma non al primo caricamento o quando si naviga da un'altra pagina.
Si tratta del problema delle single-page app descritto sopra. Passa al Metodo 2.

Si apre un popup ma risulta tagliato.
È il limite dell'iframe nel Metodo 1. Passa al Metodo 2.

Il code component non mostra nulla.
Verifica che WIDGET_ID corrisponda al parentElement del codice del tuo widget, che l'ID azienda sia corretto e che il componente sia impostato su Fill.

Le modifiche apportate nel back office non vengono visualizzate.
La configurazione non si aggiorna automaticamente sul tuo sito. Copia il codice appena generato e sostituisci completamente quello vecchio, poi ripubblica. Se usi il Metodo 2, aggiorna invece i valori nell'oggetto config.

Il widget ha un aspetto diverso rispetto all'anteprima del back office.
Attiva la Modalità di compatibilità nelle impostazioni del tuo widget, poi copia e incolla il nuovo codice.

Ancora bloccato? Contatta il nostro Team di supporto con l'URL della pagina e uno screenshot, e daremo un'occhiata.

Come integrare un widget bsport su Framer