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.
- Use Webflow's Embed block to insert Donorbox’s pop-up script and button HTML where needed.
- Style the button using custom CSS or use custom JavaScript to trigger the pop-up from a Webflow Button.
You can trigger a Donorbox pop-up form using a button in Webflow, but to do so, you’ll need to use the Embed block to insert custom JavaScript provided by Donorbox. Webflow’s Button block alone does not support the JavaScript needed to launch the modal.
1. Embed the Donorbox Pop-Up Script
- Go to your Donorbox campaign, and under Embed Codes, select “Pop-up Donation Form.”
- Copy both:
- The JavaScript snippet (includes their CDN
donate-button.js) - The button element with the data attributes for your campaign.
2. Use the Embed Block in Webflow
- In Webflow, drag an Embed element (not a Button) to where you want the donation trigger.
- Paste the full Donorbox code, including both the script tag and the button HTML.
- Please note: Webflow won’t execute external scripts in the Designer, so test functionality in Preview or the Published site.
3. Match Styling with Your Site’s Buttons
To match your site’s button styles:
- Use custom CSS within a
<style>tag in the page’s header (via Page settings) or your Site settings » Custom Code » Head. - Target the
.dbox-donation-buttonclass to override Donorbox’s default styles, for example: - Set background color, padding, font, border radius to match your Webflow button design.
- Alternatively, remove the default Donorbox button and:
- Create your own Webflow Button, then
- Wrap it with a
<div>and use an<a>tag with the samedata-do...attributes from Donorbox, applying the Event Listener manually. This requires deeper JavaScript integration.
4. Alternate: Embed Button Trigger Script Only
If you prefer to use Webflow’s Button block, you must:
- Assign a custom
idorclassto the Webflow Button. - Add custom JavaScript (via Embed block or site-wide Footer code) that:
- Listens for a click on the Webflow button.
- Triggers the Donorbox pop-up using their JS API.
This requires understanding and modifying raw JS code, which is less beginner-friendly.
Summary
To use a Donorbox pop-up form in Webflow, you must use the Embed block to insert Donorbox’s script and HTML. Webflow’s built-in Button block does not support the necessary JavaScript functionality by itself. To match your site’s styling, override the Donorbox button’s CSS, or use custom JS to trigger the pop-up from a styled Webflow button.