11ty Plugin: HubSpot

npm npm license

This plugin adds shortcodes to your Eleventy project to easily embed HubSpot forms and meetings calendars.

Installation

Install the plugin from npm:

npm install eleventy-plugin-hubspot --save-dev

Configuration

Add it to your Eleventy Config file:

ESM (Eleventy 3.x+)

import eleventyPluginHubspot from 'eleventy-plugin-hubspot';

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginHubspot, {
        portalId: 1234567
    });
}

CommonJS (Eleventy 2.x)

const eleventyPluginHubspot = require('eleventy-plugin-hubspot');

module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginHubspot, {
        portalId: 1234567
    });
};

Options

• portalId - (required) Your HubSpot portal ID
• loadingMode - Loading strategy: default, eager, interact, or lazy
  Default: default
• loadingSpinner - Custom spinner HTML or false to disable
  Default: built-in SVG spinner
• scriptAttributes - Object of custom attributes for the HubSpot script tag (e.g., OneTrust bypass)
  Default: {}
• locale - Form language locale
  Default: undefined

Loading Modes

• default - Form loads immediately with the page
• eager - Form loads on DOMContentLoaded
• interact - Form loads on first user interaction (best for performance)
• lazy - Form loads when scrolled into viewport

Usage

HubSpot Forms

{% hubspotForm "your-form-id" %}

{# With options #}
{% hubspotForm "your-form-id", { locale: "es" } %}

HubSpot Meetings

{% hubspotMeetings "https://meetings.hubspot.com/your-meeting-link" %}

Demo

Below are live HubSpot forms using the lazy loading mode with scriptAttributes: { "data-ot-ignore": "true" } for OneTrust bypass.

Form Example

Meetings Example

Advanced: OneTrust / Cookie Consent Bypass

eleventyConfig.addPlugin(eleventyPluginHubspot, {
    portalId: 1234567,
    loadingMode: "interact",
    scriptAttributes: {
        "data-ot-ignore": "true",
        "data-cookieconsent": "ignore"
    }
});

License

MIT License

---