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
- Default
- Event Tickets
- Ghost
- Urgent Appeal
- Pill
Copy
Ask AI
<givebutter-button campaign="YOUR_CAMPAIGN_CODE"></givebutter-button>
Copy
Ask AI
<givebutter-button
campaign="YOUR_CAMPAIGN_CODE"
label="Get Tickets"
icon="ticket"
background-color="#6366F1"
label-color="#FFFFFF"
border-radius="8"
></givebutter-button>
Copy
Ask AI
<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>
Copy
Ask AI
<givebutter-button
campaign="YOUR_CAMPAIGN_CODE"
label="Donate Now"
background-color="#DC2626"
label-color="#FFFFFF"
border-radius="4"
></givebutter-button>
Copy
Ask AI
<givebutter-button
campaign="YOUR_CAMPAIGN_CODE"
label="Send a Gift"
icon="gift"
background-color="#EC4899"
label-color="#FFFFFF"
border-radius="100"
></givebutter-button>
Form Widget
- Default
- Card Style
- Bordered Section
Copy
Ask AI
<givebutter-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-form>
Copy
Ask AI
<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>
Copy
Ask AI
<div
style="
max-width: 600px;
margin: 0 auto;
padding: 1.5rem;
border: 2px solid #3b82f6;
border-radius: 8px;
border-left: 6px solid #3b82f6;
"
>
<givebutter-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-form>
</div>
Goal Bar Widget
- Default
- Custom Colors
- Minimal
- Large
- Thermometer
Copy
Ask AI
<givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>
Copy
Ask AI
<givebutter-goal-bar
campaign="YOUR_CAMPAIGN_CODE"
progress-bar-color="#8B5CF6"
text-color="#1F2937"
></givebutter-goal-bar>
Copy
Ask AI
<givebutter-goal-bar
campaign="YOUR_CAMPAIGN_CODE"
show-raised-percentage="false"
show-goal-amount="false"
size="sm"
></givebutter-goal-bar>
Copy
Ask AI
<givebutter-goal-bar
campaign="YOUR_CAMPAIGN_CODE"
progress-bar-color="#DC2626"
size="lg"
></givebutter-goal-bar>
Copy
Ask AI
<givebutter-goal-bar
campaign="YOUR_CAMPAIGN_CODE"
type="thermometer"
progress-bar-color="#DC2626"
></givebutter-goal-bar>
Signup Form Widget
- Default
- With Title
- Custom Button
- Card Style
Copy
Ask AI
<givebutter-signup-form account="YOUR_ACCOUNT_ID"></givebutter-signup-form>
Copy
Ask AI
<givebutter-signup-form
account="YOUR_ACCOUNT_ID"
title="Stay Connected"
description="Get updates about our work"
></givebutter-signup-form>
Copy
Ask AI
<givebutter-signup-form
account="YOUR_ACCOUNT_ID"
title="Join Our Newsletter"
button-text="Subscribe Now"
button-background-color="#8B5CF6"
></givebutter-signup-form>
Copy
Ask AI
<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>