Sessions Component

Revision as of 02:09, 2 September 2023 by Admin (talk | contribs) (Created page with "== Intro == This component renders an sessions and session invitations. == 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:<syntaxhighlight lang="html"> <script src="{!URLFOR($Resou...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Intro

This component renders an sessions and session invitations.

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>

Options

Attributes

user-id - the contact id

invite-id - optionally, display a specific invitation only by providing the session invitation id

variant - either calendar or table - determines how available dates will be rendered

URL Params

userId or id - the contact id

inviteId - the specific invitation to be displayed

Note that attributes will always override URL params and you can mix and match