Webflow sync, pageviews & more.
NEW

Can I embed a pop-up form from Donorbox using the Button block in Webflow, or do I need to use the Embed block? How can I match the styling of the buttons on my site? Thank you.

TL;DR
  • Add the Donorbox embed script in a Webflow Embed block to enable popup functionality.
  • Use a Webflow-styled Button block with a custom class and JavaScript in the Embed block to trigger the Donorbox popup.

You can embed a Donorbox pop-up form in Webflow using either the Button block or the Embed block, but using the Embed block is required to include the Donorbox script that enables the popup behavior.

1. Use the Embed Block for the Script

  • Donorbox provides a script (usually starting with <script src="https://donorbox.org/widget.js") that powers the pop-up donation form.
  • In Webflow, go to your page or component and add an Embed block from the Add panel.
  • Paste the Donorbox-provided script into this Embed block. This ensures the pop-up functionality is available across your page.

2. Use a Webflow Button Block for Styling

  • If you want the Donorbox pop-up to be triggered by your own Webflow-styled button, you can still use the Button block, but you must manually configure its behavior.
  • Apply a custom class to your Webflow button (e.g., donorbox-button).
  • Then, inside your Embed block, include JavaScript that binds the Donorbox function to that class. Example:
    document.querySelector('.donorbox-button').addEventListener('click', function() { DonorBox.showPopupForm('YOUR_CAMPAIGN_ID'); });
  • Replace "YOUR_CAMPAIGN_ID" with the actual Donorbox campaign identifier from your embed code.
  • This lets you fully control the button’s styling in Webflow while still triggering the Donorbox popup.

3. Match Styling with Webflow Button

  • Design your Webflow button using the Style panel as usual.
  • You can customize font, background color, padding, border-radius, hover effect, etc., just like any other Webflow element.
  • Because you’re using a regular Button block, your styling will match your site's theme without needing to modify the Donorbox code.

Summary

You must use the Embed block for the Donorbox popup script, but you can trigger it using a Webflow Button block to preserve consistent styling. Use a custom class and a small JavaScript snippet to bind the popup behavior.

Rate this answer

Other Webflow Questions