Image Designer Component

You can integrate the Productsup Image Designer into your website by just adding the following javascript code. The Image Designer will run on the provided project and site. Once you close the Image Designer the onFinish() function will be called and you can verify the results. The selected template is part of the return values and this can then be send to the component API to be applied on all of your images.

window.pupAsyncInit = function () {
    ProductsupUI.init({
        // important: "project:" is mandatory f.e.: "project:project_id" or "project:howeveraprojectidwouldlooklike" is ok
        project: 'project:1',
        // important: "feed:" is mandatory f.e.: "feed:feed_id" or "feed:howeverafeedidwouldlooklike" is ok
        site: 'feed:1',
        token: 'ACCESS_TOKEN'
    });
    ProductsupUI.setupImageDesigner({
        buttonSelector: '#designer-button',
        onLoad: function () {
            document.getElementById('designer-button').removeAttribute('disabled')
        },
        onFinish: function (error, result) {
            console.log('image designer done ')
            console.log('error: ', error)
            console.log('result: ', result)
        },
    });
};

    (function(d, s, id){
        var js, pupjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://static-capi.productsup.com/v2/app.min.js";
        pupjs.parentNode.insertBefore(js, pupjs);
    }(document, 'script', 'productsup-widgets'));