Datawrapper can be integrated into existing application workflows. To get started with this, please ensure you have created a valid API token and are able to make authenticated requests with it.

Workflow

The first step in adding a chart to a page is to create it using the chart creation endpoint. Once you have created your chart and want to open it in the user interface, you'll have to create a login url. You can then open that login url in a user-facing iFrame to log the user in, and allow them to proceed with their chart creation.

To create a login URL, call the endpoint /auth/login-tokens to retrieve an object that contains a redirect_url:

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens

The response will look like this:

{
    "id": 1234567,
    "token": "ge8ujLf3tJ4luAiGFbAxw1A9dS8Mpr3YwKNwd5dgwG6PCb8q1Srtpw3Db1Rrjexz",
    "redirect_url": "https://api.datawrapper.de/v3/auth/login/ge8ujLf3tJ4luAiGFbAxw1A9dS8Mpr3YwKNwd5dgwG6PCb8q1Srtpw3Db1Rrjexz"
}

In order to login the user, open the redirect_url returned by Datawrapper in a user-facing modal window.

You can specify which step in the Datawrapper application the redirect URL should point to.

Returns a URL that opens the first step in Datawrapper for creating charts ("Upload your data"):

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens \
  --header 'content-type: application/json' \
  --data '{"chartId": "<ID>", "step": "upload"}'

Returns a URL that opens the first step in Datawrapper for creating maps ("Select your map"):

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens \
  --header 'content-type: application/json' \
  --data '{"chartId": "<ID>", "step": "basemap"}'

Returns a URL that opens the second step in Datawrapper for creating charts ("Check & Describe"):

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens \
  --header 'content-type: application/json' \
  --data '{"chartId": "<ID>", "step": "describe"}'

Returns a URL that opens the second step in Datawrapper for creating maps ("Add your data"):

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens \
  --header 'content-type: application/json' \
  --data '{"chartId": "<ID>", "step": "data"}'

Returns a URL that opens the third step in Datawrapper ("Visualize"):

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens \
  --header 'content-type: application/json' \
  --data '{"chartId": "<ID>", "step": "visualize"}'

Returns a URL that opens the fourth, final step in Datawrapper ("Publish & embed"):

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens \
  --header 'content-type: application/json' \
  --data '{"chartId": "<ID>", "step": "publish"}'

Returns a URL that opens an interactive preview of the chart in question:

curl --request POST \
  --url https://api.datawrapper.de/v3/auth/login-tokens \
  --header 'content-type: application/json' \
  --data '{"chartId": "<ID>", "step": "preview"}'