Interactive Examples

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.

Default
Event Tickets
Ghost
Urgent Appeal
Pill

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

<givebutter-button
  campaign="YOUR_CAMPAIGN_CODE"
  label="Get Tickets"
  icon="ticket"
  background-color="#6366F1"
  label-color="#FFFFFF"
  border-radius="8"
></givebutter-button>

<givebutter-button
  campaign="YOUR_CAMPAIGN_CODE"
  label="Learn More"
  background-color="transparent"
  label-color="#059669"
  border-color="#059669"
  border-width="2"
  border-radius="8"
  drop-shadow="false"
  icon="none"
></givebutter-button>

<givebutter-button
  campaign="YOUR_CAMPAIGN_CODE"
  label="Donate Now"
  background-color="#DC2626"
  label-color="#FFFFFF"
  border-radius="4"
></givebutter-button>

<givebutter-button
  campaign="YOUR_CAMPAIGN_CODE"
  label="Send a Gift"
  icon="gift"
  background-color="#EC4899"
  label-color="#FFFFFF"
  border-radius="100"
></givebutter-button>

Default
Card Style
Bordered Section

<givebutter-giving-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-giving-form>

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-giving-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-giving-form>
</div>

<div
  style="
  max-width: 600px;
  margin: 0 auto;
  padding: 1.5rem;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  border-left: 6px solid #3b82f6;
"
>
  <givebutter-giving-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-giving-form>
</div>

Default
Custom Colors
Minimal
Large
Thermometer

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

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  progress-bar-color="#8B5CF6"
  text-color="#1F2937"
></givebutter-goal-bar>

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  show-raised-percentage="false"
  show-goal-amount="false"
  size="sm"
></givebutter-goal-bar>

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  progress-bar-color="#DC2626"
  size="lg"
></givebutter-goal-bar>

A classic thermometer-style visualization for your fundraising progress.

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  type="thermometer"
  progress-bar-color="#DC2626"
></givebutter-goal-bar>

Default
With Title
Custom Button
Card Style

<givebutter-signup-form account="YOUR_ACCOUNT_ID"></givebutter-signup-form>

<givebutter-signup-form
  account="YOUR_ACCOUNT_ID"
  title="Stay Connected"
  description="Get updates about our work"
></givebutter-signup-form>

<givebutter-signup-form
  account="YOUR_ACCOUNT_ID"
  title="Join Our Newsletter"
  button-text="Subscribe Now"
  button-background-color="#8B5CF6"
></givebutter-signup-form>

Join Our Community

Get exclusive updates and early access

<div style="
  max-width: 500px;
  padding: 2rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
">
  <h3>Join Our Community</h3>
  <p>Get exclusive updates and early access</p>
  <givebutter-signup-form
    account="YOUR_ACCOUNT_ID"
    button-text="Count Me In"
  ></givebutter-signup-form>
</div>

Introduction

Widget Types

Website Builders

Advanced

Interactive Examples

Button Widget

Form Widget

Support Our Cause

Goal Bar Widget

Join Our Community

​Button Widget

​Form Widget

​Support Our Cause

​Goal Bar Widget

​Signup Form Widget

​Join Our Community

Button Widget

Form Widget

Support Our Cause

Goal Bar Widget

Signup Form Widget

Join Our Community