How to open a widget with a button | bsport

⚠️ This is is only available for:

Private passes
Packs
Appointments
Subscriptions

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

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

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

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

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

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

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

Step 3. Hide the bsport widget

Update the widget div:

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

And add display=”none” to hide the bsport widget:

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

Where to find the pass/subscription/appointments id:

Private pass:
Go to Products > Appointment passes

Select the private pass > You will find the private pass id in the URL

Example:
```
var eventData = { 	private_pass_id: "41706", 	uniqueWidgetId: "unique-widget-id" };
```
Payment pack:
Go to Products > Passes

Select the payment pack > You will find the payment pack id in the URL

Example:
```
var eventData = { 	payment_pack_id: "677009", 	uniqueWidgetId: "unique-widget-id" };
```
Packs Widget:
Go to Products > Packs

Select the pack > You will find the pack id in the URL

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

Go to Products > Subscriptions

Select the subscription > You will find the subscription id in the URL

Example:
```
var eventData = { 	contract_id: "40003", 	uniqueWidgetId: "unique-widget-id" };
```

Integrate a newsletter widget on your website

Integrate a pricing options widget on your website

How to integrate a widget only displaying packs/offers

Widgets: How to filter categories on passes

How to customise a bsport widget with custom CSS