Option 2: iFrame

Embed Joyfill through an iFrame

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">
    <title>Joyfill iFrame Example</title>
      style="width: 100%;border: none;height: 100vh;"

Construct the iFrame Link


URL Attributes

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