How to Make a Modal

View a walk-through of using Modals in the emfluence ClickLearn section here.

Now it's easy to create a  modal, or "lightbox," from a landing page in your emfluence Marketing Platform account and quickly add it to your website.  Pop-up modals are great for short email sign-up forms, maintenance downtime notifications, or new product releases and flash sales.

To start, you'll need an Active landing page in your emfluence account, like this one:

Hint: your modal is probably only going to be a few hundred pixels tall and wide, so start with a 1x1 cell table to design your modal in.

Click here to get a refresher on creating forms, creating a landing page, or embedding a form on a landing page!

Once your landing page is finished and active, return to the Landing Pages section of the Platform and click on "Modals" in the quicklinks menu:

  then select New Modal: 

Type in a name for your new modal, and then select your landing page from the dropdown menu:

Specify the size and delay settings for your modal.  Typically, you'll want your modal to be a few hundred pixels tall and wide. You can also set a background color or customize the CSS of your modal. Under behavior, you can set a delay before you modal appears on the screen. You should allow for enough of a delay that your site visitor can skim the page, but not so much time that they will have bounced away from it.  If you have access to your site's Google Analytics data, look up the average time spent on site before a visitor bounces, and set your delay for a few seconds less than that. Also, unless you're updating the modal with new and relevant information very frequently, visitors don't need to see it every time they visit your site.  Particularly for an email sign-up form, which visitors will only engage with once, an expiration date of 30 days or more is adequate.

You also have the ability to choose whether or not you would like to disable the modal on small screens (such as tablets and phones). To do this check the Disable on small screens box and set a minimum width and height. After doing so, your modal will only pop-up on screens with a display larger than this setting. Based on traffic coming from certain redirects, you may also choose a piece of the URL string as a trigger to prevent the modal from launching. Unless you are having unexpected issues with your modal, you will not need to enabel Debug Mode.

Click Get Embed Code to get the code for your modal:

To embed this modal on your website, the code should be added just before the </body> tag on every page.  This can typically be done by adding the code to the footer of your site, since that code is consistent across all pages.  Once the modal code has been embedded in your website, you should see it appear upon your next visit (give it some time, this may take a few minutes to a few hours).

If you make changes to your modal and would like to view it on-site again, you can go to the website in a different browser, or open a Chrome Incognito Window as many times as you like.