ADMIN - Implementing the Classes Widget

This article is to be followed if you have a custom website, with full control over your website code.

Website hosting via 3rd party platforms can come with their own limitations.

See our specific instructions for implementing using any of the website hosts below:

Hubspot

*More coming soon*

Embedding the <franscape-classes> Web Component

This guide explains how to embed the <franscape-classes> web component into your website and customise its appearance using CSS variables.

Steps

Adding the required tags to your page
Embed the web component
Customising the style (Optional)

Step 1: Add the Required Tags to Your Page

To use the web component, include the following <link> and <script> tags in the <head> of your HTML document:

<link rel="stylesheet" href="https://classes.uk.prod.franscape.services/dist/variables.min.css" />
<script type="module" src="https://classes.uk.prod.franscape.services/dist/bundle.min.js"></script>

Step 2: Embed the Web Component

Place the <franscape-classes> component anywhere in your HTML body where you want it to appear:

<franscape-classes 

    data-venue-id=””

    data-franchisee-id="5"  

    data-activity-type="Music Lessons"  

    data-tenant="" /* TENANT NAME eg Franscape*/  

    data-filter-default="closed" 

></franscape-classes>

NOTE: All values must be entered within speech marks.

data-franchisee-id: Specify the franchisee ID (e.g., 5).

- Please see: How do I find an Object ID?
  - Open the Franchisee Information, retrieve the ID from the URL.

data-activity-type: Set the activity type (e.g., Music Lessons).
- This variable will be included in the title of the Classes Widget
data-tenant: Enter your brand name in all lowercase, no spaces.
- - This can be found within your Admin Portal URL
    - E.g. admin.example.franscape.io/
data-filter-default: Select if the Course Types filter should open by default
- "closed" = Do not open until Customer selects the filters
- "" = Open Course Type filters upon launch

COMING SOON: Filtering by Venue

data-venue-id: Specify the Venue ID
- Leave empty to show all venues

Step 3: Customise the Styles

Styling is optional, and not required to use the Franscape Classes Widget.

To overwrite the default styles, you can include a <style> block in your <head> between the <link> and <script> tags.

Example

Script tag:

<link rel="stylesheet" href="https://classes.uk.prod.franscape.services/dist/variables.min.css" />

Add your own Style:

<style>  

/* The <style> section is optional and for advanced integration only. Franscape is not responsible for making changes to values. */

    :root {  

        --fs-cw-bg-color: #F0F0F0; /* Background color */  

        --fs-cw-primary-color: #007BFF; /* Primary theme color */  

        --fs-cw-success-color: #4CAF50; /* Success message color */  

        --fs-cw-danger-color: #FF5252; /* Error or danger color */  

        --fs-cw-loading-color: rgba(0, 123, 255, 0.3);

        --fs-cw-heading-color: #333333; /* Heading text color */  

        --fs-cw-text-color: #555555; /* Body text color */  

        --fs-cw-font-family: 'Arial, sans-serif'; /* Font family */  

        --fs-cw-primary-text-color: #FFFFFF; /* Primary text color */  

        --fs-cw-border-color: rgba(0, 0, 0, 0.2); /* Border color */  

        --fs-cw-shadow-color: rgba(0, 0, 0, 0.25); /* Shadow color */  

    }  

</style>

Script tag:

<script type="module" src="https://classes.uk.prod.franscape.services/dist/bundle.min.js"></script>

(OPTIONAL) Copy the variables you want to customise into the <style> block.
(OPTIONAL) Modify the values to match your website's theme.

Example Final Integration

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title>Embedding Franscape Classes</title>  

    <link rel="stylesheet"        href="https://classes.uk.prod.franscape.services/dist/variables.min.css" />  

    <style>  

        :root {  

            --fs-cw-bg-color: #F8F9FA;  

            --fs-cw-primary-color: #007BFF;  

            --fs-cw-success-color: #28A745;  

            --fs-cw-heading-color: #000000;  

            --fs-cw-font-family: 'Roboto, sans-serif';  

        }  

    </style>  

    <script type="module" src="https://classes.uk.prod.franscape.services/dist/bundle.min.js"></script>  

</head>  

<body>  



    <franscape-classes  

        data-venue-id=""  

        data-franchisee-id="5"  

        data-activity-type="Music Lessons"  

        data-tenant="franscape"  

    ></franscape-classes>  



</body>  

</html>

Notes

Always test your changes to ensure the component renders and styles correctly.
If the component does not appear as expected, check the browser's console for errors.

This setup ensures seamless integration of the franscape-classes component into your site.