Skip to main content

Popup Mode on Wix

Add a popup form to your Wix website that appears as an overlay. This method uses Wix's Tracking & Analytics feature to add site-wide code.

Implementation Steps​

Step 1: Get Your Embed Code​

  1. Go to your form's Embed page
  2. Select Wix Website
  3. Choose Popup as the display mode
  4. Copy the generated code

Step 2: Access Wix Settings​

  1. Log in to your Wix Dashboard
  2. Select your website
  3. Click Settings in the left sidebar
  4. Scroll down to Advanced section
  5. Click Custom Code

Step 3: Add Custom Code​

  1. Click + Add Custom Code at the top right
  2. Paste your embed code in the code box
  3. Name your code: "Interactive Form Popup"
  4. Choose where to add the code: Body - end
  5. Select pages: All pages or specific pages
  6. Click Apply

Step 4: Configure Trigger​

The embed code includes trigger configuration. You can customize it:

<script src="https://cdn.interactiveform.com/embed.js"></script>

Step 5: Publish Your Site​

  1. Click Publish in the top right
  2. Visit your live site to test the popup

Trigger Options​

Button Click​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'popup',
    trigger: 'button',
    triggerSelector: '#open-form-button'
  });
</script>

Time Delay​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'popup',
    trigger: 'time',
    delay: 5000 // 5 seconds
  });
</script>

Scroll Depth​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'popup',
    trigger: 'scroll',
    scrollPercent: 50
  });
</script>

Exit Intent​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'popup',
    trigger: 'exit-intent'
  });
</script>

Customization for Wix​

Match Wix Theme Colors​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'popup',
    trigger: 'button',
    triggerSelector: '#open-form-button',
    style: {
      primaryColor: '#116DFF', // Wix default blue
      fontFamily: 'Madefor, sans-serif' // Wix default font
    }
  });
</script>

Responsive Settings for Wix​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'popup',
    trigger: 'button',
    triggerSelector: '#open-form-button',
    responsive: true,
    mobile: {
      fullScreen: true // Better for Wix mobile view
    }
  });
</script>

Show Popup on Specific Wix Pages​

Option 1: Using Custom Code Page Selection​

When adding custom code in Wix:

  1. Choose Load code on selected pages
  2. Select specific pages from the list

Option 2: Using JavaScript​

<script>
  // Only show on specific pages
  var currentPath = window.location.pathname;
  var allowedPaths = ['/home', '/products', '/services'];
  
  if (allowedPaths.some(path => currentPath.includes(path))) {
    InteractiveForm.init({
      formId: 'YOUR_FORM_ID',
      mode: 'popup',
      trigger: 'time',
      delay: 3000
    });
  }
</script>

Wix-Specific Considerations​

Wix Editor vs Editor X​

  • Wix Editor: Use Element ID for trigger selectors
  • Editor X: Supports both CSS classes and IDs

Wix Mobile Editor​

Test your popup in Wix's mobile editor:

  1. Click Mobile icon in top bar
  2. Switch to mobile view
  3. Test popup functionality
  4. Adjust mobile-specific settings if needed

Wix Multilingual Sites​

For multilingual Wix sites:

<script>
  // Detect Wix language
  var lang = document.documentElement.lang || 'en';
  
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'popup',
    trigger: 'button',
    triggerSelector: '#open-form-button',
    language: lang
  });
</script>

Testing in Wix​

Preview Mode​

  1. Click Preview in Wix Editor
  2. Test popup triggers
  3. Verify form displays correctly
  4. Check mobile responsiveness

Published Site​

  1. Publish your site
  2. Test on actual devices
  3. Check different browsers
  4. Verify form submissions work

Troubleshooting​

  • Verify custom code is added to correct location (Body - end)
  • Check that code is applied to correct pages
  • Ensure Element ID matches trigger selector
  • Check browser console for errors

Button doesn't trigger popup​

  • Verify Element ID is set correctly on button
  • Use # prefix for ID selectors
  • Check that button is not inside a link
  • Test with different trigger types
  • Wix elements may have high z-index
  • Contact support for z-index adjustment
  • Try using time or scroll trigger instead

Form not responsive on mobile​

  • Test in Wix mobile editor
  • Enable fullScreen mode for mobile
  • Check Wix mobile settings

Best Practices for Wix​

  1. Use Element IDs: More reliable than CSS classes in Wix
  2. Test in Preview: Always test before publishing
  3. Mobile First: Check mobile view in Wix editor
  4. Page Load: Use time delay to ensure Wix loads completely
  5. Wix Apps: Ensure no conflicts with other Wix apps

Next Steps​