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.

You can trigger a Donorbox pop-up form using Webflow, but to do so correctly, you’ll need to use the Embed block for the JavaScript code provided by Donorbox. You can style a Webflow Button element to look consistent with your site and assign the proper trigger.

1. Copy the Donorbox Pop-Up Code

• Go to your Donorbox dashboard.
• Under your campaign settings, find the “Pop-up Donation Form” option.
• Copy the full JavaScript code snippet they provide.
• This usually includes both an external script (donorbox.org) and a custom function to open the modal.

2. Add the Script via Embed Block

• In Webflow, drag an Embed block (from the Add panel) anywhere on the page (typically inside the Footer or Body).
• Paste the full Donorbox JavaScript code into the Embed block.
• This step is required because Webflow’s native Button does not support inline JavaScript directly.

3. Create and Style the Webflow Button

• Add a Webflow Button block to your desired location.
• Give it a unique ID or class (e.g., donate-btn) to make it easy to target.
• Customize the button’s text, color, padding, etc. by using the Style panel, so it matches your site design.

4. Trigger the Pop-Up via Interaction

• With the button selected, go to the Interactions panel.
• Create a new Mouse Click (Tap) interaction.
• Choose "Run JavaScript" as the action (needs to be via custom code). Webflow doesn’t allow JavaScript execution directly with interactions, so you'll need an extra step:

  • Instead, add a small snippet in an Embed block or site-wide Footer Code:

    Example:

    • Place this script in an Embed block:
      • document.getElementById("donate-btn").addEventListener("click", function() { DonorBox.showPopup(); });
    • Adjust "donate-btn" to match your button’s actual ID.

5. Match Styling with Site Buttons

• Use the same class name or copy styling properties from your existing buttons.
• If you're using global classes or Components, apply those to ensure consistency.
• You can also apply hover states and transitions in Webflow’s Style panel, just like any other button.

Summary

You must use the Embed block to include the Donorbox pop-up script. Then use a Webflow Button for styling and trigger it with custom JavaScript added via an Embed block. This lets you keep your button visually consistent while enabling the modal functionality.