Documentation Index
Fetch the complete documentation index at: https://docs.givebutter.com/llms.txt
Use this file to discover all available pages before exploring further.
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>
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>
