Embed

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:

<script async src="https://sdk.arengu.com/forms.js"></script>

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:

<div data-arengu-form-id="YOUR_FORM_ID"></div>

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:

https://www.acme.com/?code=ABC123

And this of using the custom attribute:

<div data-arengu-form-id="YOUR_FORM_ID" data-field-code="ABC123"></div>

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:

ArenguForms.embed(formId, selector);

The embed call has the following fields:

Example using the query selector:

ArenguForms.embed('5073697614331904', '.form-container');

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:

ArenguForms.embed('5073697614331904', '.form-container', {
  userId: '123456',
  email: 'jane.doe@arengu.com'
});

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:

const container = document.querySelector('.form-container');
ArenguForms.embed('5073697614331904', container);

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:

npm install --save react-arengu-forms

Then add the JS SDK snippet to your index.html:

<script async src="https://sdk.arengu.com/forms.js"></script>

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:

import React from "react"
import { ArenguForm } from "react-arengu-forms"

const IndexPage = () => (
  <div>
    <ArenguForm id="YOUR_FORM_ID" />
  </div>
)

export default IndexPage

Hidden fields

Note that each field ID has to match the corresponding URL parameter to populate it:

import React from "react"
import { ArenguForm } from "react-arengu-forms"
 
const IndexPage = () => (
  <div>
    <ArenguForm
      id="YOUR_FORM_ID"
      hiddenFields={[
        {
          key: 'userId',
          value: '12345',
        },
        {
          key: 'source',
          value: 'anyString',
        },
      ]}
    />
  </div>
)
 
export default IndexPage

Gatsby

To embed a form in Gatsby, first install our Gatsby library:

npm install --save gatsby-plugin-arengu-forms

Add our plugin to your gatsby-config.js file:

plugins: [`gatsby-plugin-arengu-forms`]

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:

import React from "react"
import { ArenguForm } from "gatsby-plugin-arengu-forms"

const IndexPage = () => (
  <div>
    <ArenguForm id="YOUR_FORM_ID" />
  </div>
)

export default IndexPage

Hidden fields

Note that each field ID has to match the corresponding URL parameter to populate it:

import React from "react"
import { ArenguForm } from "gatsby-plugin-arengu-forms"

const IndexPage = () => (
  <div>
    <ArenguForm
      id="YOUR_FORM_ID"
      hiddenFields={[
        {
          key: 'userId',
          value: '12345',
        },
        {
          key: 'source',
          value: 'anyString',
        },
      ]}
    />
  </div>
)

export default IndexPage

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:

[arengu-form id="YOUR_FORM_ID"]

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.