Embed Form into Webpage

Modified on Mon, 26 May at 2:46 PM

If you are a developer attempting to embed a OneBlink Form in your own website, please visit the OneBlink Forms CDN GitHub Repository. It will provide instructions on how to embed a OneBlink Form into a custom website.

Accessing the Website Script

Form Summary

Navigate to the form you want to add to your website, click the script button next to the Form Link.

This will generate a script customised to include the form app ID and form ID. Click the Copy button to copy the script and add to your Website.

SDK

To access and generate the Website Script you can navigate the the SDK page. From here select the Generate Script button in the Forms CDN card.

From here you can select the specific Environment, App, and Form. Once these option have been selected the script will generate, you can then use the Copy button to copy the script.

preFillData Example

The following example will include prefill data for 2 elements a name (fullname) and an email address (your-email).

{fullname:"Donald Duck", 'your-email':"donald.duck@email.com"}

Note: If your form element name contains special characters including spaces, you will need to wrap the property in quotes, hence why in this example 'your-email' typed this specific way.

For your preFillData to render you will need to add the JavaScript object containing your prefillData to the OneBlinkForms.render functions prefillData property. See the example below:

window.addEventListener("load", function () {
  OneBlinkForms.render({
    selector: "#oneblink-form",
    formId: 23460,
    formsAppId: 560,
    submissionRedirectUrl: "www.google.com",
    cancelRedirectUrl: "www.google.com",
    paymentReceiptUrl: "",
    paymentFormUrl: "",
    externalId: "",
    preFillData: {
      fullname: "Donald Duck",
      "your-email": "donald.duck@email.com",
    },
  });
});

In the form builder ensure that your element "name" property matches the prefillData attributes, in this case "your-email".

Get Help

If you have any question or would like assistance with setting up your Website Script please contact us via this support portal or email support@oneblink.io. We are happy to assist in any way we can.