Skip to main content
Explore live, interactive examples of Givebutter Widgets. These are real, functioning widgets that demonstrate how they’ll look and behave on your website.
Note: These examples use a demo Givebutter account. When you implement widgets on your site, you’ll use your own Account ID and Campaign Codes.

​
Button Widget Examples

​
Default Button

The simplest implementation - a button with default styling: 
<givebutter-button campaign="YOUR_CAMPAIGN_CODE"></givebutter-button>

​
Customized Button Styles

See how different style options transform the button: 
<givebutter-button
  campaign="YOUR_CAMPAIGN_CODE"
  label="Support Our Mission"
  background-color="#3B82F6"
  label-color="#FFFFFF"
  border-radius="8"
></givebutter-button>

​
Button Positioning Examples

<div style="text-align: center;">
  <givebutter-button campaign="YOUR_CAMPAIGN_CODE"></givebutter-button>
</div>

<div style="text-align: right;">
  <givebutter-button campaign="YOUR_CAMPAIGN_CODE"></givebutter-button>
</div>

<div style="text-align: left;">
  <givebutter-button campaign="YOUR_CAMPAIGN_CODE"></givebutter-button>
</div>

​
Form Widget Examples

​
Basic Inline Form

A complete donation form embedded directly on the page: 
<div style="max-width: 600px; margin: 2rem auto;">
  <givebutter-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-form>
</div>

​
Styled Containers

​
Support Our Cause

Your donation makes a real difference in our community.

<div
  style="
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
"
>
  <h3>Support Our Cause</h3>
  <p>Your donation makes a real difference in our community.</p>
  <givebutter-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-form>
</div>

​
Goal Bar Widget Examples

​
Default Goal Bar

Show fundraising progress with a visual progress bar:

​
Campaign Progress

Every donation brings us closer to our goal!

<givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>

​
Customized Goal Bars

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  color="#8B5CF6"
  background-color="#E5E7EB"
  text-color="#1F2937"
  height="16"
></givebutter-goal-bar>

​
Goal Bar in Campaign Context

Combine goal bars with other elements for maximum impact:

​
Spring Fundraiser 2026

Help us reach our goal and make a lasting impact in our community

247 supporters have contributed so far

<div
  class="campaign-section"
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2.5rem; color: white;"
>
  <h2>Spring Fundraiser 2026</h2>
  <p>Help us reach our goal and make a lasting impact</p>

  <givebutter-goal-bar
    campaign="YOUR_CAMPAIGN_CODE"
    color="#FFFFFF"
    background-color="rgba(255,255,255,0.3)"
    text-color="#FFFFFF"
    height="16"
  ></givebutter-goal-bar>

  <p>247 supporters have contributed so far</p>

  <givebutter-button
    campaign="YOUR_CAMPAIGN_CODE"
    label="Contribute Now"
    background-color="#FFFFFF"
    label-color="#667eea"
  ></givebutter-button>
</div>

​
Real-World Layout Examples

​
Hero Section with Button

A common pattern for landing pages:

​
Make a Difference Today

Your support helps us create lasting change in our community

<section
  style="
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 4rem 2rem;
  color: white;
  text-align: center;
"
>
  <h1>Make a Difference Today</h1>
  <p>Your support helps us create lasting change in our community</p>
  <givebutter-button
    campaign="YOUR_CAMPAIGN_CODE"
    label="Support Our Mission"
    background-color="#FFFFFF"
    label-color="#667eea"
    border-radius="8"
  ></givebutter-button>
</section>
Perfect for blog posts or article pages:

​
Main Content Area

Your article or page content goes here. The sidebar donation form stays visible as users read through your content, making it easy for them to contribute.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div style="display: grid; grid-template-columns: 1fr 350px; gap: 2rem;">
  <article>
    <h1>Your Article Title</h1>
    <p>Your content...</p>
  </article>

  <aside style="background: #f9fafb; padding: 1.5rem; border-radius: 8px;">
    <h4>Support Us</h4>
    <givebutter-button campaign="YOUR_CAMPAIGN_CODE" label="Donate"></givebutter-button>
  </aside>
</div>

​
Implementation Tips

Test Before Launch

Click the examples above to see how the donation flow works. Test thoroughly on your site before going live.

Match Your Brand

Use your organization’s colors in the widget configuration to maintain brand consistency.

Mobile-First

All widgets are responsive. Test on mobile devices to ensure a smooth donor experience.

Clear CTAs

Use action-oriented button labels like “Donate Now” or “Give Today” for better conversion.

​
Ready to Get Started?

1

Install the Library

Add the Widgets library to your site. View installation guide
2

Choose Your Widget

Decide between button or form widgets based on your needs.
3

Customize & Deploy

Use these examples as a starting point and customize to match your brand.
4

Track Performance

Use UTM parameters to track which pages drive the most donations. Learn about analytics

​
Next Steps

Getting Started

Installation guide

Button Widget

Full button documentation

Form Widget

Complete form guide

Goal Bar Widget

Progress bar documentation