Setup Feed Component

Before you can start working with the Image Designer or any other component, you need to make sure that you have set up the site properly. To add/edit/delete data sources to/from your site, you can use our Setup Feed component. In the following examples, we will show you how to integrate that component in your website.

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.setupFeed({
        channels: [{
            id: [channel_id], // The ID of the Export channel you want to create
            destinations: [
                {
                    id: [destination_id], // The ID of the Destination where the export should be uploaded, f.e.: 112 => Facebook
                    settings: [ // additional settings f.e. Facebook-specific settings
                        {
                            key: 'access-token',
                            value: '' // Facebook access token
                        },
                        {
                            key: 'account-id',
                            value: '1' // Facebook account id
                        },
                        {
                            key: 'catalog-id',
                            value: '1' // Facebook catalog id
                        }
                    ]
                }
            ]
        }],
        buttonSelector: '#feed-button',
        onLoad: function () {
            console.log('done feed')
            document.getElementById('feed-button').removeAttribute('disabled')
        },
        onFinish: function (error, result) {
            console.log('setup feed 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'));

Parameter	Format	Description
project	[^:]+:[^:]+	project references a Productsup Platform project in which the site should be created. site references a Productsup Platform site. You might want to use projects for grouping multiple feeds for one customer. A customer would be a project and each feed would be one site. Because we don't expose the Productsup Platform project and site IDs and you should not be forced to store the information to have a relation from your IDs to ours you don't have to use Productsup's IDs at all. You can reference any ID from your system. For example: You want to use a Productsup Platform project per customer in your system, you could simply create an project value "MyCustomerId:1234". "1234" could be the customer ID in your system. As long you're using the same reference, the component will know which project and site you're referencing. Project and site references have to be unique for the account. That means if you have two projects: "myProject:1234" "myProject:2345" Both projects cannot have the same site reference. If you're using "feed:1234" for the site value in multiple projects we cannot identify the site.
site	Same as "project"	A site represents a single feed. Same rules apply as in "project".
token	[A-z0-9]{80}	See "Acquiring the Access Token"
buttonSelector	Valid DOM Selector	Each component requires a button to start the component defined by the buttonSelector property.
channels	Object	Contains the export configuration for the feeds that will be created in the component. This will create the export channels and destinations in the Productsup platform according to the configuration.

Event	Description
onLoad	Will be called when the component has been loaded. We recommend disabling buttons in the user interface before that event occurs and enable button in the onLoad handler.
onFinish(error, returnData)	Will be called once a component is finished. error - Is an object with detailed information about the error. In case no errors occured the value will be null. In the future this object might be expanded. returnData - This parameter will contain a wrapping object for any data that the component needs to send back.