Skip to main content

Form Bubble

The CometChatFormBubble component is used to render a form within a chat bubble. The form fields are dynamically built based on the data passed in the message prop. The form fields can include text inputs, checkboxes, radio buttons, dropdown, labels, single selects, buttons. Once the form is filled out and submitted, the data will be sent to the provided URL or handled by a custom function.

Image

Properties

MethodsParametersDescription
messageFormMessageAn instance of the FormMessage class which holds information about the form fields. The form inputs are dynamically built based on the form fields' information in the message.
formBubbleStyle ?FormBubbleStyleAn object of styles for customizing the UI of the form bubble. You can override styles for the wrapper, title, goal completion text, and form inputs, etc. If a style is not provided, the default style will be used.
hasCustomCallback ?BooleanA parameter that defines bubble if custom callback is available or not.

FormBubbleStyle

FormBubbleStyle is a class extending BaseStyle containing attributes to customize the appearance of the CometChatFormBubble component.

MethodsTypeDescription
titleFontFontStyleUsed to set the font style of the title. The object should include fontFamily, fontSize, and fontWeight.
titleColorstringUsed to set the color of the title.
wrapperBackgroundstringUsed to set the background color of the message bubble.
wrapperBorderRadiusnumberUsed to set the border radius of the message bubble.
wrapperPaddingnumberUsed to set the padding of the message bubble.
goalCompletionTextFontFontStyleUsed to set the font style of the goal completion text. The object should include fontFamily, fontSize, and fontWeight.
goalCompletionTextColorstringUsed to set the color of the goal completion text.
textInputStyleTextInputStyleInterfaceUsed to customize the style of text input fields.
quickViewStyleQuickViewStyleInterfaceUsed to customize the style of the quick view.
radioButtonStyleRadioButtonStyleInterfaceUsed to customize the style of radio buttons.
checkboxStyleCheckBoxStyleInterfaceUsed to customize the style of checkboxes.
dropdownStyleDropDownStyleInterfaceUsed to customize the style of dropdowns.
labelStyleLabelStyleInterfaceUsed to customize the style of labels.
buttonStyleButtonStyleInterfaceUsed to customize the style of buttons.
singleSelectStyleSingleSelectStyleInterfaceUsed to customize the style of single select fields.

Usage

<cometchat-form-bubble
message={message} //message: FormMessage
hasCustomCallback={false} // hasCustomCallback: boolean
formBubbleStyle={style} //style?: FormBubbleStyle
/>