# Javascript SDK

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

### What you need <a href="#what-you-need" id="what-you-need"></a>

* An active [Feathery](https://feathery.io/) account and form
* Your form's ID. This can be found on the form's settings page on the dashboard.

### Quickstart <a href="#quickstart" id="quickstart"></a>

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.&#x20;

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FqiOZ0jd1M2XgZGb3LPNq%2Fimage.png?alt=media&#x26;token=47d412f3-1af8-4b3d-ab77-d3775b4179ba" alt="" width="300"><figcaption></figcaption></figure>

### API Guide <a href="#api-guide" id="api-guide"></a>

[Same JS methods](https://docs.feathery.io/develop/react/api-guide) as the React library. `renderAt` replaces the React \<Form/> component.

#### `Feathery.renderAt` <a href="#featheryrenderat" id="featheryrenderat"></a>

Embed your Feathery form into an HTML element with the specified `elementID`. The function returns a [context](https://docs.feathery.io/react/api-guide/form/contextref#context-properties) 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](https://docs.feathery.io/develop/react#form) |