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

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.

PreviousIntegration methodsNextWordpress Widget

Last updated