Passer au contenu principal

Comment ouvrir un widget avec un bouton

Ce guide vous explique comment ouvrir un widget avec un bouton

⚠️ Cette fonctionnalité est disponible uniquement pour :

  • Les passes privés

  • Les packs

  • Les rendez-vous

  • Les abonnements

Étape 1. Créer un bouton personnalisé

Créez votre bouton personnalisé et attribuez-lui un identifiant spécifique. Exemple :

<button id="bsport-passes-widget">

Étape 2. Connecter votre bouton au widget

Accédez à Paramètres > Widgets et copiez-collez le code du widget sur votre site web.
​

Type de widget :

Chaque type de widget se connecte différemment :

Widget bouton de connexion :

Ajoutez ce code après le code du widget et juste avant la balise </script> :

document.addEventListener("DOMContentLoaded", function () {
	var button = document.getElementById("button-id"); 
	button.addEventListener("click", function () {
		const message = { type: 'bsport:login-button:request-login', data: {
			"uniqueWidgetId": "unique-widget-id" }
		}
		window.postMessage(message, '*')
   });
});

🚨 Important

  • Remplacez button-id par l'identifiant du bouton que vous avez créé

  • Remplacez unique-widget-id par l'identifiant unique du widget dans la fonction MountBsportWidget et dans l'extrait de code

  • La div bsport doit être masquée comme suit : <div id="bsport-widget-id" style="display:none"></div>

Le résultat doit ressembler à ceci :

 <script id="insert-bsport-widget-cdn">
      !(function (b, s, p, o, r, t) {
        !typeof window.BsportWidget !== "undefined" &&
          !document.getElementById("bsport-widget-cdn") &&
          !(function () {
            (m = b.createElement(s)),
              (m.id = "bsport-widget-cdn"),
              (m.src = p),
              b.getElementsByTagName("head")[0].appendChild(m);
          })();
      })(document, "script", "https://cdn.bsport.io/scripts/widget.js");
    </script>
    <script id="bsport-widget-mount">
      function MountBsportWidget(config, repeat = 1) {
        if (repeat > 50) {
          return;
        }
        if (!window.BsportWidget) {
          return setTimeout(() => {
            MountBsportWidget(config, repeat + 1);
          }, 100 * repeat || 1);
        }
        BsportWidget.mount(config);
      }
    </script>
    <script>
      MountBsportWidget({
        parentElement: "bsport-widget-id",
        uniqueWidgetId: "unique-widget-id",
        companyId: "company-id",
        franchiseId: null,
        dialogMode: 1,
        widgetType: "loginButton",
        showFab: false,
        fullScreenPopup: false,
        styles: undefined,
        config: {
         loginButton: {}
        },
      });
      /* Ici la connexion avec le bouton et la fonction déclenchée au clic */
      document.addEventListener("DOMContentLoaded", function () {
        var button = document.getElementById("button-id"); 
        button.addEventListener("click", function () {
         	const message = {
	         	type: 'bsport:login-button:request-login',
	         	data: { "uniqueWidgetId": "your-unique-id" } }
        	window.postMessage(message, '*')
        });
      });
    </script>

/* Le résultat doit ressembler à ceci ; il est important de masquer la div avec le style inline, sans quoi un autre bouton de connexion s'affichera */
 <div id="bsport-widget-id" style="display:none"></div>

Pack de paiement (passes)

Ajoutez ce code après le code du widget et juste avant la balise </script> :

document.addEventListener("DOMContentLoaded", function () {
	var button = document.getElementById("button-id"); //ex. pass-3213
	button.addEventListener("click", function () {
	var eventType = "bsport:pass:add-to-cart:payment-pack";
		var eventData = { payment_pack_id: "payment_pack_id",
		uniqueWidgetId: "unique-widget-id" };
		window.parent.postMessage({ type: eventType, data: eventData }, "*");
	});
});

🚨 Important

  • Remplacez button-id par l'identifiant du bouton que vous avez créé

  • Remplacez payment_pack-id par l'identifiant du pack de paiement

  • Remplacez unique-widget-id par l'identifiant unique du widget dans la fonction MountBsportWidget et dans l'extrait de code

  • La div bsport doit être masquée comme suit : <div id="bsport-widget-id" style="display:none"></div>

Passe privé (rendez-vous)

Ajoutez ce code après le code du widget et juste avant la balise </script> :

