Error While embeding Orbeon Form In Next.Js app using JavaScript Embedding API

Question

I have a Orbeon form which I want to embed in my Next.Js app. From the Orbeon documents I found the below document :

https://doc.orbeon.com/form-runner/link-embed/javascript-api

As per the document I am trying to use like below code snippet in my Next.js application :

ORBEON.fr.API.embedForm(
    document.getElementById("my-container-element"),
    "/orbeon",
    "human-resources",
    "job-application",
    "new"
)
.then(() => {
    console.log("`embedForm()` successfully loaded the form");
})
.catch((e) => {
  console.log("`embedForm()` returned an error");
  console.log(e);
});

I am getting the error "ORBEON is undefined". Can anyone help me on this ?

Answer 1

Did you include the JavaScript Embedding API in your page, as described in the "JavaScript to include" section of the JavaScript Embedding API?

If you have, the problem may be caused by your code running before this script. In this case, you may want to change the order of the <script> so that the JavaScript Embedding API script element appears before your own script or the Next.js script.