Widget: How to open widget on button

<aside>

⚠️ This is is only available for:

Private passes
Packs
Appointments
Subcriptions </aside>

Step 1. Create custom button

Create your customised button and give it a specific id. Example:

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

Step 2. Connect your button to the widget

Go to Settings > Widgets and copy paste the widget code on your website.

Widget type:

Each widget type will connect differently:

Login button widget:

Add this code after the widget code and just before the </script> tag :

/* Here the connection with the button and the function triggered when clicked */
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, '*')
   });
	});

<aside>

🚨 Important

Replace the button-id for the button id that you created
Replace the unique-widget-id for the unique widget id inside the MountBsportWidget function and in the code snippet
The bsport div should be hidden like this: <div id="bsport-widget-id" style="display:none"></div> </aside>

It should look like this:

 <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: {}
        },
      });
      /* Here the connection with the button and the function triggered when clicked */
      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>

/* The result should be like this, it's important to hide the div with the inline style or another login button will be displayed */
 <div id="bsport-widget-id" style="display:none"></div>

Payment Pack (passes)

Add this code after the widget code and just before the </script> tag :
```
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 }, "*");
	});
});
```
<aside>

🚨 Important
- Replace the button-id for the button id that you created
- Replace the payment_pack-id for the id of the payment pack
- Replace the unique-widget-id for the unique widget id inside the MountBsportWidget function and in the code snippet
- The bsport div should be hidden like this: <div id="bsport-widget-id" style="display:none"></div> </aside>

Private Pass (appointments)

Add this code after the widget code and just before the </script> tag :
```
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 }, "*");
  });
 });
```
<aside>

🚨 Important
- Replace the button-id for the button id that you created
- Replace the private_pass_id for the private pass that you want to show
- Replace the unique-widget-id for the unique widget id inside the MountBsportWidget function and in the code snippet
- The bsport div should be hidden like this: <div id="bsport-widget-id" style="display:none"></div> </aside>

Payment combo (packs)

Add this code after the widget code and just before the </script> tag :

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 }, "*");
        });
      });

<aside>

🚨 Important

Replace the button-id for the button id that you created
Replace the payment_combo_id for the payment combo that you want to show
Replace the unique-widget-id for the unique widget id inside the MountBsportWidget function and in the code snippet
The bsport div should be hidden like this: <div id="bsport-widget-id" style="display:none"></div> </aside>

<aside>

⚠️ If the button is clicked before the widget has fully loaded, the pop-up will open and then close immediately.

</aside>