Ui componentsJs snippet
Intelligent Form (JS)
Add an intelligent form UI directly on a dedicated page
Overview
The Intelligent Form component provides a dynamic form interface powered by AI for collecting structured information.
Quick start
Add the below <script> tag to the <head> or <body> of your website.
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js"
defer
></script>Define an element in your page that will be the "container" for the intelligent form.
<div style="display: flex; align-items: center; justify-content: center; height: calc(100vh - 16px);">
<div style="height: 480px;">
<div id="ikp-intelligent-form-target"></div>
</div>
</div>Insert the Intelligent Form by using the Inkeep.IntelligentForm() function.
<script type="module">
const config = {
baseSettings: {
apiKey: "YOUR_API_KEY",
},
formSettings: {
heading: "Contact Support",
description: "Please fill out the form below",
fields: [
{
label: "Name",
name: "name",
inputType: "text",
isRequired: true,
},
{
label: "Email",
name: "email",
inputType: "email",
isRequired: true,
},
],
},
};
// Initialize the widget
const widget = Inkeep.IntelligentForm("#ikp-intelligent-form-target", config);
</script>Intelligent Form Props
| Prop | Type | Required | Description |
|---|---|---|---|
baseSettings | object | Yes | Core configuration settings. See Base Settings for details. |
formSettings | object | Yes | Form configuration settings. See Form Settings for details. |
Changing props after initial render
Sometimes you may need to manage change settings after a widget has already been initialized, for example, to update user privacy preferences. To do this, you can use the update method.
The below example illustrates how you change the primary color on the widget when a button is clicked.
const colors = [
"#26D6FF",
"#e300bd",
"#512fc9",
"#fde046",
"#2ecc71",
"#e74c3c",
"#9b59b6",
"#f1c40f",
];
let count = 0;
const changeColorButton = document.getElementById("change-color-button");
changeColorButton.addEventListener("click", () => {
count++;
widget.update({
baseSettings: {
primaryBrandColor: colors[count % colors.length],
},
});
});