> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Scheduler Bubble
> Scheduler Bubble — CometChat documentation.
CometChatSchedulerBubble is a versatile type of message widget 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.
`CometChatSchedulerBubble` 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
| Name | Type | Description |
| ------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **schedulerMessage** | [SchedulerMessage](/ui-kit/flutter/v4/interactive-scheduler-message) | An instance of the `SchedulerMessage` class which holds information about the event scheduling availability. |
| **schedulerBubbleStyle** | SchedulerBubbleStyle | An 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** | `FunctionCallback(DateTime selectedDateTime, SchedulerMessage object )` | The provided parameter is responsible for managing the on-click callback functionality. By default, this parameter initiates a call to the specified URL as outlined in the example below |
| **theme** | CometChatTheme | passes theme to the form bubble |
| **quickViewStyle** | [QucikViewStyle](/ui-kit/flutter/v4/quick-view) | An object of styles for customizing the UI of the bubble at goal completion level |
| **timeSlotSelectorStyle** | TimeSlotSelectorStyle | accepts an object of TimeSlotSelectorStyle which is used to customize the appearance of CometChatTimeSlotSelector |
***
## SchedulerBubbleStyle
`SchedulerBubbleStyle` is a class extending `BaseStyle` containing attributes to customize the appearance of the `CometChatSchedulerBubble` component.
| Name | Type | Description |
| -------------------------------------- | ------------------ | ------------------------------------------------------------------------------------ |
| **width** | double | used to set width |
| **height** | double | used to set height |
| **background** | Color | used to set the background color |
| **border** | BoxBorder | used to set border |
| **borderRadius** | double | used to set border radius |
| **gradient** | Gradient | used to set background gradient |
| **avatarStyle** | AvatarStyle | used to set the style for the avatar in the scheduler bubble |
| **suggestedTimeTextStyle** | TextStyle | used to set the style for the suggested time text in the scheduler bubble |
| **suggestedTimeBackground** | Color | used to set the background color for the suggested time text in the scheduler bubble |
| **suggestedTimeBorder** | BoxBorder | used to set the border for the suggested time text in the scheduler bubble |
| **scheduleButtonStyle** | ButtonElementStyle | used to set the style for the schedule button in the scheduler bubble |
| **titleTextStyle** | TextStyle | used to set the style for the title text in the scheduler bubble |
| **durationTextStyle** | TextStyle | used to set the style for the scheduler duration text in the scheduler bubble |
| **summaryTextStyle** | TextStyle | used to set the style for the summary text in the scheduler bubble |
| **calendarSelectedDayBackgroundColor** | Color | used to set the background color for the selected day in the calendar |
| **calendarSelectedDayTint** | Color | used to set the tint color for the selected day in the calendar |
| **goalCompletionTextStyle** | TextStyle | style options for the goal completion text within the scheduler bubble. |
***
## Usage
CometChatSchedulerBubble 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.
```dart theme={null}
SchedulerMessage schedulerMessage = SchedulerMessage(
title: 'Meeting with Dr. Jacob',
avatarUrl: 'https://i.pravatar.cc/200',
receiverUid: 'cometchat-uid-2',
receiverType: 'user',
muid: DateTime.now().millisecondsSinceEpoch.toString(),
duration: 30,
interactionGoal: InteractionGoal(type: InteractionGoalType.anyAction,elementIds: ["1"]),
timezoneCode: "Asia/Kolkata",
bufferTime: 15,
availability: {
"monday":[
TimeRange(from: "1100", to: "1900")
],
"tuesday":[
TimeRange(from: "1100", to: "1900")
],
"wednesday":[
TimeRange(from: "1100", to: "1900")
],
"thursday":[
TimeRange(from: "0000", to: "2400")
],
"friday":[
TimeRange(from: "1100", to: "2400")
],
},
sender: User(
uid:"Dr. Jacob Twarog",name: "Dr. Jacob Twarog"
),
receiver: User(name: "Trienke",uid: "Trienke"),
dateRangeStart: "2024-03-09",
dateRangeEnd:"2024-06-09",
scheduleElement: ButtonElement(
buttonText: "Schedule",
action: APIAction(
url: "https://abc.com",
method: "POST",
headers: {
"accept": "application/json",
"apiKey": "SECRET_KEY",
"content-type": "application/json"
}
),
elementType: UIElementTypeConstants.button,
elementId: "1",
disableAfterInteracted: true,
)
);
CometChatSchedulerBubble schedulerBubble = CometChatSchedulerBubble(
schedulerMessage: schedulerMessage,
style: SchedulerBubbleStyle(
background: Colors.blue,
calendarSelectedDayBackgroundColor: Colors.red,
titleTextStyle: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold
),
goalCompletionTextStyle: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold
),
),
);
```
### SchedulerBubble Triggered Request to Endpoint
After user interaction, the `SchedulerBubble` generates a request to the specified endpoint i.e upon clicking the schedule button. Like in above example scheduler bubble will trigger a POST request to abc.com
The request includes the following payload and headers:
#### Headers:
```json theme={null}
{
"accept": "application/json",
"apiKey": "SECRET_KEY",
"content-type": "application/json"
}
```
***
#### Payload:
```json theme={null}
{
"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
}
}
}
```
| Properties | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| meetStartAt | time slot selected by user |
| duration | duration for the meeting |
| `appID` | app id of the application |
| `region` | The text message |
| `payload` | The type of the receiver- `CometChatReceiverType.user` (user) or `CometChatReceiverType.group` (group) |
| conversationId | The type of the message that needs to be sent which in this case can be: `CometChatMessageType.text`\_\_(text) |
| sender | `UID` of the message sender |
| receiver | `UID` of the user or `GUID` of the group receiving the message |
| receiverType | The type of the receiver- `CometChatReceiverType.user` (user) or `CometChatReceiverType.group` (group) |
| messageCategory | The category of the message - MessageCategoryConstants.interactive |
| messageType | The type of message which is MessageTypeConstants.scheduler |
| messageId | The id of the message |
| interactionTimezoneCode | The time zone of user's device |
| interactedBy | The User id of interacting user |
| interactedElementId | The element id of element making the requiest |
If header is provided in the action meeting bubble will not add anything to the header while generating the request