How to Create a Popup in ExpressionEngine: A Step-By-Step Guide

ExpressionEngine is a brilliant open-source CMS, and I’ve been using it to build websites, manage digital content, and create blogs.

It’s a versatile tool that works well for both small static sites and large, dynamic content-rich websites, and that has helped me immensely. However, there’s a small caveat — ExpressionEngine does not have an in-built popup creator.

So, can we create ExpressionEngine popups? Absolutely! The best workaround is using a popup extension.

Here’s a peek at one of the popups I created for the platform using Picreel.

Looks pretty cool, huh?

You can create a popup in ExpressionEngine using any third-party extension, but since Picreel is my go-to tool of choice, let’s take a look at how you can do so by using it.

Create Popups in ExpressionEngine Using Picreel Popup Builder

What drew me to Picreel was its robust features and cross-platform adaptability. You can have a popup up and running in minutes without needing to mess with complex coding.

It offers exit-intent technology, mobile popups, extensive customization, A/B testing, and various targeting options, making it an excellent starting point.

Let’s look at the steps now.

Step 1: Sign Up for Picreel

First, you’ll need to create a Picreel account. Head over to their website and sign up. They offer a free trial, so you can test it before committing.

Step 2: Create a New Popup

Once you’re in the Picreel dashboard, the next step is to create your first popup. Here’s how –

• Go to the “Campaigns” menu.
• Click the “+ New Campaign” button.
• You’ll be asked to select a template for your popup. You can also start from scratch.

Once you’ve chosen your template, you’ll be directed to the customization screen, where you can modify the text, colors, images, and the overall design of the popup.

Step 3: Customize Your Popup

Picreel’s drag-and-drop editor makes customizing your popups a breeze. You can tweak the colors, fonts, and images to align perfectly with your brand.

Here’s what you can do:

• Edit Texts: Click on any text in the popup to update the message. Keep it short and to the point.
• Add Images: Upload your own or pick from Picreel’s stock image library. Just make sure the images match your brand style.
• Colors & Fonts: Apply your brand colors for a cohesive look. You can adjust the background, text, and button colors so everything blends nicely with your site.
• Button Links: Make sure your call-to-action (CTA) button leads to the right page—whether it’s a signup form or a product page.

Step 4: Set Up Targeting Options

With Picreel, you have precise control over who views your popup, when it appears, and how frequently it’s shown. You can pick from various targeting options, such as:

• Exit Intent: Display the popup just as a visitor is about to leave your website.
• Time on Page: This option triggers the popup after a visitor has stayed on your page for a specified amount of time.
• Scroll Depth: Show the popup when a visitor scrolls down a certain percentage of the page.
• Page Targeting: Set the popup to appear on particular pages or URLs.

Want a visual guide to see how each step works? Watch this video –

Embed HTML Code Inside ExpressionEngine

After finalizing your popup, Picreel will provide an embed code. Here’s a quick breakdown of the steps:

1. Head to the “Installation” section.

2. Click on “Copy Code” to copy the embed code.

3. In your ExpressionEngine CMS admin panel, click on Templates in the left sidebar.

4. Under the Templates section, select layouts, then choose _html-wrapper.

5. Paste the embed code right before the </body> tag and click Save. Your popup will now display according to the targeting settings you set up in Picreel.

Ready to Create Stunning Popups in ExpressionEngine?

Creating popups for ExpressionEngine using a tool like Picreel is straightforward, even if it requires embedding some HTML or JavaScript. Picreel’s ease of use, customization options, and advanced targeting features make it an excellent fit for this platform.

This approach has helped boost my email subscriber list and enhanced user engagement on my site.

The best part? You can try it without spending a dime! Picreel offers a free plan that includes all the premium features. If you upgrade later, the paid plans start at just $9.99 per month.

So, why not give it a try? Test out different designs and targeting settings, and be sure to track your results!