Quickstart Guide
Embed your first PixelPaper in under 15 minutes.
PixelPaper is an embeddable online collaborative whiteboard. In under 15 minutes, you can embed a PixelPaper into your own web app, allowing your users to collaborate.
Before you begin...
You need to enable Billing on your account. We offer a 7 day free trial of our API to help you get started. Find out more about pricing here and set up your subscription here.
Authentication
You need to create an API Token here. Once you've done that, all you need to do
is include it as a Bearer token in your requests to PixelPaper.
1. Create a PixelPaper
You need to hit our POST /api/paper endpoint to generate your first PixelPaper.
curl -X POST https://api.pixelpaper.io/api/paper \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {your_api_key}' \
-d '{"name": "My First PixelPaper"}'
name is a required field, allowing you to pass a human-friendly name for the PixelPaper.
PixelPaper will then return an object like so:
{
"identifier": "433142b2-a30d-4336-b8b9-914f1bfcbd21"
"name": "My First PixelPaper"
"source": "app"
}
identifier is the key thing here. It's used to identify a single PixelPaper. Anyone joining the same PixelPaper will
be able to see one another and collaborate.2. Generate an Access Token
To allow a user to join a PixelPaper, make a request to the POST /api/access-token/{identifier},
where the identifier is the one passed back to you when you created the PixelPaper
(e.g. 433142b2-a30d-43... above).
The only optional parameter in the body is name. This is the name of the user joining the PixelPaper. It will be shown
to other collaborators on the PixelPaper when they join.
curl -X POST https://api.pixelpaper.io/api/access-token/{identifier} \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {your_api_key}' \
-d '{"name": "James Smith"}'
We'll respond with a single JWT:
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MTQ1MDg1ODUsImV4cCI6MTcxNDUxMjE4NSwicGFwZXIiOiIyN2MxNzY2ZC01NmE4LTRlN2QtOTRmZC05ZWFlYWEwYWU3YzUiLCJ1c2VyIjp7Im5hbWUiOiJNeXN0ZXJpb3VzIE1lZXJrYXQifX0.UqOtO19DizSnY5MxVHI5zoqyO1rUnUohm9aFMhh9yV0
This is an access token for one of your users to join a PixelPaper. You should generate a new access token for each user.
3. Join the PixelPaper
Now, you just need to embed an iFrame on your page:
<iframe src="https://app.pixelpaper.io/room/{identifier}?token={your-access-token}"
class="h-screen w-screen"
allow="clipboard-read; clipboard-write"
></iframe>
i.e. for our example, it would be:
<iframe src="https://app.pixelpaper.io/room/433142b2-a30d-4336-b8b9-914f1bfcbd21?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MTQ1MDg1ODUsImV4cCI6MTcxNDUxMjE4NSwicGFwZXIiOiIyN2MxNzY2ZC01NmE4LTRlN2QtOTRmZC05ZWFlYWEwYWU3YzUiLCJ1c2VyIjp7Im5hbWUiOiJNeXN0ZXJpb3VzIE1lZXJrYXQifX0.UqOtO19DizSnY5MxVHI5zoqyO1rUnUohm9aFMhh9yV0"
class="h-screen w-screen"
allow="clipboard-read; clipboard-write"
></iframe>
Congratulations, you've just embedded your first PixelPaper! 🚀