@joyfill/sdk-js
v1.0.9
Published
Joyfill sdk for embeddable UI and components.
Downloads
10
Readme
sdk-js
Joyfill sdk for embeddable UI and components.
Install
npm install @joyfill/sdk-jsGetting 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>
});
}Next steps
Check out the Joyfill developer docs to see what's needed to get your Portal working in production, including: