pdfFiller SDK Guide

Home
Normal Link
Active Link

Embed pdfFiller Guide

Embed pdfFiller allows to integrate the PDF Editor, a fundamental part of pdfFiller, into any website - in a similar with the traditional REST API fashion, but in a more convenient way with wide possibilities for customizing the Editor and its functionality to suit the needs of your business.

Talk to salesDownload Guide as PDF

By clicking «Download Guide as PDF» you agree to the Terms of Service and Privacy Policy.

Table of contents

Get started

Overview

What is Embed pdfFiller?

Getting started

Getting started with Embed pdfFiller is simple, yet it does require basic programming skills. With Embed pdfFiller, you can create applications to enable customers to edit and fill out various documents online.

Every application you create with Embed pdfFiller contains our PDF Editor. When integrating into your website, you can select what to embed:

Editor & customized document. You can pre-upload a document into the Editor, customize it by adding fillable fields, and ask your recipients to fill it out and sign. Learn more

Editor only. You embed the Editor and provide a link to any document to be downloaded into the Editor, so your recipients can fill it out. Learn more

To start creating and integrating Embed pdfFiller applications, please follow these steps:

Click on Add application.

Select what you would like to embed:

Editor & customized document.

Editor only.

Follow the instructions for the selected application.

Copy the generated HTML code.

(Optional) Test the HTML code using the CodeSandbox service. The link to CodeSandbox is provided after the code is generated.

Integrate the code into your website.

Activate the application from the Dashboard.

With Embed pdfFiller, you can create as many applications as you need.

Overview of functionality

Embed pdfFiller offers a powerful PDF Editor that works with multiple document formats, such as PDF, DOC, DOCX, RTF, TXT, PPT, PNG, and JPEG, and allows uploading documents up to 25 MB. Using the JavaScript API, you can control various settings and features of the Editor through the external interface.

As a creator of applications, you will be able to add fillable fields to the document and modify them, as needed. You will also be able to test your document in the Preview mode. If no fillable fields are added, the document will be distributed as a read-only.

You can select an action to be performed when your recipients finish filling out the document and click the Done button in the Editor:

Save a document as a fillable PDF(default).

Fillable PDF documents can be filled out without a PDF editor.

Save a document as a PDF.

Print a document.

Save a document as PDF BLOB.

This option is suitable for advanced integrations.

Types of applications

Applications you can create are divided into two groups based on what you need to embed:

Editor & customized document

This application contains the Editor and a pre-uploaded document. You can customize it by adding and editing fillable fields, if needed. This application runs at a high upload speed for the Editor and is recommended to use.

This application is best for a recurring workflow with a standard document, such as a contract, a service agreement, or a waiver, where the contents of the document always stay the same, and only customers’ information changes. By adding fillable fields, you will ensure that customers’ information is collected.

Recipients will be able to read the document, fill it out, sign, and receive a copy of the document. Recipients will also be able to add and edit fillable fields, if you allow them to do so in the process of setting up your application.

Editor only

This application contains the Editor only. You provide a link to a document to be downloaded into the Editor. You can choose any document, depending on your business’s needs. With this application, the Editor’s performance and upload speed will be affected by the document format, size, and whether it contains any interactive elements.

The Editor only applications are suitable for non-recurring workflows. Similar to the other application, recipients will be able to read the document, fill it out, sign, and receive a copy. Recipients also will be able to add and edit fillable fields, if you allow them to.

Add application

When you’re ready to add a new application, click Add application from your Dashboard, then select what you would like to embed:

Editor & customized document.

Editor only.

Overview

The process of embedding the Editor with a customized document consists of five stages:

Upload a document.

Add fillable fields.

Set up an application.

Preview a document.

Get a code.

Upload a document

Start your application by uploading a document in PDF, DOC, DOCX, RTF, PPT, JPEG, PNG, or TXT format, up to 25MB. There are two ways to upload a document:

Drag and drop a document to the uploader.

Select from the computer.

Add fillable fields

In this step, your document will be opened in the Editor.

To add fillable fields to the document:

In the right side panel, select Fields.

Select a field type.

There are two field types - standard and template.

Standard fields include:

Text

Checkbox

Formula

Number

Signature

Radio button

Date

Initials

Dropdown

Image

Template fields include:

Name

Zip code

EIN

US currency

Credit card number

Company

EU currency

US States collection

Title

Age

Gender

US Phone number

SSN

Click on the selected field and drag the field to the document, then click to paste it.

Adjust the size of the field by dragging out any corner.

You can set up an order in which the fields should be filled out.

