Hubspot - How to implement the Classes Widget?

Adding the Franscape Classes Widget to your HubSpot website

This guide will walk you through the process of creating a local module, configuring its settings, and adding it to your webpage.

Step 1: Creating the Module

1. Open the Design Manager

In your HubSpot admin panel, navigate to Content > Design Manager.

2. Locate the Modules Folder

On the left side, you will see a list of assets for your website.

• Open your theme folder.

• Open your modules folder.

3. Create a New Module

• Right-click on the modules folder and select New file in "modules".

  

• In the popup, choose Module and click Next.

• Under Setup

  • Select at least Site Pages and Landing Pages.

  • Choose Local module for the content scope.

  • Name the module Franscape Classes Widget

• Click Create.

Step 2: Setting Up the Module

1. Familiarize Yourself with the Editor

• The left side contains three sections for different code types.

• The right side has options to configure data and style settings. 

  

2. Customize the Module (RIGHT SIDE)

• Hover over the default module icon and click to change it.

   

• Select an icon from HubSpot’s collection.

• Scroll to Filter Tags and select Functionality to categorize your module.

• Enable Make Available in templates and pages

• Click Publish Changes.

Step 3: Adding Data Attributes

Data attributes allow you to reuse the module with different settings. Follow these steps to add attributes:

• Click Add field in the Fields section.

• Add the following attributes:

• • Venue ID (Type: Number)

• • Franchisee ID (Type: Number)

  • Activity Type (Type: Text) – Optional default text can be added.

  • Tenant (Type: Text) –

    • Set the default to your brand name in lowercase.

      • e.g. skilltime
•  

  • Filter Default (Type: Choice) –

    • Select Radio under "Display as".

    • Add options:

      • Closed (value: "closed")

      • Open

    • Set a default.

Step 4: Adding Style Attributes

To configure styles:

• In the Style Fields section, click Create style group and name it Theme Styles.

• Add the following attributes under this group:

  • Primary Color (Type: Color)

    • Set your default

  • Heading Color (Type: Color)

    • Set your default

• • Text Color (Type: Color)

    • Set your default

• • Button Text Color (Type: Color)

    • Set your default

Once complete, your styles should look like this:

Step 5: Adding Code (LEFT SIDE)

Paste the following code into module.html (HTML + HUBL):

{{ require_js("https://classes.uk.prod.franscape.services/dist/bundle.min.js") }}


<style>
  :root{
    --fs-cw-spacing:16px;
    --fs-cw-btn-padding-y:calc(var(--fs-cw-spacing)*0.375);
    --fs-cw-btn-padding-x:calc(var(--fs-cw-spacing)*0.75);
    --fs-cw-spacing-0-50:calc(var(--fs-cw-spacing)*0.5);
    --fs-cw-spacing-0-25:calc(var(--fs-cw-spacing)*0.25);
    --fs-cw-spacing-1-50:calc(var(--fs-cw-spacing)*1.5);
    --fs-cw-spacing-2:calc(var(--fs-cw-spacing)*2);
    --fs-cw-padding:var(--fs-cw-spacing-0-25);
    --fs-cw-font-size:12px;
    --fs-cw-border-radius:16px;
    --fs-cw-btn-border-radius:8px;
    --fs-cw-scrollbar-width:4px;
    --fs-cw-safe-area-bottom:0px;
    --fs-cw-bg-color:#fff;
    --fs-cw-primary-color:{{ module.theme_styles.primary_color.color }};
    --fs-cw-success-color:#28a745;
    --fs-cw-danger-color:#df3b49;
    --fs-cw-loading-color:rgba(71,93,110,.3);
    --fs-cw-heading-color:{{ module.theme_styles.heading_color.color }};
    --fs-cw-text-color:{{ module.theme_styles.text_color.color }};
    --fs-cw-font-family:sans-serif;
    --fs-cw-primary-text-color:{{ module.theme_styles.button_text_color.color }};
    --fs-cw-border-color:rgba(0,0,0,.1);
    --fs-cw-shadow-color:rgba(0,0,0,.15)
  }
</style>

<franscape-classes 
    data-venue-id="{{ module.venue_id }}"
    data-franchisee-id="{{ module.franchisee_id }}"
    data-activity-type="{{ module.activity_type }}"
    data-tenant="{{ module.tenant }}"
    data-filter-default="{{ module.filter_default }}"
></franscape-classes>

 

Important Notes:

• • Add CSS variables in a <style> tag within module.html as module.css cannot interpolate HUBL variables.

  • Use require_js for third-party JavaScript files since module.js does not allow them.

Step 6: Publishing the Module

1. Click Publish Changes to save your module.

2. Your module is now ready to use!

Step 7: Using the Franscape Classes Widget Module

1. Navigate to your website pages in HubSpot.

2. Select the page where you want to add the module.

3. Click + Add to insert a new content block.

4. Under the Modules tab, search for Franscape Classes Widget

   

5. Drag the module onto your page.

6. Enter the necessary values (e.g., Franchisee ID, Venue ID).

7. Adjust style settings as needed.

8. Click Apply Changes.

 

Final Step

Review your page to ensure the widget displays correctly. Once satisfied, publish your page.

Your Franscape Classes Widget is now fully integrated into your HubSpot site! 🎉