Give your clients a powerful curation tool, completely white labelled, all inside your product.

The Anders Pink Javascript SDK allows us to create a white labeled User Interface that gets embedded into your platform or tool. This UI allows you or your client admins or end users to do tasks such as creating or displaying a briefing.

Your users do not need to log in or use Anders Pink at all when you use the SDK - it's all happening in your platform.

Every time we add new features or update the UI, we will release a new version of the SDK. You can easily update the version you are using just by changing the script tag. This means you get to keep up to date with any UI or API changes with no developer effort required..

Integration overview

To use the SDK you must have a valid Anders Pink API key.

To ensure the security of the API key, you will need to set up a small proxy which will pass data between the SDK and our API.

Embedding the SDK

The first step is to embed our SDK in the place where you want the UI to appear.

You'll need to fill in the onRequest function and put in some way of proxying the payload of JSON data up to your server, and then onto the Anders Pink API.

In this example, we use jQuery to do an AJAX request to your own server. On success, we pass the response JSON into the supplied callback function.

<div id="ap"></div>
<script type="text/javascript" src="https://anderspink.com/dist/sdk-0.3.js"></script>
<script type="text/javascript">
    if (window.AndersPink) {
        AndersPink.init({
            id: 'ap',
            onRequest: function(data, callback) {
                $.ajax({
                    type: 'POST',
                    url: '/your-anderspink-proxy-endpoint',
                    data: data,
                    success: function(data) {
                        callback(data);
                    },
                    dataType: 'json',
                    contentType: 'application/json',
                });
            },
            onBriefingCreate: function(id) {
                console.log('Current user has created briefing with id', id);
            },
        })
    }
</script>

Creating a background proxy

In the example above, you do an AJAX request to a new URL /your-anderspink-proxy-endpoint. The job of this endpoint is to pass the given JSON to the Anders Pink API and to authenticate your users in the normal way (i.e. can User A create briefings).

You must also pass your API key in the HTTPS request to the API.

Some example code in node.js for handling the proxy using express and node-fetch:

const fetch = require('node-fetch');
const express = require('express');

const app = express();
const httpServer = http.Server(app);

app.post('/your-anderspink-proxy-endpoint', async function(req, res) {
try {
    const apiResponse = await fetch('https://anderspink.com/api/v2/proxy', {
        method: 'POST',
        body: JSON.stringify(req.body),
        headers: {
            'Content-Type': 'application/json',
            'X-Api-Key': '4VfnEb4L7jg1ax6VVEF6u4NoaOnRpxo0',
        },
    }).then(res => res.json());

    return res.json(apiResponse);
} catch (err) {
    return res.json({
        status: 'error',
        message: err.message,
    })
}
});

How it works

Become an Anders Pink Partner

• Build a powerful curation tool into your offer and extend your functionality with less effort
• Provide curation services to support your clients
• Get technical, marketing and sales support as part of our partner programme.

Get in touch for trial access to the SDK or any of our integration options. We'd love to help you bring curation into your platform, the way you want to.