How to add a popup to your website
PopForge installs with a widget div and a JavaScript file. You need permission to add custom HTML or theme code to your website.
1. Choose and edit your popup
Browse the 45 templates or start from a blank design in the studio. Edit the text, colors, fields and offer. Choose one trigger, page rules, devices and frequency.
2. Sign in and save
Create an account or sign in, then save the widget. The Publish tab provides installation code for that saved widget. Guest previews do not issue a hosted installation code.
3. Paste your installation code
Copy the exact code from Publish. The example below contains a placeholder; replace it with your saved widget ID.
<div data-popforge="YOUR_SAVED_WIDGET_ID"></div> <script src="https://popforge.shailu3597.workers.dev/popforge.js"></script>
Paste both lines before your closing </body> tag where your website platform permits it.
Platform notes
- WordPress: use a Custom HTML block or an appropriate theme/footer integration with permission to run scripts.
- Shopify: add the code to a suitable theme or custom Liquid location. Back up your theme first.
- Webflow: use custom embed/footer code where your plan permits scripts.
- Other builders: confirm that custom JavaScript is supported. A popup inside an iframe cannot extend outside that frame.
4. Test on the published website
Open a clean browser session, visit an included page and perform the chosen trigger. Verify the popup on mobile and desktop. For forms, submit a test response and confirm the saved lead count in your PopForge account.
Why might a popup not appear?
- The script or widget div is missing, blocked by a content security policy, or placed in an unsupported embed.
- The widget ID was not saved, or the widget was deleted.
- Page rules, device settings or the frequency rule suppress the popup.
- The configured CSS selector does not match an element on the page.
- Desktop exit intent is being tested on a touch device.
Updating a live popup
Save edits to the same widget. Installed copies request its hosted configuration when the page loads, so you do not need to replace the installation code for routine edits.
Data and visitor experience
Use clear form labels, request only the data you need and provide appropriate privacy information. Embedded configuration and client-side webhook URLs are public. Do not place privileged credentials in them. Avoid obstructing essential content with intrusive popups.