Joyfill's Drag-and-Drop Builder, Fillable Forms and PDFs, Form Previewer, and more can be added to your web application and marketing website via an iFrame.

What is an iFrame?

The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one. You can read more about iFrames here.

Step 1: Adding the iFrame

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Joyfill iFrame Example</title>
  </head>
  <body>
    <iframe
      src="https://app-joy.joyfill.io/embed?mode=<mode>&document=<document_id>&userAccessToken=<token>"
      style="width: 100%;border: none;height: 100vh;"
    >
    </iframe>
  </body>
</html>

Construct the iFrame Link

https://app-joy.joyfill.io/embed?mode=<mode>&document=<document_id>&userAccessToken=<token>

URL Attributes

Property	Type	Description
mode	String	Required. Specifies what display mode the component should be in. Learn more about modes here: https://docs.joyfill.io/docs/modes
document	String	Optional. Specifies an existing Joyfill document/template identifier that should be loaded into the iFrame.
userAccessToken	String	Pass a valid user access token that is retrieved via our API using your organization ID