Thanks to our JS SDK, Arengu forms can be embedded in every frontend framework, including popular CMS platforms and landing page builders, with two simple lines of code.
There are two methods to embed the forms: using a HTML tag (recommended) or calling our ‘embed’ method. Check how to proceed in each case.
HTML & JavaScript
You will find the code under the ‘Embed’ section of the form. This is the recommended option and the one you should use in page builders like Webflow, Instapage or Unbounce.

HTML tag
To start using Arengu on your website, the first step is to load the JavaScript SDK into it. Paste this snippet into the head tag of your website:
Our JS SDK will be loaded asynchronously, so it won’t affect the loading speed of your site.
Basic usage
To embed the form, just place this HTML tag where you want it to appear:
Then replace the ‘YOUR_FORM_ID’ string with the ID of the form that you want to embed. You will find it in your form settings. You can also get the HTML tag from the editor, with corresponding ID already included, in the ‘Embed’ tab.
You can place multiple HTML tags on the same page. The SDK will detect all tags with data-arengu-form-id attribute and embed the forms inside them.
Hidden fields & Prefill values
You can populate field or hidden field values in your form, using URL parameters or the data-field-field_id attribute. Remember to replace the ‘field_id’ with the real identifier, because the field ID has to match the URL parameter to prefill it.
This is an example of using URL parameters for code field:
And this of using the custom attribute:
Embed method — Advanced
You can also programmatically embed the form within an existing process, for example, after an event that generates a variable that is not available before page load.
To use this method, you'll need to have control over our SDK's load cycle, which is asynchronous. You will simply need to listen for the 'af-init' internal event to know if the SDK is loaded. If it isn't, it will return an error saying the form doesn't exist or isn't defined.
This is the embed method definition:
The embed call has the following fields:
Example using the query selector:
Hidden fields & Prefill values
Just like with the HTML tag, you can populate field or hidden field values in a form, using URL parameters or the data-field-field_id attribute.
Example using the query selector and populated values:
That snippet will embed the form with ID 5073697614331904 into the element with .form-container class. Note that the field ID has to match the URL parameter to prefill it.
Another example using the element directly:
In this case, it gets a reference to the element and passes it directly to the embed() method.
React
To embed a form in React, first install our React library:
Then add the JS SDK snippet to your index.html:
The Gatsby call has the following fields:
Note that you can get the code from the editor, with corresponding ID, in the ‘Embed’ tab of the form that you want to embed.
Basic usage
Import our component and place it where you want your form to appear:
Hidden fields
Note that each field ID has to match the corresponding URL parameter to populate it:
Gatsby
To embed a form in Gatsby, first install our Gatsby library:
Add our plugin to your gatsby-config.js file:
The Gatsby call has the following fields:
Remember that you can get the code from the editor, with proper form ID, in the ‘Embed’ tab of the form. Gatsby automatically adds the SDK snippet, so you don't have to do it manually.
Basic usage
Import our component and place it where you want the form to appear, with this syntax:
Hidden fields
Note that each field ID has to match the corresponding URL parameter to populate it:
WordPress
To embed a form on a WordPress page, first install the Arengu Forms plugin in the ‘Plugins’ section of your WordPress CMS.

Shortcode
Arengu's forms can be embedded in any post or page just by copy-pasting a shortcode. Any changes you make to them will be automatically updated without the need to re-embed.

This is the shortcode that you need to paste where you want the form to appear:
You can get it from the editor, with corresponding form ID, in the ‘Embed’ tab of the form.

If you need to use hidden fields or prefill form fields, you can use the HTML tag instead of the shortcode. This will allow you to also use the 'Embed' method to programmatically embed the form within an existing process of your website.