Skip to main content

Float Button Mode on Wix

Add a floating button to your Wix website that stays visible as users scroll. This method uses Wix's Custom Code feature.

Implementation Steps​

Step 1: Get Your Embed Code​

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

Step 2: Access Wix Custom Code​

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

Step 3: Add the Code​

  1. Click + Add Custom Code
  2. Paste your embed code:
<script src="https://cdn.interactiveform.com/embed.js"></script>
<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    position: 'bottom-right'
  });
</script>
  1. Name: "Interactive Form Float Button"
  2. Add code to: Body - end
  3. Load on: All pages (or select specific pages)
  4. Click Apply

Step 4: Publish and Test​

  1. Click Publish in Wix Editor
  2. Visit your live site
  3. Verify the button appears and functions correctly

Customization Options​

Button Position​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    position: 'bottom-right', // 'bottom-left', 'top-right', 'top-left'
    offset: {
      bottom: '20px',
      right: '20px'
    }
  });
</script>

Button Appearance​

Match your Wix site design:

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    buttonText: 'Get a Quote',
    buttonColor: '#116DFF', // Wix default blue
    buttonTextColor: '#FFFFFF',
    buttonSize: 'medium',
    borderRadius: '50px' // Rounded button
  });
</script>

Show/Hide Behavior​

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    showAfterScroll: 300, // Show after scrolling 300px
    animation: 'slide-in',
    animationDelay: 1000
  });
</script>

Wix-Specific Configurations​

Avoid Wix Chat Conflict​

If you use Wix Chat, position the button to avoid overlap:

<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    position: 'bottom-left', // Wix Chat is usually bottom-right
    offset: {
      bottom: '20px',
      left: '20px'
    }
  });
</script>

Responsive for Wix Mobile​

Optimize for Wix mobile view:

<script>
  var isMobile = window.innerWidth < 768;
  
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    position: isMobile ? 'bottom-center' : 'bottom-right',
    buttonSize: isMobile ? 'large' : 'medium',
    buttonText: isMobile ? '' : 'Contact Us', // Icon only on mobile
    offset: isMobile ? {
      bottom: '10px',
      left: '50%',
      transform: 'translateX(-50%)'
    } : {
      bottom: '20px',
      right: '20px'
    }
  });
</script>

Match Wix Theme​

Automatically match your Wix site colors:

<script>
  // Try to detect Wix theme color
  var wixThemeColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--wix-color-1') || '#116DFF';
  
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    buttonColor: wixThemeColor
  });
</script>

Page-Specific Display​

Show on Specific Pages Only​

When adding custom code:

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

Or use JavaScript:

<script>
  var currentPath = window.location.pathname;
  
  // Show only on product and service pages
  if (currentPath.includes('/product') || currentPath.includes('/service')) {
    InteractiveForm.init({
      formId: 'YOUR_FORM_ID',
      mode: 'float-button',
      buttonText: 'Get Info'
    });
  }
</script>

Different Buttons for Different Pages​

Create multiple custom code snippets:

Code 1: Product Pages

<script>
  if (window.location.pathname.includes('/product')) {
    InteractiveForm.init({
      formId: 'PRODUCT_FORM_ID',
      mode: 'float-button',
      buttonText: 'Product Inquiry',
      buttonColor: '#007bff'
    });
  }
</script>

Code 2: Service Pages

<script>
  if (window.location.pathname.includes('/service')) {
    InteractiveForm.init({
      formId: 'SERVICE_FORM_ID',
      mode: 'float-button',
      buttonText: 'Book Service',
      buttonColor: '#28a745'
    });
  }
</script>

Wix Multilingual Support​

For Wix multilingual sites:

<script>
  var lang = document.documentElement.lang || 'en';
  
  var buttonTexts = {
    'en': 'Contact Us',
    'es': 'Contáctenos',
    'fr': 'Contactez-nous',
    'de': 'Kontaktieren Sie uns'
  };
  
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button',
    buttonText: buttonTexts[lang] || buttonTexts['en'],
    language: lang
  });
</script>

Testing in Wix​

Preview Mode​

  1. Open Wix Editor
  2. Click Preview button
  3. Test button appearance and position
  4. Click button to verify form opens
  5. Test on different page sections

Mobile Testing​

  1. In Wix Editor, click Mobile icon
  2. Switch to mobile view
  3. Verify button position and size
  4. Test button functionality
  5. Check for conflicts with Wix mobile menu

Published Site Testing​

  1. Publish your site
  2. Test on actual mobile devices
  3. Check different browsers
  4. Verify button doesn't overlap with Wix elements

Troubleshooting​

Button doesn't appear​

  • Check custom code is added to Body - end
  • Verify code is applied to correct pages
  • Check browser console for errors
  • Ensure Wix site is fully loaded

Button overlaps with Wix elements​

  • Adjust position and offset
  • Check z-index conflicts
  • Move button to different corner
  • Reduce button size

Button not visible on mobile​

  • Test in Wix mobile editor
  • Adjust mobile-specific settings
  • Check if hidden by Wix mobile menu
  • Verify responsive configuration

Conflicts with Wix Chat​

  • Position button on opposite side
  • Adjust z-index values
  • Consider disabling one feature
  • Contact support for advanced solutions

Button appears multiple times​

  • Check for duplicate custom code entries
  • Verify only one code snippet per page
  • Remove old/test code snippets

Best Practices for Wix​

  1. Test in Preview: Always test before publishing
  2. Mobile First: Optimize for mobile users
  3. Avoid Conflicts: Check for Wix Chat and other floating elements
  4. Page Load: Add slight delay to ensure Wix loads completely
  5. Consistent Design: Match button style with Wix theme
  6. Clear CTA: Use descriptive button text
  7. Accessibility: Ensure button is keyboard accessible

Advanced: Wix Velo Integration​

If you use Wix Velo (formerly Corvid), you can add more advanced functionality:

// In Wix Velo code
$w.onReady(function () {
  // Initialize form after Wix is ready
  if (typeof InteractiveForm !== 'undefined') {
    InteractiveForm.init({
      formId: 'YOUR_FORM_ID',
      mode: 'float-button',
      onFormSubmit: function(data) {
        // Custom Wix logic after form submission
        console.log('Form submitted:', data);
        // You can trigger Wix animations, update Wix database, etc.
      }
    });
  }
});

Next Steps​