Javascript SDK

Feathery's Javascript library allows you to embed Feathery forms, access form state, and modify form behavior.

The Javascript integration allows you to embed your form in Javascript-powered web apps or web builders like Webflow.

What you need

• An active Feathery account and form

• Your form's ID. This can be found on the form's settings page on the dashboard.

Quickstart

You can install the JS library from our CDN. Place the following code where you want your form to display. Make sure to replace SDKKey and formId with your relevant info.

<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<div id='container'></div>
<script>
(() => {
    Feathery.init('<SDKKey>');
    // Change to true if your form uses Stytch or Firebase for login.
    const loginEnabled = false;
    Feathery.renderAt('container', { formId: '<formId>' }, loginEnabled);
})();
</script>

The Feathery object is attached at the global scope.

You can automatically copy a JS snippet with the form name and SDK key already inserted by going to any form and clicking the "Javascript" option in the Publish dropdown in the Designer tab.

API Guide

Same JS methods as the React library. renderAt replaces the React <Form/> component.

Feathery.renderAt

Embed your Feathery form into an HTML element with the specified elementID. The function returns a context object that you can store for purposes such as calling validateStep. Additionally, the context object includes a destroy method that allows you to unmount the form. If renderAt is called multiple times with the same elementId then destroy will be called automatically before rendering your new form.

Parameter	Type	Description
elementId	string	ID of the element to embed form into.
props	object	Same as the React form props