Embedding your first widget

PointsInPlay library

To embed the widget, you need to load PointsInPlay library on your page. In order to do so, paste following script on your page:

!function(){function o(o){Promise.resolve().then(o)}function n(){return{embedder:window.PointsInPlay.embedder,createBetsPlugin:window.PointsInPlay.createBetsPlugin}}function e(n){window.PointsInPlay.error=n,console.error("[PointsInPlay] Error has occurred while loading PointsInPlay library. See details below:"),console.error(n);for(const e of window.PointsInPlay.onceErrorCallbacks.splice(0))o((()=>{e(n)}))}if(window.PointsInPlay={onceLoadCallbacks:[],onceErrorCallbacks:[],error:null,onceLoad:e=>{window.PointsInPlay.embedder?o((()=>{e(n())})):window.PointsInPlay.onceLoadCallbacks.push(e)},onceError:n=>{window.PointsInPlay.error?o((()=>{n(window.PointsInPlay.error)})):window.PointsInPlay.onceErrorCallbacks.push(n)}},!("noModule"in HTMLScriptElement.prototype))return void e(Error("[PointsInPlay] Can't load PointsInPlay library - browser doesn't support ES modules."));const r=document.createElement("script");r.type="module",r.async=!0,r.src="https://pip-widget.statscore.com/assets/embedder.js",r.addEventListener("load",(()=>{for(const e of window.PointsInPlay.onceLoadCallbacks.splice(0))o((()=>{e(n())}))})),r.addEventListener("error",(o=>{e(o)})),document.head.appendChild(r)}();

Be careful

Make sure that code above is executed before any of your code related to the PointsInPlay widget. This code ensures that methods described below are available in the window context.

Another thing to be mindful of is that this code will add PointsInPlay property to window.

Embedding widget

Now that you included embedding code you can call widget embedder once its loaded. Lets put it to use by embedding our first widget:

PointsInPlay.onceLoad(({ embedder }) => {
    const widget = embedder.createFloatingWidget({
        clientId: 1,
        locale: 'en',
        async tokenCallback() {
            return { status: 'notLoggedIn' };
        },
        loginCallback() {},
    });
});

Access to embedder instance

To access embeder instance you can either execute PointsInPlay.onceLoad method each time or after first execution of onceLoad set embedder variable in broader scope:

let myEmbedder = null;
PointsInPlay.onceLoad(({ embedder }) => {
    myEmbedder = embedder;
});

If everything went smoothly you should see widget toggler in the left bottom corner of your page. You can use it to expand the widget: