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.
- 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.
- 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.