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">
<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 |
Updated 6 days ago