To rearrange the filling order of the fields:

In the right side menu, click Order.

At the top of the opened section, select the page where you’d like to set up a filling order.

Drag the fields to manually rearrange them in order you need.

You can also adjust the width of the document and preview a document in the Editor.

To adjust the width of the document, click Fit Width at the top menu and select the desired width.

To preview the document, click Preview at the top menu. Preview allows you to test your document. No changes are saved in the preview mode.

To exit preview, click Exit preview.

When you finish working in the Editor, click Save at the top menu or Next at the bottom of the page. Both options will ensure changes in your document are saved, and you will be taken to the next step of your application process.

Set up an application

In this step, you will customize your application.

Application name and description

Enter a name and description for your application. It's for your information only, it won’t be visible to your recipients.

Note: The description is optional.

Custom logo

To add your logo to the application, please provide a URL of the logo, for example, https://domain.com/image.jpg.

Logo can be in JPEG, GIF, and PNG, up to 15 MB.

Your logo will be displayed in the top left corner of the Editor.

Web domains

Enter the domains where your application will be embedded. This field is required to fill out.

Editor's tools and settings

In this section, you can select which Editor’s tools and options will be available to the recipients when filling out your document.

Tools

Text for adding a text to the document.

Sign for adding an electronic signature.

Initials for adding initials.

Date for adding a date.

Cross for adding a cross mark.

Check for adding a check mark.

Circle for adding a circle mark.

Erase for erasing text or sections of the document.

Highlight for highlighting text or sections of the document.

Blackout for blacking out text or sections of the document.

Text box for adding a text entry box.

Arrow for drawing an arrow.

Line for drawing a line.

Draw for drawing on the document.

Sticky for adding a sticky note.

Settings

Wizard can be turned on to guide the recipient through the document field-by-field.

Help can be used to reach out to customer support.

Search can be used to search the PDF Library of documents.

Pages panel can be used to rearrange or add new pages to the document.

Extra

Add fillable fields for adding fillable fields to the document.

Add watermark for adding watermarks, date, page and bates numbering.

PDF document storage

Select the type of document storage:

Internal. This is a simple and secure option, and it is set by default. We store your documents and data on our servers until you decide to delete the application.

External. You store your documents and data on your servers. When you choose this option, you need to download a PDF document or a fillable PDF document (as a JSON file) to your computer, then host it on your server, and create a link to it. Then you can paste the link in this section and test your document, if needed.

When you are done setting up your application, click Next.

Preview a document

In this step, you can preview your document in the Editor.

To continue setting up your application, click Done at the top of the page or Next at the bottom.

Get a code

In this step, the HTML code to your application is generated. You can copy it to the clipboard and paste it to your website.

You can also open the code in codesandbox.io to test it. CodeSandbox is an online code editor where you can edit the code, if needed.

Click Done to move to the next step.

Activate an application

After you click Done in the previous step, you will be taken to the Dashboard. Here you can see all the applications you created.

The last step in the process of adding a new application is activation.

To activate your application, follow these steps:

Select an application from the list.

Click on three dots to the right of the selected application.

Click Activate.

Now after you embed the HTML code to your website, the application you created will be live and ready to use.

For more actions you can perform with your application, please review information in the Dashboard section.

Editor only

The Editor only application contains the Editor. You need to provide a link to a document to be downloaded into the Editor and to be filled out by the recipients. You can choose any document. Please note: The size and contents of the documents will affect the uploading speed of this application. For high uploading speed, it is recommended to embed the Editor & customized document.

The process of embedding the Editor only application consists of three stages:

Set up an application.

Preview a document.

Get a code.

Set up an application

Fill out the following information to set up your application.

Application name and description

Enter a name and description for your application. It's for your information only, it won’t be visible to your recipients.

Note: The description is optional.

Custom logo

To add your logo to the application, please provide a URL of the logo, for example, https://domain.com/image.jpg.

Logo can be in JPEG, GIF, and PNG, up to 15 MB.

Your logo will be displayed in the top left corner of the Editor.

Web domains

Enter the domains where your application will be embedded. This field is required to fill out.

Link to a test document

Please provide a link (URL) to the document you would like to test your application with. This is a required step and a field to fill out. Your recipients will not have access to this document, this is for testing purposes only.

Editor's tools and settings

In this section, you can select which Editor’s tools and options will be available to the recipients when filling out your document.

Tools

Text for adding a text to the document.

Sign for adding an electronic signature.

Initials for adding initials.

Date for adding a date.

Cross for adding a cross mark.

Check for adding a check mark.

