PixelPaper
Sign in Sign up

Contents

Overview

PaperAPI

RestAPI

Custom Styling

Templates

API Keys

Documentation Overview

PixelPaper was built to be integrated into real-time collaboration products. It has been designed from the ground up to be fully whitelabel-able, customisable and give you full control over the whiteboard via our PaperAPI and RestAPI.

Before you start, you'll need your API keys, which you can find here.

When you've had a chance to try out PixelPaper, get in touch with our team to discuss pricing for your product.

Quickstart Guide

1. Use the RestAPI to create a new PixelPaper.

Add the header Authorization: Bearer [your-private-api-key] to your request.

POST

https://hq.pixelpaper.io/api/board

curl --location --request POST 'https://hq.pixelpaper.io/api/board'
--header 'Authorization: Bearer [your-private-api-token]'
--header 'Accept: application/json'

This will return a PixelPaper object which contains the room_id of the newly created PixelPaper. Each PixelPaper that uses this room_id will be on the same board.

2. On your page, create the <div> to hold the PixelPaper.

You can choose the width and height of this div. PixelPaper will automatically adjust the size to fill. 

      <div id="comet-container"></div>

3. Import the PixelPaper libraries from our CDN.

Include the CSS file in the head of your page: 

      <link rel="stylesheet" href="https://cdn.pixelpaper.io/styles.css">
Include the JS file at the bottom of your page, before you initialise the PixelPaper object (described below): 
      <script src="https://cdn.pixelpaper.io/comet.js"></script>

4. Initialise the PixelPaper!

All you need to do now is actually initialise the whiteboard! Add this Javascript to your page, underneath where you have imported the Javascript library. 

      let pixel = new Comet({

          room: '[the-room_id-from-your-api-request]',

          key: 'your-public-api-key',

          name: 'the-name-of-the-user-joining',

          permissions: 'RW', // optional.

          zoom_min: 0.1, // optional.

          zoom_max: 3, // optional.

          wheel: 'zoom', // optional.

          recenter_behaviour: 'fit' // optional.

          css: 'https://your-domain/custom-styles.css' // optional.

      });
room String - Minimum 20 characters.

The room_id of the shared room. Every user with a matching `room` will be placed onto the same board. These are persistent (indefinitely), so your users can always come back to them at any point.

key String

Your Public API key. You can find it here.

name String

The name of the user joining the board. This is shown on their cursor to show others who they are.

permissions Optional String

Decides whether this user can view and edit the board, or is a read-only user. Read-only users cannot edit or interact with the board, and their cursors will not be shown on other's screens.

'RW' (default) For editors.

'R' For read-only users.

zoom_min Optional Decimal

An integer or a decimal number giving the minimum zoom a user can have on the canvas.

Note, this should be given as a decimal value, not as a percentage. E.g. If you only want the user to be able to zoom out to 80%, this would be 0.8.

Defaults to 0.1

zoom_max Optional Decimal

An integer or a decimal number giving the maximum zoom a user can have on the canvas.

Note, this should be given as a decimal value, not as a percentage. E.g. If you only want the user to be able to zoom in to 200%, this would be 2.

Defaults to 5

wheel Optional String

Decides on the action of the mouse wheel.

'zoom' (default) will use the mouse wheel to zoom in and out on the canvas.

'scroll' will use the mouse wheel to scroll the canvas on the y-axis.

recenter_behaviour Optional String

Choose the action of the 'Recenter View' button.

'fit' (default) will adjust the zoom and pan so that all objects on the canvas are visible.

'center' will reset the zoom to 100% and move the viewport to [0, 0] (the original position).

css Optional String, Absolute URL

Supply an absolute URL to your own custom CSS file to style the embedded PixelPaper. Leaving this blank will use PixelPaper's default styling.

E.g. 'https://your-domain/your-custom-styles.css'

See the dedicated styling page for more information.

What's next?

Congratulations! You now have an embedded PixelPaper in your product. Next, find out how to:

  • Programmatically interact with your whiteboard with our Javascript API (PaperAPI)

  • Manage your boards using our REST API

  • Add your own styling to completely whitelabel the whiteboard.

Read PaperAPI Docs

Find out how to programmatically interact with PixelPapers embedded on the page to create custom functionality.

Visit PaperAPI Docs
Read RestAPI Docs

Find out how to manage your boards from your server using your private API key.

Visit RestAPI Docs