1. Canvas Components
  2. Form Fields Component

Canvas Components

Form Fields Component

Explains the form fields canvas component for hosted Webchat. Useful for collecting structured input with Stubber field types inside chat.

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

Supported field types include:

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

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

Conditioning of Form Fields

Hide form sections based on other fields. For example, display a section only when 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 ->