Sessions Component

This component allows users to manage session bookings through a user-friendly interface, supporting functionalities like viewing available sessions, managing bookings, and customizing theme settings. Here's the technical documentation for deploying and using the self-booking component, including details about URL parameters and attributes.

Self-Booking Web Component Overview

Key Features

• Display of available sessions and invitations for session booking.
• Support for theme customization and user identity hiding.
• Responsive design for optimal viewing across different devices.

Configuration Options

The component supports several attributes for customization:

• hideThemeSwitch: Controls visibility of the theme switch.
• hideCurrentUser: Controls visibility of the current user information.
• themeType: Sets the initial theme (e.g., light or dark).
• userId: Identifies the current user (typically a contact ID in Salesforce).
• invitationId: Specifies an invitation ID for filtering sessions.

Visualforce Page: b3o__SelfBookingConsole

This Visualforce page embeds the self-booking web component and configures it for use within Salesforce. It's designed to work as a standalone page or within the Salesforce environment, providing a seamless booking experience.

URL Parameters for Visualforce Page

To tailor the self-booking experience, you can pass parameters through the URL when navigating to the b3o__SelfBookingConsole page:

• userId or just id: Specifies the current user's ID. This parameter is crucial for identifying which sessions are available or relevant to the user.
• themeType: Sets the initial theme. Use light for a light theme or dark for a dark theme.
• sessionKey: A session key for authentication or session management purposes.

3B Portals Compatibility

This component is fully compatible with 3B Portals

Implementation

Portals

Drag and drop the component on any page. You can customize the component properties from the Traits Manager.

Visualforce Pages

You can embed the component component in a Visualforce Page using the following syntax:

<script src="{!URLFOR($Resource.b3o__GeneralUtils, 'index.js')}" defer="true" type="module"></script>
        
<!-- This Component -->
<script src="{!URLFOR($Resource.b3o__SelfBooking, 'index.js')}" defer="true" type="module"></script>

<self-booking variant="calendar"></self-booking>

<script>
    const globals = {
        sessionId: '{!GETSESSIONID()}',
        siteUrl: '{!$Site.baseUrl}',
        useREST: false,
        router: b3o.GlobalRemotingRouter
    };
    window['globals'] = globals;
</script>

External Websites

You can embed the component component in a wordpress/custom sites using the following syntax:

<!-- Make sure to point the beginning of the URL to your guest site endpoint -->
<!-- Load Supporting Components and Global Functions -->
<script src=".../b3o__GeneralUtils/index.js" defer="true" type="module"></script>

<!-- This Component -->
<script src=".../b3o__SelfBooking/index.js" defer="true" type="module"></script>

<self-booking variant="calendar"></self-booking>

<script> 
    const globals = {
        siteUrl: '.../Onboarding/',
        useREST: true
    };
    window['globals'] = globals;
</script>

Attributes for <self-booking> Tag

When initializing the self-booking component within the Visualforce page or externally, you can set its properties using attributes:

• hide-theme-switch="true|false": Show or hide the theme switch.
• hide-current-user="true|false": Show or hide the current user's information.
• theme-type="light|dark": Determine the initial theme.
• user-id="user_id_value": Specify the current user's ID.

Implementation Notes

• Ensure that the index.js file and other necessary resources are correctly referenced in your Visualforce page or external hosting environment.
• The userId and themeType attributes are crucial for a personalized and visually consistent user experience.
• For external implementations, setting up window.globals correctly is essential for ensuring the component can communicate with Salesforce or other backend services.

This documentation provides a foundation for integrating and configuring the self-booking web component within Salesforce environments or externally. Adjust configurations based on specific requirements or deployment scenarios.

Translations

If you are using the Visualforce page to host this component, you can auto-translate it to the running user's language by:

1. Changing the language on the user (or Guest Site User)
2. Adding translations to the custom labels on the visualforce page

This way, you can add multiple translation languages and ensure that the component displays it based on the user's locale.

Alternatively, you can create a custom visualforce page and provide your own translations.