I’ve been using Umbraco for a while now and have built my entire business on top of it. Its flexibility and ease of use have made it an indispensable tool in my web development toolkit.
Recently, I discovered that popups can significantly enhance user engagement, grow your email list, and improve click-through rates (CTRs). So, does Umbraco offer popups?
Yes, it does. In fact, there are two ways to create a popup in Umbraco: using the built-in maker or a third-party popup tool like Picreel. Intrigued, I explored how Umbraco handles popups and compared it with a standardized popup tool like Picreel.
Here’s how my Picreel popup looks within Umbraco:
Before we dive into the how-tos, let’s compare these two methods.
| Criteria | Umbraco Popup | Picreel Popup |
|---|---|---|
| Multi-platform support | ❌ Designed specifically for Umbraco. | ✅ Works across multiple platforms, making it versatile and adaptable. |
| More features | ❌ Basic features for creating simple popups. | ✅ Advanced features, including A/B testing, analytics, and various popup types. |
| Better customization options | ✅ Limited customization options with basic design elements. | ✅ Extensive customization options allowing for detailed design and behavior customization. |
| Integrates with various platforms | ❌ Only integrates within Umbraco’s ecosystem integration. | ✅ Integrates with various website platforms, including WordPress, Shopify, and more. |
| Advanced targeting options | ❌ Basic targeting options based on page and user activity. | ✅ Advanced targeting options, including geo-targeting, device targeting, and behavioral targeting. |
From my experience, here are the top three reasons I recommend using Picreel:
- Multi-platform Support: Picreel works across multiple platforms, making it adaptable if you ever switch from Umbraco to another CMS.
- Advanced Features: Picreel offers sophisticated features such as A/B testing and detailed analytics, which can significantly improve your marketing strategies.
- Better Customization Options: With Picreel, you have extensive customization options, allowing you to create popups that perfectly match your website’s design and user experience goals.
Nevertheless, in this tutorial, I will explain step-by-step how to create a popup using both methods.
Method 1: Using Umbraco’s Built-in Popup
Umbraco offers a built-in popup maker. Here’s how to create it:
1. Log in to your Umbraco back office with your credentials. Then, navigate to the “Settings” section and create a new document type for your popup.
2. In the “Settings” section, create a new template for your popup. In the template editor, add the HTML structure and CSS for your popup.
3. Go to the “Content” section and create a new content node using the document type you created.
4. Include JavaScript in your template to handle the display logic for the popup.
5. Ensure the popup template is included in your site’s master template or the specific page where you want the popup to appear.
6. If needed, create a controller to manage the popup logic.
7. Navigate to your site and test the popup to ensure it displays correctly and functions as expected.
Method 2: Using Picreel Popup Builder
Picreel is a popup builder that works across multiple platforms, providing you with a versatile solution for creating popups. Here’s how you can create a popup using Picreel:
1. Sign up for a Picreel account and log in.
2. Go to the “Campaigns” menu and click “New Campaign” from the top right. You can select the templates option from the drop-down or start from scratch.
3. From the templates menu, choose the type of popup you want to create.
4. Once you select the design, customize it according to your preferences.
5. Configure your targeting and trigger options to specify when and where you want your popup to appear.
6. Click “Save” to activate your popup.
Embedding Picreel HTML Code Inside Umbraco
To embed a Picreel popup on your Umbraco website, follow these steps:
1. Navigate to campaigns and click “View Code.”
2. Click on the code to copy it.
3. Use your credentials to log in to the Umbraco backoffice.
4. Go to the “Settings” section. To edit an existing template, select the template from the list.
5. Open the template in which you want to embed the custom HTML.
6. Add your custom HTML code in the desired location within the template.
7. Click on the “Save” button to save your changes.
Which Is a Better Method: Method 1 or 2?
In the long term, Picreel is a much better option because your popup tool with all your past campaigns and data remains intact despite changing platforms.
You get more sophisticated popup options and triggers. Picreel comes with a forever-free plan for startups and small businesses, allowing you to create unlimited popups with all premium features. The free version does the job well, but paid options start as low as $9.99/month if you need more advanced features.
On the other hand, if you prefer to use the limited options available with Umbraco’s built-in popup without incurring additional integrations, it can still serve your needs just fine.
Remember, the goal is to create compelling popups that drive user engagement and conversions, regardless of your chosen method. Ultimately, the choice is yours.
FREE. All Features. FOREVER!
Try our Forever FREE account with all premium features!
