Add an install popup to Webflow — setup guide

Key takeaways

• A Site or Workspace plan that includes custom code.
• Use your own popup ID in the script.
• Verify the published address, not an editor preview.
• Treat install guidance and full PWA capabilities as separate checks.

Before you start

• A Site or Workspace plan that includes custom code.
• A published HTTPS site.
• An InstantPWA popup configured for that site address.

Step-by-step for Webflow

1. Step 1
   Copy your popup’s code

   Create your popup, save its published website address and copy the install code. Replace the example ID with your own.

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

2. Step 2
   Install and verify: step 1

   Open Site settings → Custom code.

3. Step 3
   Install and verify: step 2

   Paste the snippet into Footer code and save changes.

4. Step 4
   Install and verify: step 3

   Publish to the domain you saved in InstantPWA.

5. Step 5
   Install and verify: step 4

   Open the published site and run the install check.

6. Step 6
   Check what the home-screen icon actually does

   Test Safari on iPhone and Chrome on Android. Open the installed shortcut and confirm the destination. A positive script check is not proof of offline caching or push permission.

Common Webflow gotchas

• Webflow does not provide arbitrary root-file hosting. A service worker on another domain cannot control your Webflow pages.
• Full same-origin PWA support needs a separate hosting/proxy strategy; the footer snippet only adds the popup.
• Save Custom Code and publish; saving alone does not update the live site.

FAQ