Home  ›   Blog   ›  How to Create a Popup in Vercel?

How to Create a Popup in Vercel?

How to Create a Popup in Vercel?

Integrating popups into your Vercel-hosted website is a great way to engage visitors and boost conversions. While Vercel does not offer built-in popups, third-party tools like Popupsmart provide an easy and powerful solution.

In this guide, I’ll show you how to create a popup in Vercel using a Popupsmart extension as well as specialized popup tools like Picreel.

Here’s what my Picreel popup looks like in Vercel.

Vercel popup

Let’s look at the key differences between a Popupsmart extension and Picreel:

Criteria Popupsmart Extension Picreel Popup
Multi-platform support ✅ Supports multiple platforms, making it versatile for different website environments. ✅ Compatible with multiple website platforms, including WordPress, Shopify, and custom-built websites, providing broader compatibility.
Feature set ❌ Basic features include AI-backed targeting and analytics but lack CRM integration and cart abandonment recovery. ✅ Rich feature set including advanced functionalities like A/B testing, exit-intent technology, geolocation targeting, and detailed analytics.
Customization options ❌ Provides standard customization options like text, images, and basic styling. ✅ Extensive customization options with a drag-and-drop editor, pre-designed templates, and the ability to add custom HTML, CSS, and JavaScript for greater flexibility.
Integration capabilities ❌ Integrates with various third-party tools but lacks the extensive CRM integration offered by Picreel. ✅ Seamless integration with various website platforms and CMS systems like Magento, Joomla, and more, allowing for easier management across different sites.
Targeting capabilities ✅ Offers smart targeting, traffic source targeting, and device-based targeting. ✅ Advanced targeting options enable highly specific audience targeting, including geolocation, referral source, user behavior tracking, device type, and time-based triggers.

Method 1: Using the Vercel Popupsmart Extension

Here’s how to set up a popup in Vercel using the Popupsmart extension:

1. Register with Popupsmart and sign into your account.

Register to Popupsmart

2. Click the “Embed Code” to get your unique code.

 Embed Code

‍3. A modal will display the embed code for Popupsmart. Copy your code to the clipboard.

Copy to clipboard

‍4. Go to your Vercel website. Then, paste your embed code to the code insertion section of the site deployed with Vercel.

5. Afterward, go to your Popupsmart dashboard and select the “Websites” area under your profile.

Popupsmart dashboard

‍6. Add your Vercel website’s domain by clicking the “New website” button.

Add your Vercel website’s

‍7. Type in your URL and press the “Save” button in the “Add a new website” section.

Add a new website

8. Build your conversion-ready popup by going to your dashboard and selecting the “New Campaign” option.

New Campaign

‍9. Develop your popup campaign and customize it as much as you like. Next, click the “Publish” button on the left-hand panel when done.

popup campaign

‍10. Then, you will see a modal showing your popup is published successfully.

Method 2: Using Picreel Popup Builder

Picreel is a popup maker that works across multiple platforms, providing 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.

Campaigns

3. From the templates menu, choose the type of popup you want to create.

templates menu

4. Once you select the design, customize it according to your preferences.

customize it according

5. Configure your targeting and trigger options to specify when and where you want your popup to appear.

personalize targeting

6. Click “Save” to activate your popup.

Embedding Picreel HTML Code Inside Vercel

To embed a Picreel popup on your Vercel website, follow these steps:

1. Navigate to Picreel campaigns and click “View Code.

saving se

2. Copy the code.

3. Log in to Vercel, choose any template for the page you want your popup to appear in and go to “Vercel HTML Starter templates.

Vercel HTML Starter templates

4. You can choose where you want your popup displayed, click the space for “HTML Code,” and paste the code.

5. Save the changes and publish the page.

Which Is a Better Method: Method 1 or 2?

Although Popupsmart offers a simple and efficient way to create popups in Vercel, Picreel remains the superior choice for businesses seeking more robust functionality. Here’s why:

  • Advanced Features: Picreel includes A/B testing, exit-intent technology, and more advanced analytics, allowing businesses to optimize their campaigns for better performance.
  • Deeper Integrations: Picreel integrates seamlessly with popular CRMs and marketing tools, giving businesses a more cohesive marketing strategy.
  • Comprehensive Analytics: Picreel’s detailed analytics provide heatmaps, user behavior tracking, and real-time reporting, making it easier to measure the success of your popups.

For businesses focused on maximizing conversions and engagement, I feel Picreel offers a more complete set of tools, making it the better long-term option.

FREE. All Features. FOREVER!

Try our Forever FREE account with all premium features!

About the author

Picreel Editorial Team is a passionate group of CRO and eCommerce experts dedicated to delivering top-notch content. We stay ahead of the curve on trends, tackle technical hurdles, and provide practical tips to boost your business. With our commitment to quality and integrity, you can be confident you're getting the most reliable resources to enhance your customer engagement and lead generation initiatives.