To add a modal, edit your page and go to the Contents tab:
There are two modules available: Page modals and Global modals.
Use the Page modals to add modals that are only available to the current page (e.g., team members on an About page). Or use the Global modals for modals that you want to open from any page, such as modals that can be triggered by a button in the header, or footer, etc.
Please do not add modals you are not going to use globally to the Global modals, because that will only make all your pages heavier for no reason.
Specify a unique Custom ID for your modal (no other element on the page must have this ID). For example, john-doe
You will use the Custom ID you specified above within an onclick field with a simple function to open your modal, like so:
We also recommend adding this to your link External URL:
HubSpot Call-to-Action buttons redirect the browser to a tracking domain first and only then to the target page, so they cannot open these modals. This only works with regular links/buttons.
If you want to close your modal from a button or link within the modal window (for example, a Cancel button), you can use use the onclick field/attribute to call a simple function like this:
Same as before, consider adding this to your link External URL:
You can group modals in a gallery — where the user can browse through all the modals with prev/next arrows/keys — by adding the same Group ID to all modals you want in that gallery. For example, add
our-team Group ID to your team member modals on your About page:
Please refer to our Lightbox documentation if you just want to open an image or video in a popup window. That may be better suited for this use-case. The modal, however, may be helpful if you don't want your video to autoplay or you need to add additional content along with it, such as a title, description, etc.
In case you want to add YouTube, Vimeo, or other iframes to your modal, we recommend modifying your embed code to replace the
src attribute with
data-src, and adding this class to your iframe:
modal__iframe. This way your iframe is lazy-loaded and won't add to the page loading time.
Here is an example of a YouTube embed code with the mentioned attribute, class, and the autoplay parameter at the end of the YouTube URL. The video will only play when the modal is open, and will stop playing when closing the window. You can compare this with your embed code and change it accordingly to obtain the same functionality. You can check the differences here.
Before (YouTube original embed code):
<iframe width="560" height="315" src="https://www.youtube.com/embed/qDCyvvdzND4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
After (modified YouTube embed code):
<iframe class="modal__iframe" width="560" height="315" data-src="https://www.youtube.com/embed/qDCyvvdzND4?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Here is the Live example
If you have a
<audio> HTML element you want to autoplay only when the modal is open, you can add this class to that element:
modal__media and instead of an
autoplay attribute, use
Here is an example:
<video width="430" height="242" style="width: 100%; height: auto;" class="modal__media" src="https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/videos/sample-1293jmdsm.mp4" controls preload="metadata" data-autoplay></video>