Embed Integration

Fill & Return Directly to Your Page

Users fill and sign PDFs on eFormly, then the completed file is automatically sent back to your upload form. No downloads, no manual re-upload.

How It Works

User clicks link

eFormly opens in a popup

Fill & sign the PDF

Text, signatures, checkmarks

Click Submit

PDF sent back via postMessage

File appears

Injected into your Dropzone

Quick Start

Add two lines to your page. That's it.

1. Include the embed script

<script src="https://eformly.app/embed.js"></script>

2. Configure the integration

<script>
  EformlyEmbed.fillAndReturn({
    pdfUrl: 'https://your-site.com/docs/form.pdf',
    targetDropzone: '.dropzone',      // CSS selector for your Dropzone
    buttonSelector: '.fill-pdf-btn',  // Button that opens eFormly
  });
</script>

Full Example: Dropzone Integration

Complete example showing how to add a "Fill on eFormly" button next to an existing Dropzone upload form.

<!-- Your existing Dropzone form -->
<form action="/upload" class="dropzone" id="my-dropzone">
  <p>Click or drag your files here</p>
</form>

<!-- Add a "Fill on eFormly" button -->
<button class="fill-pdf-btn" type="button">
  ✏️ Fill & Sign on eFormly
</button>

<!-- Include the embed script -->
<script src="https://eformly.app/embed.js"></script>
<script>
  EformlyEmbed.fillAndReturn({
    pdfUrl: 'https://your-site.com/docs/no-claims-cert.pdf',
    targetDropzone: '#my-dropzone',
    buttonSelector: '.fill-pdf-btn',
    filename: 'no-claims-certificate-signed',
    onSuccess: function(file, injectedIntoDropzone) {
      if (injectedIntoDropzone) {
        console.log('✅ File added to Dropzone:', file.name);
      } else {
        console.log('File received, manual handling needed');
      }
    },
    onError: function(error) {
      alert('Error: ' + error.message);
    }
  });
</script>

Without Dropzone (Generic)

If you don't use Dropzone.js, use the onSuccess callback to handle the returned file however you like.

<script>
  EformlyEmbed.fillAndReturn({
    pdfUrl: 'https://your-site.com/docs/form.pdf',
    buttonSelector: '#fill-btn',
    onSuccess: function(file) {
      // 'file' is a standard File object
      // You can upload it via FormData, add to any upload library, etc.
      var formData = new FormData();
      formData.append('document', file);
      fetch('/your-upload-endpoint', {
        method: 'POST',
        body: formData
      });
    }
  });
</script>

Programmatic API

Open eFormly programmatically without attaching to a button.

// Open directly
var handle = EformlyEmbed.open({
  pdfUrl: 'https://your-site.com/docs/form.pdf',
  onSuccess: function(file) {
    myUploader.addFile(file);
  }
});

// Close programmatically if needed
handle.close();

⚡ Smart Features

Auto Dropzone Discovery

If targetDropzone isn't set (or doesn't match), the script automatically looks for the closest Dropzone to the trigger button. This is perfect for pages with multiple Dropzones — just place the button near the right one.

<!-- The button is INSIDE the Dropzone form — auto-detected! -->
<form action="/upload" class="dropzone">
  <p>Drop files here</p>
  <button class="fill-pdf-btn" type="button">✏️ Fill on eFormly</button>
</form>

<script>
  EformlyEmbed.fillAndReturn({
    pdfUrl: 'https://your-site.com/form.pdf',
    buttonSelector: '.fill-pdf-btn',
    // No targetDropzone needed — found automatically!
  });
</script>

Automatic .pdf Extension

The returned file always has a .pdf extension, even if the filename option doesn't include one. No need to worry about missing extensions.

Configuration Options

Option	Type	Required	Description
pdfUrl	string		HTTPS URL of the PDF to fill
targetDropzone	string	—	CSS selector for your Dropzone element
buttonSelector	string	—	CSS selector for the trigger button. Also used as a fallback to find the closest Dropzone if `targetDropzone` isn't set
filename	string	—	Custom filename for the returned PDF
onSuccess	function	—	Called with `(file, injected)` when PDF is returned
onError	function	—	Called with `(error)` on failure

Security

Origin validation: Messages are only sent to your domain via postMessage targetOrigin.
HTTPS enforced: Both PDF URLs and client origins must use HTTPS.
No data stored: Embed mode sessions are ephemeral — the filled PDF is only sent to your page.
Message validation: The embed script only processes messages from eformly.app with the eformly:pdf-ready type.

Ready to Integrate?

Add the embed script to your page and start letting users fill PDFs without leaving your site.

Back to Docs Need Help?