@simplepdf/web-embed-pdf

Add a powerful PDF editor directly into your website.

Read more about SimplePDF Embed »

Join Our Discord · Follow us on Twitter

Open PDF files with SimplePDF, using a simple script tag.

Show me an example!

How to use

I don't have an account on SimplePDF:

Add this script in the head of your webpage:

<script src="https://unpkg.com/@simplepdf/web-embed-pdf" defer></script>

I have an account on SimplePDF:

Replace companyIdentifier with your own

<script
  src="https://unpkg.com/@simplepdf/web-embed-pdf"
  companyIdentifier="yourcompany"
  defer
></script>

How does it work?

Anchor links (a) with an href pointing to a PDF file (.pdf) or SimplePDF forms are automatically opened in SimplePDF

I don't want every PDF document to be opened in SimplePDF

Exclude any anchor tags from opening SimplePDF by adding the class exclude-simplepdf:

<a href="/example.pdf" class="exclude-simplepdf">Doesn't open with SimplePDF</a>

My PDF file doesn't have a .pdf extension

Add a class simplepdf to any anchor tag to open them with SimplePDF:

<a href="/example_without_pdf_extension" class="simplepdf">Open with SimplePDF</a>

Advanced usage

In case you want to have more control over how the modal for editing PDFs is invoked, you can directly interact with the simplePDF global variable that is injected in the window by the script.

Overriding the automatic locale detection

SimplePDF currently supports the following languages automatically detects the language of the page (using the lang attribute) and opens the editor in the following languages:

• English (en)
• German (de)
• Spanish (es)
• French (fr)
• Italian (it)
• Portuguese (pt)

If you wish to override the automatic detection, you can specify the locale attribute on the script tag as follows:

<script
  src="https://unpkg.com/@simplepdf/web-embed-pdf"
  companyIdentifier="yourcompany"
  locale="fr"
  defer
></script>

Opening the editor programmatically

Open the editor with a specific PDF

window.simplePDF.openEditor({ href: 'publicly_available_url_pdf' });

Let your customers pick the PDF on their computer

window.simplePDF.openEditor({ href: null });

Closing the editor programmatically

window.simplePDF.closeEditor();

Specifying a context

The context is sent as part of the submission via the webhooks integration: read more

Use-cases:

• Link a submission back to a customer
• Specify the environment / configuration of the editor

Do not store sensitive information in the context (!!) as it is available locally to anyone inspecting the code

window.simplePDF.openEditor({
  href: 'publicly_available_url_pdf',
  context: {
    customer_id: '123',
    environment: 'prod',
  },
});

Updating the configuration programmatically

Use-cases:

• Change the locale at run time
• Enabling / Disabling Auto Open: automatically opening the editor for anchor tags pointing to PDF files. By default enabled when SimplePDF is added as a script
• Change the company identifier at run time

window.simplePDF.setConfig({
  locale: 'fr',
  autoOpen: false,
});