document.addEventListener("DOMContentLoaded", function () {
	var button = document.getElementById("button-id"); //ex. pass-3213
  button.addEventListener("click", function () {
	  var eventType = "bsport:pass:add-to-cart:private-pass";
	  var eventData = {
		  private_pass_id: "private_pass_id",
		  uniqueWidgetId: "unique-widget-id" };
      window.parent.postMessage({ type: eventType, data: eventData }, "*");
  });
 });

🚨 Important

  • Remplacez button-id par l'identifiant du bouton que vous avez créé

  • Remplacez private_pass_id par le passe privé que vous souhaitez afficher

  • Remplacez unique-widget-id par l'identifiant unique du widget dans la fonction MountBsportWidget et dans l'extrait de code

  • La div bsport doit être masquée comme suit : <div id="bsport-widget-id" style="display:none"></div>

Combo de paiement (packs)

Ajoutez ce code après le code du widget et juste avant la balise </script> :

document.addEventListener("DOMContentLoaded", function () {
        var button = document.getElementById("button-id"); //ex. pass-3213
        button.addEventListener("click", function () {
         var eventType = "bsport:pass:add-to-cart:payment-combo";
          var eventData = { payment_combo_id: "payment_combo_id", uniqueWidgetId: "unique-widget-id" }; // 
          window.parent.postMessage({ type: eventType, data: eventData }, "*");
 });
});

🚨 Important

  • Remplacez button-id par l'identifiant du bouton que vous avez créé

  • Remplacez payment_combo_id par le combo de paiement que vous souhaitez afficher

  • Remplacez unique-widget-id par l'identifiant unique du widget dans la fonction MountBsportWidget et dans l'extrait de code

  • La div bsport doit être masquée comme suit : <div id="bsport-widget-id" style="display:none"></div>

Abonnements

Ajoutez ce code après le code du widget et juste avant la balise </script> :

document.addEventListener("DOMContentLoaded", function () {
        var button = document.getElementById("button-id"); //ex. contract-3213
        button.addEventListener("click", function () {
         var eventType = "bsport:subscription:add-to-cart:contract";
          var eventData = { contract_id: "contract_id", uniqueWidgetId: "unique-widget-id" };
          window.parent.postMessage({ type: eventType, data: eventData }, "*");
 });
});

🚨 Important

  • Remplacez button-id par l'identifiant du bouton que vous avez créé

  • Remplacez unique-widget-id par l'identifiant unique du widget dans la fonction MountBsportWidget et dans l'extrait de code

  • La div bsport doit être masquée comme suit : <div id="bsport-widget-id" style="display:none"></div>

⚠️ Si le bouton est cliqué avant que le widget soit entièrement chargé, la fenêtre contextuelle s'ouvrira puis se fermera immédiatement.

Étape 3. Masquer le widget bsport

Mettez à jour la div du widget :

 <div id="bsport-widget-998312"></div>

Ajoutez display="none" pour masquer le widget bsport :

 <div id="bsport-widget-998312" display="none"></div>

Où trouver l'identifiant du passe/abonnement/rendez-vous :

  • Passe privé :

    Accédez à Produits > Passes de rendez-vous


    Sélectionnez le passe privé > Vous trouverez l'identifiant du passe privé dans l'URL

    Exemple :

    var eventData = { 	private_pass_id: "41706", 	uniqueWidgetId: "unique-widget-id" };

  • Pack de paiement :

    Accédez à Produits > Passes

    Sélectionnez le pack de paiement > Vous trouverez l'identifiant du pack de paiement dans l'URL

    Exemple :

    var eventData = { 	payment_pack_id: "677009", 	uniqueWidgetId: "unique-widget-id" };

  • Widget packs :

    Accédez à Produits > Packs

    Sélectionnez le pack > Vous trouverez l'identifiant du pack dans l'URL


    Exemple :

    var eventData = { 	payment_combo_id: "9716", 	uniqueWidgetId: "unique-widget-id" };

  • Widget abonnements :


    Accédez à Produits > Abonnements
    ​

    Sélectionnez l'abonnement > Vous trouverez l'identifiant de l'abonnement dans l'URL

    Exemple :

    var eventData = { 	contract_id: "40003", 	uniqueWidgetId: "unique-widget-id" };
Articles connexes
Avez-vous trouvé la réponse à votre question ?