SchedulerBubble is a versatile type of component designed to facilitate easy and efficient event scheduling. It offers the following key features:
  1. Event Scheduling: Users can send a calendar-like invitation, similar to Calendly, allowing the recipient to schedule a meeting conveniently.
  2. Flexible event Parameters: Senders have the flexibility to set allowed event times and define the time intervals between consecutive events.
  3. Customisable Availability Hours: Message senders can personalise their availability by specifying a range of hours during which meetings can be scheduled.
  4. ICS File Integration: seamlessly integrates with ICS files, analysing the data to provide users with available time slots based on their free time.
  5. Developer Configuration: As a developer, you have the freedom to configure actions triggered upon scheduling button clicks. This ensures that the platform can be tailored to specific needs and workflows.
ScheduleBubble aims to streamline the event scheduling process, offering a user-friendly experience for both senders and recipients. With its robust features, it provides a dynamic solution for coordinating and managing meetings efficiently.

​
Properties

PropertiesTypeDescription
titleStringtitle of the scheduler bubble
schedulerMessageScheduler MessageAn instance of the SchedulerMessage class which holds information about the event scheduling availability .
SchedulerBubbleStyleSchedulerBubbleStyleAn object of styles for customizing the UI of the meeting bubble. You can override styles for the wrapper, title, goal completion text, schedule button, etc. If a style is not provided, the default style will be used.
onScheduleClick(timestamp:string, message: SchedulerMessage )=> voidA parameter that handles the on click callback.
loggedInUserObjectAn instance for logged in user object

​
SchedulerBubbleStyle

SchedulerBubbleStyle is a class extending BaseStyle containing attributes to customize the appearance of the SchedulerBubble component.
PropertiesTypeDescription
suggestedTimeTextFontstringtext font for suggested time
suggestedTimeTextColorstringtext color for suggested time
suggestedTimeBackgroundstringtext background for suggested time
suggestedTimeBorderstringtext border for suggested time
suggestedTimeBorderRadiusstringtext border radius for suggested time
suggestedTimeDisabledTextFontstringdisabled text font for suggested time
suggestedTimeDisabledTextColorstringdisabled text color for suggested time
suggestedTimeDisabledBackgroundstringdisabled text background for suggested time
suggestedTimeDisabledBorderstringdisabled text border for suggested time
suggestedTimeDisabledBorderRadiusstringdisabled text border radius for suggested time
titleTextFontstringtext font for title
titleTextColorstringtext color for title
subtitleTextFontstringtext font for subtitle
subtitleTextColorstringtext color for subtitle
summaryTextFontstringtext font for summary
summaryTextColorstringtext color for summary
goalCompletionTextFontstringtext font for goal completion
goalCompletionTextColorstringtext color for goal completion
timezoneTextFontstringtext font for timezone
timezoneTextColorstringtext color for timezone
moreButtonTextFontstringtext font for more button
moreButtonTextColorstringtext color for more button
moreButtonTextBorderstringborder for more button
moreButtonTextBorderRadiusstringborder radius for more button
moreButtonTextBackgroundstringbackground for more button
moreButtonDisabledTextFontstringdisabled text font for more button
moreButtonDisabledTextColorstringdisabled text color for more button
moreButtonDisabledTextBorderstringdisabled border for more button
moreButtonDisabledTextBorderRadiusstringdisabled border radius for more button
moreButtonDisabledTextBackgroundstringdisabled background for more button
loadingIconTintstringtint for loading icon
backButtonIconTintstringtint for back button icon
clockIconTintstringtint for clock icon
calendarIconTintstringtint for calendar icon
timezoneIconTintstringtint for timezone icon
errorTextFontstringtext font for error message
errorTextColorstringtext color for error message
seperatorTintstringtint for seperator
listItemStyleListItemStylestyle object for CometChatListItem
scheduleButtonStyleobjectstyle object for scheduleButton
avatarStyleAvatarStylestyle object for CometChatAvatar
quickViewStyleQuickViewStylestyle object for CometChatQuickView
dateSelectorStyleCalendarStylestyle object for CometChatCalendar
timeSlotSelectorStyleTimeSlotStylestyle object for CometChatTimeSlot

​
Usage

SchedulerBubble allows for a dynamic combination of developer-provided data and data collected from the user’s interaction. It provides flexibility for developers to customize the behaviour of the scheduler button and integrate it seamlessly into their application. 
<cometchat-scheduler-bubble>
  schedulerMessage={message} //message: SchedulerMessage
  schedulerBubbleStyle={style} //style?: SchedulerBubbleStyle
</cometchat-scheduler-bubble>

​
Data submitted by scheduler bubble after user’s Interaction:

After user interaction, SchedulerBubble gives the following payload to the specified endpoint like for above case endpoint is “abc.com” on click of schedule button it will generate a POST request to given URL with the following payload and headers 
{
  "appID": "XXXX",
  "region": "XX",
  "trigger": "ui_message_interacted",
  "payload": {
    "key1": "value1"
  },
  "data": {
    "conversationId": "user1_user_user4",
    "sender": "user1",
    "receiver": "user4",
    "receiverType": "user",
    "messageCategory": "interactive",
    "messageType": "scheduler",
    "messageId": 373,
    "interactionTimezoneCode": "Asia/Kolkata",
    "interactedBy": "user4",
    "interactedElementId": "1",
    "schedulerData": {
      "meetStartAt": "2024-02-15T01:00",
      "duration": 60
    }
  }
}
PropertiesDescription
meetStartAttime slot selected by user
durationduration for the meeting
appIDapp id of the application
regionThe text message
payloadThe type of the receiver- CometChatReceiverType.user (user) or CometChatReceiverType.group (group)
conversationIdThe type of the message that needs to be sent which in this case can be: CometChatMessageType.text__(text)
senderUID of the message sender
receiverUID of the user or GUID of the group receiving the message
receiverTypeThe type of the receiver- CometChatReceiverType.user (user) or CometChatReceiverType.group (group)
messageCategoryThe category of the message - MessageCategoryConstants.interactive
messageTypeThe type of message which is MessageTypeConstants.scheduler
messageIdThe id of the message
interactionTimezoneCodeThe time zone of user’s device
interactedByThe User id of interacting user
interactedElementIdThe element id of element making the request
if header is provided in the action meeting bubble will not add anything to the header while generating the request