If you're familiar with Wistia, you've seen their cool modal window video embeds where the video plays in an overlay on top of the webpage (also known as a lightbox popover).
Modal windows are great for adding extra content on a page that would normally take up a large amount of space.
They also reduce it down to a simple link, which can be virtually any size you want. The best ways to use these modals are video embeds, forms for bug reporting or getting feedback on a new layout, disclaimers and disclosures, and a whole lot more.
Let's discuss how to make one using the HubSpot CMS Hub with their new custom modules feature in three simple steps.
For a step-by-step tutorial, check out our tutorial video or keep reading below:
A modal pop-up is a smaller child window that pops up within another parent window in a web browser. The modal pop-up requires site visitors to interact with it before they can return to the main page.
Modal windows typically have an appearance that differs from the parent windows and they usually don't have menus or navigation buttons.
Modal pop-ups are used for:
Here are a few reasons why it is important to customize your modal pop-ups before you add them to your site:
Your pop-up should feel like it is a part of your site so your website visitor doesn't think it's from an outside source. A style guide helps you establish consistency across not just your website, but for all your brand elements.
You can customize and design your modal pop-up to match the colors, style, and typography of your site. This way, your visitors won't bounce from your site or assume you have a bug or virus on your website.
Most modal pop-ups are used on a website to get visitors to do something like signing up for an email list, sharing content on social media, or checking out a special deal.
To get your visitors to take that desired action, you want to have a clear single-button CTA that is unique to your site. You can make them simple and creative to entice users to take action on your pop-up.
Using contrasting colors in your modal pop-up helps to grab the attention of your visitors.
Your CTA should be the main focal point of your pop-up so you can make this portion of the pop-up a bright color to do just that.
With customization options, you can personalize your modal pop-up content to tailor them to different parts of your site.
Instead of having one standard pop-up, you may create several variations of pop-ups to encourage your visitors to engage with more personalized offers.
Although timing isn't a part of the look of your pop-up, it is an important feature to consider when you customize it.
You can experiment with timing and delays rather than displaying the pop-up as soon as your visitor enters your site.
The first thing you're going to need to do is download a modal window plugin. There are a bunch of plugins out there that do similar things, but Magnific Pop-up is a personal favorite due to its simplicity and usability.
Smashing Magazine has a great article about the process of making it and all of its various features.
There are two core parts to Magnific Popup, the JavaScript (JS) file and the stylesheet (CSS) file.
To keep things simple, I've already used their build tool to create the JavaScript file with the settings we'll need and linked both files for you to download below:
Magnific Popup JS Magnific Popup CSS
Go into your design manager and click on "Create New Custom Module". Call this module "Modal Pop-Up".
If there are placeholder fields already in place, you will need to delete them on the left and delete all the code on the right. Once that's done it should look like this:
Now, you'll need to create a rich text field called "Modal Pop-Up" and a text field called "Modal Button." Once that is done, copy the following snippet of code and paste it into the text area.
<!-- The button -->
<a href="#{{ widget.modal_button|replace('&','and')|replace(' ','-')|replace('(','-')|replace(')','-')|replace('?','')|replace('"','')|replace("'","")|replace(".","")|replace(":","")|replace(",","") }}" class="open-popup-link">{{ widget.modal_button }}</a>
<!-- the modal popup is hidden until the button is clicked -->
<div id="{{ widget.modal_button|replace('&','and')|replace(' ','-')|replace('(','-')|replace(')','-')|replace('?','')|replace('"','')|replace("'","")|replace(".","")|replace(":","")|replace(",","") }}" class="white-popup mfp-hide">
{{ widget.modal_popup }}
</div>
<!-- Copy and paste your css file between the quotations in the href below -->
<link rel="stylesheet" href="CSS_File_URL_Goes_Here">
<style>
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
</style>
<!-- Copy and paste your js file between the quotations in the src below -->
<script src="JS_File_URL_Goes_Here"></script>
<script>
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true
});
});
</script>Now your custom module should look like this:
Last thing you'll need to do is upload the two files you downloaded in step one into your portal's file manager, copy each URL, and replace the placeholder text "CSS_File_URL_Goes_Here" with your Magnific-Popup.css URL and "JS_File_URL_Goes_Here" with your Magnific-Popup.js URL.
Alternatively, if you're going to use more than one on a single page, you should place the CSS in your site's header and the JS scripts in your site's footer.
Edit any page that has a flex column, add your shiny new custom module to the page, and give the modal button a name.
Voila! -- If it's not working, be sure that your site has the latest version of jQuery by going to your content settings and changing the jQuery dropdown to version 1.11x.
Now you're ready to deliver an improved user experience to drive engagement and boost converisons.