Practical guide
The hard part is not the window itself. It is the message, the timing and the next action. Here is how to add a useful popup, with or without code, without turning your site into an interrupted journey.
CONTEXT: HESITATION
A clearer next step.
A short message can help your visitor continue.
Read the guideComparing two options?
Here is the comparison that can help you choose.
Before you start
A popup is an element layered over your page to highlight one piece of information, offer, resource or action. It can appear after a delay, on scroll, on a specific page or when a behavior suggests that help could be useful.
Creating a popup without coding can mean using a visual tool, a CMS module or a ready-to-paste script. In every case, you still need to decide what to say, who should see it and when. Technology cannot fix a message that arrives too early or asks for too much.
Three ways to do it
Start with the simplest method for your site. You can always move to a more custom integration later.
Build the message in an interface, choose the pages and trigger, then install a small script. This works well when you want to test a popup without building a full component.
A good fit for a marketing team, a brochure site or a first hypothesis.
WordPress, page builders and some ecommerce platforms offer popup blocks or extensions. Check targeting, closing, mobile and measurement options before choosing one.
A good fit when your site already lives in a CMS and the module covers your use case.
With HTML, CSS and JavaScript, you control the rendering and behavior. You also need to handle accessibility, responsive layout, loading, closing and display frequency.
A good fit for a specific requirement or a team that wants the logic in its own codebase.
The simple method
An effective popup starts with a content decision. Installation comes next.
Choose what you want to help someone do: read a resource, compare an offer, request a demo, book a call or start a journey.
A pricing page, article and homepage have different intent. Connect the popup to a context: arrival, scroll, delay, click, inactivity or exit.
Say what the visitor can get and why it helps now. A title, one sentence and a clear button are often enough.
With an external tool, paste the script into the area provided by your site. With a CMS, add the block or extension. With custom code, make the component available on the selected routes.
Check mobile, closing, buttons, links, loading and frequency. Then measure views and clicks while keeping the page goal as your reference.
The settings that matter
A popup does not need to appear on arrival to be seen. Give it a rule that matches the moment when it becomes useful.
Show a message on pages where it answers a real question. Avoid broadcasting it everywhere by default.
Choose arrival, delay, scroll, inactivity, click or exit intent according to the scenario.
Keep one primary button. The visitor should understand what happens after the click.
Make closing obvious and avoid showing the same message on every page or every visit.
Depending on your site
Installation changes, but the core work does not: one script or component, display rules and a message that respects the page.
Use an HTML block, an extension or your theme’s custom-code area. Make sure the solution does not load the popup on every page without targeting.
Look for the area intended for global scripts or embedded code. Available options may depend on your plan and template.
Add the script to the layout or component intended for third-party scripts, then limit it to the routes that need it. Do not block the main content.
Built for sites that need a clearer next step
Don't Leave fits SaaS products, stores, service businesses and content sites that want to guide the next action without rebuilding the site.
Offer a demo, an answer, a resource or an offer based on the context of the visit.
Add the script to any site that accepts a small snippet: Next.js, WordPress, Shopify, Webflow and more.
Track message views and clicks, with clear explanations of what data is collected.
Before you publish
A conversion lift does not make up for a frustrating experience. Check these points before putting the message in front of visitors.
Keep SEO in mind
On mobile, do not hide the main content behind a hard-to-close interstitial. The message should remain secondary to the page the visitor came to read.
Read Google’s guidanceThe popup should fit the screen, stay readable and keep its close control easy to reach.
Let visitors understand the page before asking for a new action, unless the context genuinely calls for it.
Two buttons, several offers and a long explanation quickly turn help into another decision to make.
People should be able to continue browsing without searching for a way to dismiss the message.
One isolated click is not enough. Compare popup behavior with the page goal and the quality of visits.
Keep exploring
Understand contextual popups and choose the right moment.
Read the guideAdd a popup to WordPress without installing a plugin.
Read the guideCompare ways to add a popup to Shopify.
Read the guideHelp shoppers choose, compare and move forward.
Read the guideFrequently asked questions
The simplest route is a no-code tool or a module built into your CMS. Define the message, page and trigger, then add the script or block provided by the solution. Even without development, test the mobile layout and closing behavior.
It depends on your site. Use the area intended for custom or global scripts, usually in the layout, theme or CMS settings. If you are unsure, ask whoever maintains the site instead of editing a random file.
Yes, when the platform lets you add a script, HTML block or compatible extension. Details vary by theme, plan and permissions. Always test on a real page before publishing it everywhere.
Match it to the goal: scroll for a resource related to reading, a delay to give someone time to understand, a click to extend an action, or exit intent to offer one relevant alternative before they leave.
The format is not automatically bad for search. The risk comes from an interstitial that hides the main content, especially on mobile, or from a script that seriously harms the experience. Keep important content accessible and the popup easy to close.
A browser popup is opened by the browser, such as a new window. A website popup is an element embedded in the page and usually controlled with HTML, CSS and JavaScript. Contextual messaging generally uses the second format.
Move from theory to your page
Don't Leave is designed to add contextual messages without rebuilding your site. Join early access if you want to test the right moment with your visitors.
Request access