IFRAME.md

SimplePDF Embed using an Iframe

SimplePDF Embed React and Web allow you to easily integrate SimplePDF using a single line of code by displaying the editor in a modal.

If you're however interested in having more control over the way SimplePDF is displayed in your app, such as changing the way the modal looks or dropping it altogether – injecting the editor into a div for example, read on:

Show me an example!

With a SimplePDF account (to collect customers' submissions)

Get your own SimplePDF account

Let your users pick the file on their computer

- Replace COMPANY_IDENTIFIER with your own

<iframe src="https://COMPANY_IDENTIFIER.simplePDF.eu/editor" frameborder="0">
</iframe>

Open a given PDF file automatically

- Replace COMPANY_IDENTIFIER with your own

- Replace PUBLICLY_AVAILABLE_PDF_URL with the url of the PDF to use.

<iframe
  src="https://COMPANY_IDENTIFIER.simplePDF.eu/editor?open=PUBLICLY_AVAILABLE_PDF_URL"
  frameborder="0"
>
</iframe>

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

<iframe
  src="https://COMPANY_IDENTIFIER.simplePDF.eu/editor?open=PUBLICLY_AVAILABLE_PDF_URL&context=CONTEXT"
  frameborder="0"
>
</iframe>

Where CONTEXT is a URL safe Base64 encoded stringified JSON.

Implementation example

const context = { customerId: "123", environment: "production" };

const encodedContext = encodeURIComponent(btoa(JSON.stringify(context)));

const url = `https://COMPANY_IDENTIFIER.simplePDF.eu/editor?open=PUBLICLY_AVAILABLE_PDF_URL&context=${encodedContext}`;

Without a SimplePDF account (to use the free PDF editor)

Notice how COMPANY_IDENTIFIER has been replaced with embed

Let your users pick the file on their computer

<iframe src="https://embed.simplePDF.eu/editor" frameborder="0"> </iframe>

Open a given PDF file automatically

- Replace PUBLICLY_AVAILABLE_PDF_URL with the url of the PDF to use.

<iframe
  src="https://embed.simplePDF.eu/editor?open=PUBLICLY_AVAILABLE_PDF_URL"
  frameborder="0"
>
</iframe>

Iframe Communication

Only available with a SimplePDF account

Head over here to see the incoming and outgoing events communication

When your users interact with the editor, the Iframe sends events that can allow you to reconcile data on your side or remove the Iframe from your app once a submission has been successfully sent.

Events sent by the Iframe:

Events are stringified (JSON.stringify) before they are sent out

• DOCUMENT_LOADED

type: 'DOCUMENT_LOADED'
data: { document_id: string }

Where document_id is the unique ID of the document that was successfully loaded.

• SUBMISSION_SENT

type: 'SUBMISSION_SENT'
data: { submission_id: string }

Where the submission_id is the unique ID of the submission successfully sent.

Implementation example

const eventHandler = async (event) => {
  const payload = (() => {
    try {
      return JSON.parse(event.data);
    } catch (e) {
      console.error("Failed to parse Iframe event payload");
      return null;
    }
  })();

  switch (payload?.type) {
    case "DOCUMENT_LOADED":
    case "SUBMISSION_SENT":
      console.log("Event received:", payload);
      return;

    default:
      return;
  }
};

window.addEventListener("message", eventHandler, false);

Events sent to the Iframe:

Events must be stringified (JSON.stringify) before they are sent out

• LOAD_DOCUMENT

type: "LOAD_DOCUMENT",
data: { data_url: string }

Implementation example

const iframe = document.getElementById("iframe");

const response = await fetch(
  "https://cdn.simplepdf.eu/simple-pdf/assets/example_en.pdf"
);
const blob = await response.blob();
const reader = new FileReader();
await new Promise((resolve, reject) => {
  reader.onload = resolve;
  reader.onerror = reject;
  reader.readAsDataURL(blob);
});

iframe.contentWindow.postMessage(
  JSON.stringify({
    type: "LOAD_DOCUMENT",
    data: { data_url: reader.result },
  }),
  "*"
);