JS-Loader

The JS-loader is the preferred way to integrate Datablocks widgets. It's basically a script wrapping (and executing) a function that takes as it's input a set of widget tokens and corresponding DOM-element selectors, then fetches the widgets and inserts them into the DOM-elements.

In practice, an integration could look like the example below, where an anonymous function takes the requested widget information, fetches the loader, inserts the loader into the page, and adds the specified widgets to the loader's input.

Credentials needed

Credential

Description

<WIDGET_TYPE>

The type of widget, i.e. "owner-list", "stock-chart", etc.

<TOKEN>

Unique token for the widget

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Title</title>
</head>

<body>
    <div> <h1>Hello World</h1> </div>
    <div id="inside-this-element" style="padding: 20px"></div>
    <div id="inside-this-element2" style="padding: 20px"></div>
</body>

<script>
    (function(widgets) {
        var url = "https://widget.datablocks.se/api/rose";
        if (!window._MF) {
            var b = document.createElement("script");
            b.type = "text/javascript";
            b.async = true;
            b.src = url + "/assets/js/loader-v5.js";
            document.getElementsByTagName("body")[0].appendChild(b);
		    }
		    window._MF = window._MF || {
            data: [],
            url: url,
            ready: !!0,
            render: function() { window._MF.ready = !0 },
            push: function(w) { window._MF.data.push(w) }
		    };	
		    window._MF.push(widgets);
    })([{
        query:"#inside-this-element"
        ,widget: "<WIDGET_TYPE>"
        ,locale: "sv"
        ,token: "<TOKEN>"
    },
        {
        query:"#inside-this-element2"
        ,widget: "<WIDGET_TYPE>"
        ,locale: "sv"
        ,token: "<TOKEN>"
    }],
    );
</script>
</html>

The query setting has support for any CSS-selector.

Example for CMS

<!--Where the widgets will be shown-->
<div id="inside-this-element"></div>
<div id="inside-this-element2"></div>


<!--Loads the widgets-->
<script>
    (function(widgets) {
        var url = "https://widget.datablocks.se/api/rose";
        if (!window._MF) {
            var b = document.createElement("script");
            b.type = "text/javascript";
            b.async = true;
            b.src = url + "/assets/js/loader-v5.js";
            document.getElementsByTagName("body")[0].appendChild(b);
		    }
		    window._MF = window._MF || {
            data: [],
            url: url,
            ready: !!0,
            render: function() { window._MF.ready = !0 },
            push: function(w) { window._MF.data.push(w) }
		    };	
		    window._MF.push(widgets);
    })([{
        query:"#inside-this-element"
        ,widget: "<WIDGET_TYPE>"
        ,locale: "sv"
        ,token: "<TOKEN>"
    },
        {
        query:"#inside-this-element2"
        ,widget: "<WIDGET_TYPE>"
        ,locale: "sv"
        ,token: "<TOKEN>"
    }],
    );
</script>

Add more widgets to JS-Loader

To add more widgets you need to have a <div> with id that matches the one in query, for example:

<div id="inside-this-element3"></div>

query:"#inside-this-element3"

NOTE: The id needs to be unique.

1 element in the loader list consists of:

{
        query:"#inside-this-element3"
        ,widget: "<WIDGET_TYPE>"
        ,locale: "sv"
        ,token: "<TOKEN>"
 }

between elements a , is needed.

PreviousWidgets exceptions NextWordpress Plugin

Last updated 1 month ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>A Title</title> </head> <body> <div> <h1>Hello World</h1> </div> <div id="inside-this-element" style="padding: 20px"></div> <div id="inside-this-element2" style="padding: 20px"></div> </body> <script> (function(widgets) { var url = "https://widget.datablocks.se/api/rose"; if (!window._MF) { var b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = url + "/assets/js/loader-v5.js"; document.getElementsByTagName("body")[0].appendChild(b); } window._MF = window._MF || { data: [], url: url, ready: !!0, render: function() { window._MF.ready = !0 }, push: function(w) { window._MF.data.push(w) } }; window._MF.push(widgets); })([{ query:"#inside-this-element" ,widget: "<WIDGET_TYPE>" ,locale: "sv" ,token: "<TOKEN>" }, { query:"#inside-this-element2" ,widget: "<WIDGET_TYPE>" ,locale: "sv" ,token: "<TOKEN>" }], ); </script> </html>

<div id="inside-this-element"></div> <div id="inside-this-element2"></div>  <script> (function(widgets) { var url = "https://widget.datablocks.se/api/rose"; if (!window._MF) { var b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = url + "/assets/js/loader-v5.js"; document.getElementsByTagName("body")[0].appendChild(b); } window._MF = window._MF || { data: [], url: url, ready: !!0, render: function() { window._MF.ready = !0 }, push: function(w) { window._MF.data.push(w) } }; window._MF.push(widgets); })([{ query:"#inside-this-element" ,widget: "<WIDGET_TYPE>" ,locale: "sv" ,token: "<TOKEN>" }, { query:"#inside-this-element2" ,widget: "<WIDGET_TYPE>" ,locale: "sv" ,token: "<TOKEN>" }], ); </script>