Option 2: Portals

Embed Joyfill through a Portal

Joyfill Portals allow developers to add all the power of our Drag-and-Drop Builder, Fillable Forms and PDFs, Form Previewer, etc. easily and quickly.

Think of integrating a Portal in four parts

  1. Include @joyfill/js-sdk
  2. Pass in a userAccessToken, a mountOn HTML element ID (#joyfill-portal), and a modeto tell us if a user is building a form, filling out a form, or previewing a form in read-only mode.
  3. Trigger a portal creation with Joyfill.Portal.load that injects a Portal.
  4. Hook up listeners to respond to events throughout your app based on the user's interactions with the embedded form.

Step 1: Install Joyfill SDK

npm install @joyfill/sdk-js
yarn add @joyfill/sdk-js

Step 2: Get User Access Token

In order to use a Joyfill Portal you will need a user access token. A user access token is how Joyfill will authenticate your Portal Session.

Learn how to generate a user access token here: User Access Tokens

Step 2: Embed and Launch a Portal

import { Portal } from "@joyfill/js-sdk/dist/joyfill.esm.full.js";

  mode: 'edit', // fill | edit | readonly
  mountOn: '#joyfill-portal',
  submitText: 'Save Changes',
  onChange: ({ type, params, changes, doc }) => {
    console.log('on document changes: ', params, changes, doc)
<!DOCTYPE html>
<html lang="en">
    <title>Joyfill Portal Example</title>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="joyfill-portal"><!-- injected here --></div>
    <script type="module" src="src/index.js"></script>

Portal Properties

userAccessTokenStringPass a valid user access token that is retrieved via our API using your organization ID
modeStringCan be of fill, edit, or readonly this respectively sets the mode of the form and can be set dynamically or pre-set if loaded on a page where you know you will always want users to interact with it in a single mode
mountOnStringThe HTML element ID is where the form will be injected as a child element.
submitTextOptional, StringProvide the verbiage of the Save Changes button. The buttons text will reflect whatever value is provided here.
onChangeOptional, CallbackTriggered as a user actively edits/fills a form.