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

Include @joyfill/js-sdk
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.
Trigger a portal creation with Joyfill.Portal.load that injects a Portal.
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";

Portal.load({
  userAccessToken: <REPLACE_USER_ACCESS_TOKEN>,
  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">
  <head>
    <title>Joyfill Portal Example</title>
  </head>
  <body>
    <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>
  </body>
</html>

Portal Properties

Property	Type	Description
userAccessToken	String	Pass a valid user access token that is retrieved via our API using your organization ID
mode	String	Can 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
mountOn	String	The HTML element ID is where the form will be injected as a child element.
submitText	Optional, String	Provide the verbiage of the Save Changes button. The buttons text will reflect whatever value is provided here.
onChange	Optional, Callback	Triggered as a user actively edits/fills a form.