Skip to main content

Setup

Setup without API​

Add the iframe element in your html code. Make sure widgetId= and formId= are correct, finally adjust height and width to your desired size. You can optionally pass lang= to overwrite automatic UI language.

<iframe
  src="https://detached-form.imbox.io/prod/app/index.html?widgetId=YOUR_WIDGET_ID&formId=YOUR_FORM_ID"
  height="1000"
  width="100%"
  frameborder="0"
></iframe>

Setup with API​

Using the self invoking api​

If you want dynamic height you can use our self invoking api. It's important that the api script is loaded after your html element.

1. Add an html element with an uniq id, (if its not an iframe the element will be replaced with an iframe)

<iframe
  id="imbox-form"
  src="https://detached-form.imbox.io/prod/app/index.html?widgetId=YOUR_WIDGET_ID&formId=YOUR_FORM_ID"
  frameborder="0"
></iframe>

or

<div id="imbox-form"></div>

2. Include the api script

<script src="https://detached-form.imbox.io/prod/api/loader.js"></script>

3. Add these properties to your html element

  • data-init="true" Tells our api to use the self invoke option
  • data-dynamicHeight="true" Enables dynamic height for your element

Example:

<iframe
  id="imbox-form"
  src="https://detached-form.imbox.io/prod/app/index.html?widgetId=&formId="
  frameborder="0"
  data-init="true"
  data-dynamicHeight="true"
></iframe>

<script src="https://detached-form.imbox.io/prod/api/loader.js"></script>

Using the full api​

If you want full control over the embeded form, listen to events, programmatically insert data etc, use this method.

1. Add an html element with and uniq id, (if its not an iframe the element will be replaced with an iframe)

<iframe
  id="imbox-form"
  src="https://detached-form.imbox.io/prod/app/index.html?widgetId=YOUR_WIDGET_ID&formId=YOUR_FORM_ID"
  height="1000"
  width="100%"
  frameborder="0"
></iframe>

or

<div id="imbox-form"></div>

2. Include the api script

<script src="https://detached-form.imbox.io/prod/api/loader.js"></script>

3. Initiate the api with new Imbox.Form(id, options) first parameter should be an uniq id referencing step 1

Example:

<script type="text/javascript">
  function onImboxFormIframeAPIReady() {
    var form = new Imbox.Form("imbox-form", {
      height: "1200",
      width: "100%",
      formId: 2369,
      widgetId: 865,
      dynamicHeight: false,
      events: {
        onSubmitChange: (event) => {
          console.log(event)
        },
        onFetchingChange: (event) => {
          console.log(event)
        },
        onError: (event) => {
          console.log(event)
        }
      }
    })
  }

  window.onload = onImboxFormIframeAPIReady
</script>

Api options

height​

Desired iframe height.

height: string
new Imbox.Form("imbox-form", {
  height: "1200"
})

width​

Desired iframe width.

End in % for a percentage based width, example: width: "10%"

width: string
new Imbox.Form("imbox-form", {
  width: "1200"
})

formId​

Required* uniq id of form to load.

formId: number
new Imbox.Form("imbox-form", {
  formId: 1
})

widgetId​

Required* uniq id.

widgetId: number
new Imbox.Form("imbox-form", {
  widgetId: 1
})

dynamicHeight​

Enables the form to automaticly resize height when form changes.

dynamicHeight: boolean
new Imbox.Form("imbox-form", {
  dynamicHeight: true
})

lang​

Sets language to your desire, enter a language code.

lang: string
new Imbox.Form("imbox-form", {
  lang: "sv"
})

This can also be added to the src url in your iframe, example:

<iframe
  id="imbox-form"
  src="https://detached-form.imbox.io/prod/app/index.html?widgetId=YOUR_WIDGET_ID&formId=YOUR_FORM_ID&lang=sv"
  frameborder="0"
></iframe>

events​

Listen to form events see Event listeners

new Imbox.Form("imbox-form", {
  events: {}
})