Allow visitors to pick a date and time slot to schedule calls or appointments directly within your interaction.
 |
 |
Setup
Drag a new Calendar element from the left element picker bar.
Once selected, you will see its Settings in the tab.
Connected giosg Calendar: Select the giosg calendar you wish to link. Available time slots will be retrieved directly from this calendar. If you haven't yet set up a giosg Calendar, please refer to How to create a calendar in Giosg Calendar tool.
Language: Sets the display format for calendar elements such as month names and time (e.g. AM/PM or 24-hour format).
Event type: Defines the type of event to be created in the calendar. Available types:
- Call request (default): Creates an event in the calendar and notifies the agent in the chat. A call request is also attached.
- giosg task: Creates an event in the calendar and notifies the agent in the chat.
- Calendar event only: Creates an event in the calendar without notifying the agent in the chat.
Event title: Specifies the title that will be displayed in the calendar when the visitor schedules an event.
On Successful, change view to: Choose a view to redirect the visitor to after a successful booking — for example, a confirmation message.
On Error, change view to: Choose a view to redirect the visitor to if the booking fails — for example, a view displaying an error or retry message.
How to create a calendar in giosg Calendar tool
- First, open the Giosg Calendar tool and click on the "+ New Calendar" button.
- Select the Room to link with this calendar. Call requests will be assigned to the agents within this room, and the room's name will also be used as the calendar name.
- Specify the Slot length (in minutes) and the Available bookings per slot.
- Then, add the Schedule to define when the slots are available for bookings.
Once the changes are saved, you will see a table displaying all available slots and any existing appointments.
Styling the Calendar
The calendar element is built using standard Interaction Builder elements, which means you can style it just like any other button or text element in your interaction.
The calendar is divided into two subgroups:
- CalendarDatePicker: Contains all the elements used for selecting the date (e.g. month and day picker).
- CalendarTimePicker: Contains all the elements used for selecting available time slots.
You can customize the appearance, layout, and behavior of each element within these groups to match your brand or interaction style.
Note: We recommend avoiding complex style changes for now, as the calendar element is still undergoing major development. Future updates may require you to reapply or adjust your styles.
Connect Calendar element to external service
You can integrate the calendar element with a third-party service, but this requires advanced JavaScript knowledge.
To begin, right-click on the calendar element and select "Convert to plain". This will transform the calendar into a standard group, allowing you to customize its individual components.
Once converted, you can select specific elements — such as the date picker, time slot, or confirmation button — and modify their Run JS actions to implement your own integration logic with the third-party service.