Scheduler Bubble
CometChatSchedulerBubble is a versatile type of message widget designed to facilitate easy and efficient event scheduling. It offers the following key features:
- Event Scheduling: Users can send a calendar-like invitation, similar to
Calendly, allowing the recipient to schedule a meeting conveniently. - Flexible event Parameters: Senders have the flexibility to set allowed event times and define the time intervals between consecutive events.
- Customisable Availability Hours: Message senders can personalise their availability by specifying a range of hours during which meetings can be scheduled.
- ICS File Integration: Seamlessly integrates with ICS files, analysing the data to provide users with available time slots based on their free time.
- 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 | 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 | 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
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
{
"accept": "application/json",
"apiKey": "SECRET_KEY",
"content-type": "application/json"
}
Payload:
- JSON
{
"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 |
info
If header is provided in the action meeting bubble will not add anything to the header while generating the request