Skip to main content

Float Button Mode

Add a floating button that stays visible as users scroll through your page. When clicked, it opens your form in a popup.

How It Works​

A customizable button appears in a fixed position on your page (typically bottom-right corner). It remains visible as users scroll, providing constant access to your form without being intrusive.

Implementation Steps​

Step 1: Get Your Embed Code​

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

Step 2: Add Code to Your Website​

Paste the code before the closing </body> tag of your HTML:

<!-- Interactive Form Float Button -->
<script src="https://cdn.interactiveform.com/embed.js"></script>
<script>
  InteractiveForm.init({
    formId: 'YOUR_FORM_ID',
    mode: 'float-button'
  });
</script>

Testing​

After adding the code:

  1. Save and publish your changes
  2. Visit your website
  3. Verify the button appears in the correct position
  4. Click the button to ensure the form opens
  5. Test on mobile devices for responsive behavior

Mobile Optimization​

The float button automatically adjusts for mobile devices. You can customize mobile-specific settings:

InteractiveForm.init({
  formId: 'YOUR_FORM_ID',
  mode: 'float-button',
  mobile: {
    position: 'bottom-center',
    buttonSize: 'large',
    fullWidth: true
  }
});

Troubleshooting​

Button doesn't appear​

  • Check browser console for errors
  • Verify your form ID is correct
  • Ensure the script is loaded properly

Button overlaps with other elements​

  • Adjust the position or margins
  • Check z-index conflicts with other fixed elements

Button not visible on mobile​

  • Test responsive settings
  • Check if button is hidden by mobile menu or other elements

Next Steps​