Skip to main content

Widgets

BetMakers provides several widgets to be used on your website. This means that throughout your website, you can add functionality for betting that is provided by our SDK.

This list is not exhaustive, and will be updated as more widgets are introduced.

Getting started with our widgets​

Before widgets are enabled, you will need to provide an element with the id="bm-root". This is required for several things:

  1. Only a single instance should be available.
  2. State is appropriately managed.
  3. Styles are localised and should not affect your entire website.
<div id="bm-root">
  Add widgets here
</div>

Rendering widgets​

After initialising the SDK, you can render our widgets as such:

const unmount = window.bm.renderComponents(); // Mounts all components on the page.

// Returns a callback function to unmount all components on the page.
// unmount();
const unmountRacebook = window.bm.renderComponent('bm-racebook'); // Mounts a specific component on the page.

// Returns a callback function to unmounts the component. Useful for single page applications.
// unmountRacebook();

Betslip​

The betslip includes the BetMakers betslip which is directly integrated with the other widgets.

<div class="bm-betslip"></div>

Racebook​

The racebook includes the BetMakers racing grid, race card and is a complete world class betting experience.

<div class="bm-racebook"></div>

Next to jump ticker​

The next to jump ticker includes an attribute data-props which is a stringified object including baseUrl. This will be parsed and used for navigational purposes.

<div class="bm-next_to_jump_ticker" data-props="{"baseUrl":"/racing"}"></div>