1. Canvas Components
  2. Form Fields Component

Canvas Components

Form Fields Component

The form fields component allows you to render forms and collect user input within the webchat interface.

Example Usage

        {
  "platforms": {
    "webchat": {
      "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
      "webchat_control_event": {
        "action": "render_component",
        "params": {
          "component_type": "form_fields",
          "component_params": {
            "initial_form": {
              "spec": {
                "fields": {
                  "checkbox_field": {
                    "fieldtype": "checkbox"
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Field Types

The form fields component supports various field types including:

  • checkbox - Boolean checkbox input
  • text - Text input field
  • textarea - Multi-line text input
  • select - Dropdown selection
  • And more

Configure your fields in the initial_form.spec.fields object with the appropriate field type and parameters.

Conditioning of Form Fields

This is a useful feature when you want to hide parts of the form that are not relevant and rely on other fields for logic. For example, displaying specific sections only if a checkbox is checked.

        "hosted_chat_form_canvas_form_field_conditioning": {
  "platforms": {
    "webchat": {
      "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
      "webchat_control_event": {
        "action": "render_component",
        "params": {
          "component_type": "form_fields",
          "component_params": {
            "initial_form": {
              "spec": {
                "fields": {
                  "if_this_checkbox_is_checked": {
                    "fieldtype": "checkbox",
                    "__order": 0
                  },
                  "then_this_field_will_show": {
                    "fieldtype": "text",
                    "conditions": [
                      "form.data.if_this_checkbox_is_checked = true"
                    ],
                    "__order": 1
                  }
                }
              }
            }
          }
        }
      }
    }
  },
  "__key": "hosted_chat_form_canvas_form_field_conditioning",
  "name": "hosted_chat_form_canvas_form_field_conditioning",
  "__order": 0
},

Output:

This is my screenshot
Previous <- Open Canvas
Next HTML Renderer Component ->