Givebutter

How to integrate Givebutter with Webflow

Content teams need to launch donation campaigns and update fundraising goals without developer involvement. Hard-coding donation forms requires engineering time for every campaign change. Embedding Givebutter widgets lets non-technical staff configure forms, update campaign copy, and adjust fundraising targets through a dashboard interface while developers maintain control over page layouts and site architecture.

You can integrate Givebutter with Webflow through embedded widgets for donation collection or API connections for custom workflows. Install the Givebutter JavaScript library in Webflow's custom code settings once, then embed individual widgets (donation buttons, forms, progress bars) using Embed elements wherever needed.

The Givebutter API provides endpoints for campaigns, transactions, and donor contacts when you need programmatic data access through middleware server integration.

Givebutter JavaScript library and embed widgets

Add donation buttons, inline forms, and fundraising progress bars to Webflow pages using Embed elements that contain Givebutter widget tags. Create widgets in the Givebutter dashboard (Sharing > Widgets), configure styling options (background color, border radius, button text), then copy the generated HTML snippet.

Paste the snippet into a Webflow Embed element on your page. Widget configuration changes in the dashboard (color updates, text changes, goal adjustments) propagate to all embedded instances without re-publishing your Webflow site.

The integration works in two phases. Install the Givebutter JavaScript library once in your site's custom code settings, then add individual widgets wherever you need donation functionality. Widgets render inside your page layout and inherit responsive behavior from your Webflow breakpoint settings.

Implementation steps:

1. Add the Givebutter JavaScript library to your site by navigating to Site Settings > Custom Code and pasting this code in the Head Code section:

<script>
window.Givebutter=window.Givebutter||function(){(Givebutter.q=Givebutter.q||[]).push(arguments)};Givebutter.l=+new Date;
window.Givebutter('setOptions',{accountId:"{YOUR_ACCOUNT_ID}"});
</script>
<script async src="https://js.givebutter.com/elements/latest.js"></script>

1. Create widgets in your Givebutter dashboard under Sharing > Widgets
2. Customize appearance using dashboard controls (colors, text, size, shape)
3. Copy the generated embed code
4. Add an Embed element to your Webflow page
5. Paste the widget code and save
6. Publish to see widgets (custom code in embed elements won't appear in Webflow)

Available widget types:

1. Dashboard-Configured Widget:

<givebutter-widget id="{YOUR_WIDGET_ID}"></givebutter-widget>

1. Popup Donation Button:

<givebutter-button campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-button>

1. Inline Donation Form:

<givebutter-form campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-form>

Customization Attributes (for buttons without dashboard configuration):

• label - Button text (default: "Donate")
• label-color - Text & icon color in hex
• background-color - Button background in hex
• drop-shadow - Shadow effect (true/false)
• border-radius - Corner roundness in pixels
• border-color - Border color in hex
• border-width - Border thickness in pixels

Important limitations

Apple Pay doesn't work in embedded widgets due to iframe restrictions. Donors who select Apple Pay must be redirected to Givebutter's hosted checkout page.

Custom code in Embed elements requires site publication to test. Preview mode shows empty containers where widgets will appear. Use Webflow's staging domain to validate widget behavior before pushing to production.

Build with Webflow and Givebutter APIs

Connect Givebutter's REST API with Webflow's Data API to sync donation records to CMS collections, trigger automated workflows when campaigns launch, or build custom donor dashboards.

This approach requires a middleware server (a server that sits between Givebutter and Webflow to handle authentication and data transfer) to handle authentication, process webhooks, and orchestrate data between platforms. Middleware servers require backend development expertise and infrastructure like Vercel, AWS Lambda, or similar hosting platforms.

The Givebutter API provides endpoints for campaigns, transactions, and donor contacts. The Webflow Data API enables CMS item creation, form data access, and webhook management. Both use Bearer token authentication (an authentication credential that proves your identity to the API) and return JSON responses.

Build API integrations when you need to display donation data in Webflow CMS pages, create campaigns programmatically, or connect donation events to marketing automation tools. For basic donation collection, the embedded widget approach is simpler and doesn't require backend development.

Key integration patterns:

• Sync completed donations to Webflow CMS collections for display on your site
• Create campaign pages automatically when new Givebutter campaigns launch
• Trigger email sequences through Webflow form submissions that create Givebutter contacts
• Display real-time fundraising metrics using data from the Givebutter API

Syncing donation data to Webflow CMS

Store donation records in Webflow CMS collections to display donor recognition lists, build custom fundraising dashboards, or show recent contributions on campaign pages. Set up a webhook endpoint to receive notifications when donations complete using Givebutter's transaction.succeeded webhook event, then use Webflow's API to create CMS items with donor and transaction details from the webhook payload.

Configure a Givebutter webhook to send transaction.succeeded events to your middleware server. Extract donor name, amount, campaign, and timestamp from the payload. Call Webflow's Create CMS Item endpoint to store the donation record in a collection.

Implementation workflow:

1. Create a Webflow CMS collection with fields for donor name, amount, campaign, and date
2. Get the collection ID using List Collections
3. Set up a server endpoint to receive Givebutter webhooks
4. Verify webhook signatures using the signing secret with HMAC signature verification (a cryptographic method to confirm webhook authenticity)
5. Extract transaction data from the payload
6. POST to /v2/collections/{collection_id}/items with mapped donation fields

Available webhook events:

Givebutter supports 9 primary webhook events that can be triggered and configured for integration workflows:

1. campaign.created - New campaign creation
2. campaign.updated - Campaign modifications
3. ticket.created - Event ticket purchases
4. transaction.succeeded - Successful donations (most critical for integration)
5. contact.created - New contact additions
6. plan.canceled - Recurring plan cancellations
7. plan.created - New recurring plan creation
8. plan.resumed - Paused plan resumptions
9. plan.updated - Plan modifications

Each webhook includes a signing secret for HMAC signature verification. The transaction.succeeded and contact.created events are not fired during CSV imports and only trigger for real-time transactions.

Givebutter does not provide webhooks for transaction refunds or updates. Real-time CMS synchronization cannot track refunded donations or transaction modifications. Build refund reconciliation through periodic API polling or manual CSV export processing.

Sample transaction payload includes id, campaign_id, amount, first_name, last_name, email, transacted_at, and custom_fields. Amount values arrive in cents.

What you can build

Integrating Givebutter with Webflow enables organizations to build branded fundraising experiences that collect donations without redirecting visitors to external platforms.

• Annual campaign landing pages: Create pages with embedded donation forms and live fundraising progress bars that update automatically as contributions arrive. Donor recognition sections require backend API integration to sync donor data to CMS collections
• Event registration and ticketing sites: Build microsites for galas, auctions, or virtual events with embedded ticket purchasing widgets and attendee counters (requires backend API polling to stay current)
• Multi-campaign fundraising hubs: Organize multiple campaigns on a single site with Webflow's CMS filtering and embedded donation widgets for each cause or department
• Donor dashboards with middleware (requires engineering): Display recent contributions, campaign performance metrics, and recurring giving statistics by syncing transaction data to Webflow CMS collections through backend server infrastructure that processes webhooks and handles API authentication