Add an install popup to Framer — setup guide

Key takeaways

• Add the script in project settings, not a visual embed.
• Confirm Custom Code access on your paid Framer plan.
• Use all-page scope and avoid duplicate scripts.
• Test the published URL and the home-screen launch separately.

Before you start

• A paid Framer plan with Custom Code access.
• A published HTTPS site.
• An InstantPWA popup with the matching published address.

Step-by-step for Framer

1. Step 1
   Configure and copy your popup

   Save your published Framer address in InstantPWA, match the site branding and copy your install code.

   <script src="https://instantpwa.com/api/public/embed.js" data-widget-id="YOUR_WIDGET_ID" defer></script>

2. Step 2
   Open project Custom Code

   Open the Framer project settings and find Custom Code. Add a new script entry rather than a canvas embed.

3. Step 3
   Apply the script to all pages

   Paste the script at the end of the body and choose all pages. Keep one copy in the project; do not also paste it into individual page settings.

4. Step 4
   Publish and test on a phone

   Publish the changes. Open the address saved in InstantPWA, run the install check and follow the home-screen instructions in Safari or Chrome. Visit another page to confirm the popup is not duplicated.

Common Framer gotchas

• Custom code on the published site is not the same as a canvas preview.
• A custom domain and a framer.app address are different origins; save the one visitors actually use.
• A separate Netlify or CDN service worker cannot control your Framer origin.
• Existing popup dismissal settings may prevent it appearing on every test visit.

FAQ

Platform documentation

• Framer: adding custom code