@joyfill/sdk-js NPM

sdk-js

Joyfill sdk for embeddable UI and components.

Install

npm install @joyfill/sdk-js

Getting Started

Head over to Joyfill developer docs.

Retrieve API Key

From the Joyfill Manager we now need to create an API Key. Navigate to the API Keys menu option from the top nav menu of the Joyfill Manager.

Embed your Portal

Use the following code to embed your Portal into your app. Also for more help run our /examples/js example project.

ESM

// /index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div id="joyfill-portal"> <!--injects here--> </div>
    <script type="module" src="src/index.js"></script>
  </body>
</html>

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

/**
 * call whenever you'd like us to insert the portal
 * within the provided mountOn id
 */
Portal.load({
  userAccessToken: '<valid_useraccesstoken>',
  mountOn: '#joyfill-portal',
  mode: 'edit', // edit | fill | readonly
  onUploadAsync: ({ type, document, fileUploads }) => {
    /* handle file uploads here */
  },
  onSubmit: ({ type, doc }) => {
    /* handle final save of a from here */
  },
  onChange: ({ type, params, changes, doc }) => {
    /* handle actively made form changes here */
  }
});

Vanilla JS

Similar to ESM just can't use ES module imports.

// /index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/joyfill/dist/joyfill.js"></script>

  </head>

  <body>
    <div id="joyfill-portal"> <!--injects here--> </div>
    <script src="src/index.js"></script>
  </body>
</html>

// /index.js
window.onload = function() {
  var joyfill = window.joyfill;
  joyfill.Portal.load({
    userAccessToken: 'abcefg_doe123>',
    mountOn: '#joyfill-portal',
    ...<otherfields>
  });
}