Circle for adding a circle mark.

Erase for erasing text or sections of the document.

Highlight for highlighting text or sections of the document.

Blackout for blacking out text or sections of the document.

Text box for adding a text entry box.

Arrow for drawing an arrow.

Line for drawing a line.

Draw for drawing on the document.

Sticky for adding a sticky note.

Settings

Wizard can be turned on to guide the recipient through the document field-by-field.

Help can be used to reach out to customer support.

Search can be used to search the PDF Library of documents.

Pages panel can be used to rearrange or add new pages to the document.

Extra

Add fillable fields for adding fillable fields to the document.

Add watermark for adding watermarks, date, page and bates numbering.

Preview a document

In this step, you can preview the document to test your application (you provided a link to this document in the previous step). The document will be opened in the Editor.

Please note: This document is for testing purposes only. Your recipients will not be able to see or use this document.

You can perform several actions with the document:

You can add fillable fields.

You can edit fillable fields.

You can add watermarks, date, bates and page numbering.

Add fillable fields

Please read how to add fillable fields to the document here.

Edit fillable fields

To edit a fillable field:

Click on the field in the document you’d like to edit.

Edit database field name, if needed. Database field name can be used to extract data from the field using JavaScripts’s getFieldsContent from the embed code.

Add some text to help. This is a tooltip that will appear when a recipient hovers over the field. You can customize it or keep the default text.

Change field type, if needed.

Customize Advanced settings, if needed.

You can adjust the order in which the fields should be filled out.

To rearrange the filling order of the fields:

In the right side menu, click Order.

At the top of the opened section, select the page where you’d like to set up a filling order.

Drag the fields to manually rearrange them in order you need.

Add watermark, date, page and bates numbering

To add a watermark, date, page or bates numbering, follow these steps:

Click Add watermark in the right side menu.

Select one of the options:

Watermark

Date

Page numbering

Bates numbering

Click Close at the top of the page. Your changes are automatically saved.

Click Done or Next when you’re finished previewing the document.

Get a code

In this step, the HTML code to your application is generated. You can copy it to the clipboard and paste it to your website.

You can also open the code in codesandbox.io to test it. CodeSandbox is an online code editor where you can edit the code, if needed.

Click Done to move to the next step.

Activate an application

After you click Done in the previous step, you will be taken to the Dashboard. Here you can see all the applications you created.

The last step in the process of adding a new application is activation.

To activate your application, follow these steps:

Select an application from the list.

Click on three dots to the right of the selected application.

Click Activate.

Now after you embed the HTML code to your website, the application you created will be live and ready to use.

For more actions you can perform with your application, please review information in the Dashboard section.

Dashboard

The Dashboard is where you can find all the applications you create.

The Dashboard menu allows you to:

View, manage and create applications (Applications).

Learn how to use the Embed pdfFiller SDK or resolve issues (Guide).

Log out (Log Out).

Applications

Applications tab allows you to view information about the applications you create, such as:

The application name.

The date the application was published on.

Whether the application has been opened and filled out.

The application’s status (active or inactive).

Here are the actions you can perform with the created applications:

Edit an application.

Activate an application.

Deactivate an application.

Get a code.

Delete an application.

Edit an application

From the Dashboard, you can return to the Set up step of your application and edit it, along with the document attached to the application.

To edit an application:

Select the application you’d like to edit.

Click on three dots to the right, then select Edit.

Edit any information as needed.

Click Next.

Activate an application

When you create an application, its status is inactive. Follow these steps to activate your application from the Dashboard, so your recipients can use it:

Select the application you’d like to activate.

Click on three dots to the right, then select Activate. Once your application is activated, you will see the date and time in the Date published column.

Deactivate an application

When you no longer need an application, you can deactivate it or delete it.

To deactivate an application from the Dashboard:

Select an application you’d like to deactivate.

Click on three dots to the right, then select Deactivate.

You can activate the application again if you need to. Follow the steps to activate an application.

Get a code

To get a code for your application from the Dashboard:

Select an application you’d like to get a code for.

Click on three dots to the right, then select Get a code.

Copy the generated code to the clipboard.

Delete an application

If you need to delete an application, follow these steps from the Dashboard:

Select an application you’d like to delete.

Click on three dots to the right, then select Delete.

Please note: Deleted applications cannot be restored. If you plan to use the application in the future, you can temporarily deactivate it.

Resolve an issue

Please contact our support team at support@pdffiller.com to resolve any issues, submit feedback or special requests. Please indicate that your message is for the developers team of the Embed pdfFiller.