Embed Form widget
Retrieve the html_widget property from the response of the request, and embed it into the desired location on your page where you want the form to appear.
Embedding the widget
There are two recommended ways of embedding the HTML widget, server side or client side.
Server side
Embed the HTML widget in your page served by your backend.
Example request
<html>
<body>
<!-- Your page html -->
{{response.data}}
</body>
</html>
Client side
Get the HTML widget with a HTTP fetch call and inject it dynamically, using Javascript.
Example request
const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Accept", "application/json");
headers.append(
"api-key",
"<YOUR-API-KEY>"
);
const url = "https://api.arendehanteraren.com/api/v1/public/channel/form/" + "<YOUR-FORM-ID> + "/widget";
const response = await fetch(url,
{
method: "GET",
headers: headers,
mode: "cors",
credentials: "include",
}
);
const { data } = await response.json();
const mySection = document.getElementById("my-form-section");
mySection.innerHTML = data;
// It's essential to do this, as without it the script tags won't be evaluated.
const formContainer = document.getElementById("form-container");
const scriptTags = formContainer.getElementsByTagName("script");
for (let i = 0; i < scriptTags.length; i++) {
const parentNode = scriptTags[i].parentNode;
const newScriptTag = document.createElement("script");
newScriptTag.type = "text/javascript";
newScriptTag.text = scriptTags[i].text;
if (parentNode) parentNode.replaceChild(newScriptTag, scriptTags[i]);
}
Then you should see your form rendered in the browser.