Intelligent Form (JS)

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://unpkg.com/@inkeep/cxkit-js@^0.5.36/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],
    },
  });
});

Intelligent Form (JS)

Overview

Quick start

Intelligent Form Props

Changing props after initial render

On this page