Client-Side Custom Forms

​

Overview

Custom forms can only run be configured on the client side. Server-side configuration is not yet available. This approach allows for greater flexibility and control over the form’s behavior and appearance. By leveraging client-side configuration, developers can create dynamic and interactive forms enhancing the user experience.

​

How to Set Up Client-Side Custom Forms

1. Embed the Chatbot using the new Script:

To ensure that you can register client-side custom forms, you need to embed the Chatbase script correctly.

Follow these steps to get the embed code:

• Visit the Chatbase Dashboard.
• Navigate to Connect > Embed > Embed code with identity.
• Copy the embed code and add it to your application.

Note: If you don’t need to verify the identity of logged-in users, you can skip the first script in the embed code and only use the chatbot embed script.

Here’s an example of the embed code you’ll find on the dashboard:

2. Create the Client-Side Custom Form:

To create a client-side custom form:

• Visit the Chatbase Dashboard
• Navigate to Actions > Create action > Custom form.
• Fill in the required fields, ensuring the form type is set to client-side.

3. Use the SDK registerFormSchema method:

   Load the Chatbase script and call the registerFormSchema method with all the form fields. The form names must match those written in the custom form page.

​

Method Parameters

Each custom form method receives two parameters:

1. args: Contains all the arguments defined in your custom form configuration
2. user: Contains the authenticated user information if identity verification is properly configured

​

Method Return Schema

The registerFormSchema function returns a schema that defines the structure and validation of the custom form. Below is a table detailing each field in the return schema:

​

Field Schema

Each field in the fields array must adhere to the following structure:

​

Field Types

​

Validation Rules

The validation object can include different validation rules. Each rule is an object with a value and message property. The message property indicates the error message to be displayed if the validation rule is violated. There is also a default error message field that will be displayed if the validation rule is violated and no custom message is provided. The following rules are available:

window.chatbase.registerFormSchema({
  userProfileForm: async (args, user) => {
    // args contains parameters defined in your custom form
    // user contains authenticated user data if identity verification is set up
      return {
        fields: [
          {
            name: "name",
            label: "First Name",
            type: "text",
            defaultValue: args.name,
            validation: {
              required: {
                value: true,
                message: "Name is required"
              },
              minLength: {
                value: 3,
                message: "Please enter at least 3 characters"
              },
              maxLength: {
                value: 10,
                message: "Please enter less than 10 characters"
              }
            }
          },
          {
            name: "age",
            label: "Age",
            type: "number",
            validation: {
              required: {
                value: true,
                message: "Age is required"
              },
              min: {
                value: 18
              },
              max: {
                value: 100
              },
              defaultErrorMessage: "Please enter a valid age"
            }
          },
          {
            name: "profileImage",
            label: "Click or drop your profile image here",
            type: "image",
          }
        ],
        submitButtonText: "Update Profile",
        successMessage: "Profile updated successfully!",
        errorMessage: "Failed to update profile"
      }
  }
});

​

Webhooks

You can configure webhooks for form submission events in the custom form action tab or in the Settings > Webhooks section. Learn more about webhooks.

​

Important Notes

Multiple Registrations: Calling registerFormSchema multiple times will override previous forms. Make sure to provide all desired forms in a single registerFormSchema call.

Environment Limitations: Client-side custom forms will not work in the Chatbase Playground, Action Preview, or Compare features, as these environments don’t support client-side code execution.