Javascript
Learn how to display your first form using the Joyfill JS SDK.
Prerequisites
To get the most out of this guide, you’ll need the following:
- Complete the Setup Guide
- A User Access Token (see setup guide)
- A Template Identifier (see setup guide)
Requirements
1. Install
Using a package manager
npm install --save @joyfill/components
yarn add @joyfill/components
Using a CDN
https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js
2. Usage
- Add the Template identifier and User Access Token from the previous setup step to the
index.js
file. - Add the User Access Token from the preview setup step to the
api.js
file. - ❗️Important Note: ensure you use the full import path if you're using JS modules and not the CDN. Full path
import Joyfill from '@joyfill/components/dist/joyfill.min.js'
import Joyfill from "@joyfill/components/dist/joyfill.min.js";
import { retrieveTemplate } from './api.js';
const initJoyfill = async () => {
const identifier = '<REPLACE_YOUR_TEMPLATE_IDENTIFIER>';
const template = await retrieveTemplate(identifier);
Joyfill.JoyDoc(
document.getElementById('joyfill'),
{
doc: template,
mode: 'edit',
onChange: (changelogs, doc) => {
/**
* Changelogs represent the individual change that was made
* Data represents the entire data structure with all new changes applied.
*/
console.log('onChange: ', changelogs, doc);
}
}
);
}
initJoyfill();
<!DOCTYPE html>
<html>
<head>
<title>Joyfill for Javascript Example</title>
<base href=".">
<meta charset="UTF-8" />
</head>
<body>
<div id="joyfill"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
const userAccessToken = "<REPLACE_USER_ACCESS_TOKEN>";
const apiBaseUrl = "https://api-joy.joyfill.io";
export const retrieveTemplate = async (identifier) => {
//See API Doc Here: https://docs.joyfill.io/reference/retrieve-a-template
const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
method: 'GET',
mode: 'cors',
headers: {
Authorization: `Bearer ${userAccessToken}`,
'Content-Type': 'application/json'
},
});
const data = await response.json();
return data;
}
3. Try it yourself
If you’re looking for a full react example project that shows many more of the Joyfill SDK capabilities and workflows then head over to our full example project and try it for yourself.
Updated 11 months ago