Available components panel configuration

Interface Overview

AvailableComponentsPanelConfigI

Property name	Type	Required	Description
groups	AvailableComponentsGroupI[]	Yes	Array of component groups to display in the panel
showRequestComponentButton	boolean	No	Decide whether to display the "Request Component" button at the bottom of the panel. Clicking the button opens a chat with predefined text.

AvailableComponentsGroupI

Property name	Type	Required	Description
label	string	Yes	Label for the component group
components	AvailableComponentI[]	Yes	Array of components in the group

AvailableComponentI

Property name	Type	Required	Description
componentName	string	Yes	Name of the component
customIcon	string	No	A custom icon for the component. If not provided, the icon from the component's manifest will be used.
customLabel	string	No	A custom label for the component. If not provided, the label from the component's manifest will be used.
fullWidthIcon	boolean	No	Whether the icon should be full width. Label will be hidden.
modelOverrides	any	No	Model overrides for the component. See the default configuration for an example of how to use it.
floatingImage	boolean	No	It transforms the SysImageComponent manifest into a floating image.

Default configuration

{
   groups: [
      {
         label: 'Columns',
         components: [
            {
               componentName: 'SysColumnsComponent',
               fullWidthIcon: true,
               customIcon: '/claspo-editor/columns-frame-100.svg',
               modelOverrides: {
                  // creates single full width column
                  children: [
                     {
                        componentName: 'SysColumnComponent',
                     }
                  ]
               },
            },
            {
               componentName: 'SysColumnsComponent',
               fullWidthIcon: true,
               customIcon: '/claspo-editor/columns-frame-50-50.svg',
               modelOverrides: {
                  // creates two columns with a 1:1 proportion
                  children: [
                     {
                        componentName: 'SysColumnComponent',
                     },
                     {
                        componentName: 'SysColumnComponent',
                     },
                  ],
               }
            },
            {
               componentName: 'SysColumnsComponent',
               fullWidthIcon: true,
               customIcon: '/claspo-editor/columns-frame-33-66.svg',
               modelOverrides: {
                  // creates two columns with a 1:2 proportion
                  children: [
                     {
                        componentName: 'SysColumnComponent',
                        modelOverrides: {
                           props: {
                              content: {
                                 size: '1',
                              },
                           },
                        }
                     },
                     {
                        componentName: 'SysColumnComponent',
                        modelOverrides: {
                           props: {
                              content: {
                                 size: '2',
                              },
                           },
                        }
                     },
                  ],
               }
            }
         ]
      },
      {
         label: 'General',
         components: [
            {
               componentName: 'SysTextComponent',
            },
            {
               componentName: 'SysContainerComponent',
            },
            {
               componentName: 'SysImageComponent',
            },
            {
               componentName: 'SysImageComponent',
               customIcon: 'BASE_URL/floating-image-component-icon.svg',
               floatingImage: true,
            },
            {
               componentName: 'SysButtonComponent',
            }
         ]
      },
      {
         label: 'Fields',
         components: [
            {
               componentName: 'SysInputComponent',
               customLabel: 'Email',
               customIcon: 'BASE_URL/email-input-component-icon.svg',
               modelOverrides: {
                  props: {
                     control: {
                        name: 'email',
                        integrationName: 'email',
                     },
                     content: {
                        placeholder: 'Email',
                     },
                  }
               }
            },
            {
               componentName: 'SysPhoneInputComponent',
            },
            {
               componentName: 'SysInputComponent',
               customLabel: 'Firs name',
               customIcon: 'BASE_URL/person-data-input-component-icon.svg',
               modelOverrides: {
                  props: {
                     control: {
                        name: 'first_name',
                        integrationName: 'first_name',
                     },
                     content: {
                        placeholder: 'First name',
                     },
                  },
               }
            },
            {
               componentName: 'SysInputComponent',
               customLabel: 'Last name',
               customIcon: 'BASE_URL/person-data-input-component-icon.svg',
               modelOverrides: {
                  props: {
                     control: {
                        name: 'last_name',
                        integrationName: 'last_name',
                     },
                     content: {
                        placeholder: 'Last name',
                     },
                  },
               }
            },
            {
               componentName: 'SysInputComponent',
            },
            {
               componentName: 'SysTextAreaComponent',
            },
            {
               componentName: 'SysDropdownInputComponent',
            },
            {
               componentName: 'SysRadioGroupComponent',
            },
            {
               componentName: 'SysCheckboxListComponent',
            },
            {
               componentName: 'SysDateComponent',
            },
            {
               componentName: 'SysCalendarComponent',
            },
            {
               componentName: 'SysNetPromoterScoreComponent',
            },
            {
               componentName: 'SysFeedbackComponent',
            },
         ],
      },
      {
         label: 'Other',
         components: [
            {
               componentName: 'SysCountdownTimerComponent',
            },
            {
               componentName: 'SysSliderComponent',
            },
            {
               componentName: 'SysVideoComponent',
            },
            {
               componentName: 'SysConsentComponent',
            },
            {
               componentName: 'SysPromoCodeComponent',
            },
            {
               componentName: 'SysSocialComponent',
            },
         ],
      },
   ],
}