Skip to main content

Getting started

This guide will show you how to install and mount the annotation tool.

Installation​

There are multiple ways to install the annotation tool depending on your project.

npm install @pathfindr.dev/annotation

Create container​

Add an empty <div> element with an id. This is where the annotation tool will be mounted.

<div id="annotation-tool-container"></div>

Initialization​

Initialize the annotation tool by giving it the id of the container and the options object.

import Annotation from '@pathfindr.dev/annotation';

const options = {
  width: '100%',
  height: '100vh',
  // a blob is also welcome here
  pdf: 'https://playground.pathfindr.dev/hello.pdf',
  language: 'en',
  accessToken: 'documenta-tion-toke-n935-27ee26170781' // you will need real tokens for production
};

const annotation = new Annotation('#annotation-tool-container', options);
note

In order to prevent CORS issues with the document, our proxy will be used to fetch and convert the document to PDF. For this you need of course a valid access token.

tip

If you don't want to make your documents public, you can use a blob instead of a URL. Just pass in the pdf key of the options object, as you would normally with a URL.

Translations​

If your users speak english german or danish, we have you supported out of the box! To select a language, pass the language code in the options object.

{
    language: 'en' // 'en', 'de' or 'da'
}

If you want to hit a different tone with your users, you can customize translations by passing a translations object in the options. The object should contain the language code as key and the translations as value. For the valid keys, see the example below.


{
    translations: 
    {
        "en": {
          "welcome_modal.title": "Welcome",
          "welcome_modal.text": "Here you can annotate in documents and make a screen recording.",
          "welcome_modal.button": "Okay",
          "permission_modal.title": "Permission needed",
          "permission_modal.text": "You need to give access to your camera and screen in order to record your session.",
          "permission_modal.button_permission": "Give permission",
          "permission_modal.button_no_permission": "Continue without recording",
          "permission_modal.no_browser_support_title": "No browser support",
          "permission_modal.no_browser_support_text": "Your browser does not support screen recording. The most common reasons is missing security, old browsers or the fact that it is not supported on smartphones.",
          "uploading_modal.title": "Uploading...",
          "success_modal.title": "Hooray!",
          "success_modal.text": "Your files have been uploaded",
          "error_modal.title": "Error",
          "error_modal.text": "Oops, something went wrong. Try again or download the files.",
          "error_modal.button_download_video": "Download video",
          "error_modal.button_download_pdf": "Download pdf",
          "error_modal.button_retry": "Retry",
          "navbar.button_done": "Done",
          "navbar.uploading_text": "Uploading...",
          "navbar.button_cancel": "Cancel",
          "navbar.helper_text_not_ready": "Make a recording or edit the document",
          "navbar.helper_text_ready": "Ready to upload",
          "access_token_unvalid": "This is a trial version, restricted to testing and demo only!"
        },
        
    }
},

Are you getting more international? Congrats 🥳! To implement a whole new language, grab the example above, switch the 'en' to your language code and translate the values, then pass the whole thing inside translations. Easy!

tip

If you like sharing, send us the translations and we'll add it to the next release.