> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# SchedulerBubble

> SchedulerBubble — CometChat documentation.

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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/l_1oaiAY9g221I2G/images/de8934a3-bq4tfc01lq76mqdf2ljx60xgi3pnxtacaca6dar308gowihrunsip6kicvpofvdl-e0614bc6a2cdf76a3f9e77a85beed830.png?fit=max&auto=format&n=l_1oaiAY9g221I2G&q=85&s=1236325c63610752ba41780d144a189f" width="868" height="517" data-path="images/de8934a3-bq4tfc01lq76mqdf2ljx60xgi3pnxtacaca6dar308gowihrunsip6kicvpofvdl-e0614bc6a2cdf76a3f9e77a85beed830.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/fe00d350-i06zd21hyfhhl26qrazul3e50f8f3og1vveeqdgg1xmcfun3saqnxe3nvrzwky0r-94f5a21a4d29c0a356c990794d6d862e.png?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=55615c90c711a11dea12884f66ae0efa" width="868" height="517" data-path="images/fe00d350-i06zd21hyfhhl26qrazul3e50f8f3og1vveeqdgg1xmcfun3saqnxe3nvrzwky0r-94f5a21a4d29c0a356c990794d6d862e.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/cTCXebw8IhR7IiJw/images/445fea7f-7pkkgt8jemwidyw5xpf6p5cww974k7zecyd8gryu7vq2vxn0bfcx3q2i37w5rtpt-b943a128f63033830f98e801c4b5b76e.png?fit=max&auto=format&n=cTCXebw8IhR7IiJw&q=85&s=6824f6ff44a707bfe8b68b0e452d88a0" width="868" height="517" data-path="images/445fea7f-7pkkgt8jemwidyw5xpf6p5cww974k7zecyd8gryu7vq2vxn0bfcx3q2i37w5rtpt-b943a128f63033830f98e801c4b5b76e.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/K_p4Iy5Yo4hNoo1I/images/1f20de9a-9wgxq9ly6x043zaxttw396a28p63p3faaycv6xy9ubvno2vwu79oyn6m0nxbc387-f89e332345be4198600642e4071c7585.png?fit=max&auto=format&n=K_p4Iy5Yo4hNoo1I&q=85&s=97efb3d5fab61965c6318d2858ec9322" width="868" height="517" data-path="images/1f20de9a-9wgxq9ly6x043zaxttw396a28p63p3faaycv6xy9ubvno2vwu79oyn6m0nxbc387-f89e332345be4198600642e4071c7585.png" />
</Frame>

## Properties

| Properties | Type | Description |
| - | - | - |
| **title** | String | title of the scheduler bubble |
| **schedulerMessage** | [Scheduler Message](/web-shared/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** | `(timestamp:string, message: SchedulerMessage )=> void` | A parameter that handles the on click callback. |
| **loggedInUser** | `Object` | An instance for logged in user object |

## SchedulerBubbleStyle

`SchedulerBubbleStyle` is a class extending `BaseStyle` containing attributes to customize the appearance of the `SchedulerBubble` component.

| Properties | Type | Description |
| - | - | - |
| **suggestedTimeTextFont** | string | text font for suggested time |
| **suggestedTimeTextColor** | string | text color for suggested time |
| **suggestedTimeBackground** | string | text background for suggested time |
| **suggestedTimeBorder** | string | text border for suggested time |
| **suggestedTimeBorderRadius** | string | text border radius for suggested time |
| **suggestedTimeDisabledTextFont** | string | disabled text font for suggested time |
| **suggestedTimeDisabledTextColor** | string | disabled text color for suggested time |
| **suggestedTimeDisabledBackground** | string | disabled text background for suggested time |
| **suggestedTimeDisabledBorder** | string | disabled text border for suggested time |
| **suggestedTimeDisabledBorderRadius** | string | disabled text border radius for suggested time |
| **titleTextFont** | string | text font for title |
| **titleTextColor** | string | text color for title |
| **subtitleTextFont** | string | text font for subtitle |
| **subtitleTextColor** | string | text color for subtitle |
| **summaryTextFont** | string | text font for summary |
| **summaryTextColor** | string | text color for summary |
| **goalCompletionTextFont** | string | text font for goal completion |
| **goalCompletionTextColor** | string | text color for goal completion |
| **timezoneTextFont** | string | text font for timezone |
| **timezoneTextColor** | string | text color for timezone |
| **moreButtonTextFont** | string | text font for more button |
| **moreButtonTextColor** | string | text color for more button |
| **moreButtonTextBorder** | string | border for more button |
| **moreButtonTextBorderRadius** | string | border radius for more button |
| **moreButtonTextBackground** | string | background for more button |
| **moreButtonDisabledTextFont** | string | disabled text font for more button |
| **moreButtonDisabledTextColor** | string | disabled text color for more button |
| **moreButtonDisabledTextBorder** | string | disabled border for more button |
| **moreButtonDisabledTextBorderRadius** | string | disabled border radius for more button |
| **moreButtonDisabledTextBackground** | string | disabled background for more button |
| **loadingIconTint** | string | tint for loading icon |
| **backButtonIconTint** | string | tint for back button icon |
| **clockIconTint** | string | tint for clock icon |
| **calendarIconTint** | string | tint for calendar icon |
| **timezoneIconTint** | string | tint for timezone icon |
| **errorTextFont** | string | text font for error message |
| **errorTextColor** | string | text color for error message |
| **seperatorTint** | string | tint for seperator |
| **listItemStyle** | ListItemStyle | style object for CometChatListItem |
| **scheduleButtonStyle** | object | style object for scheduleButton |
| **avatarStyle** | AvatarStyle | style object for CometChatAvatar |
| **quickViewStyle** | QuickViewStyle | style object for CometChatQuickView |
| **dateSelectorStyle** | CalendarStyle | style object for CometChatCalendar |
| **timeSlotSelectorStyle** | TimeSlotStyle | style 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.

<Tabs>
  <Tab title="html">
    ```html theme={null}
    <cometchat-scheduler-bubble>
      schedulerMessage={message} //message: SchedulerMessage
      schedulerBubbleStyle={style} //style?: SchedulerBubbleStyle
    </cometchat-scheduler-bubble>
    ```
  </Tab>
</Tabs>

#### 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

<Tabs>
  <Tab title="json">
    ```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
        }
      }
    }
    ```
  </Tab>
</Tabs>

| 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 request |

<Note>
  if header is provided in the action meeting bubble will not add anything to the header while generating the request
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.