Skip to main content
The Button Widget creates an attractive, clickable button on your website that opens a donation form in a popup modal. It’s perfect for adding donation functionality without disrupting your page layout.

​
Prerequisites

Before using the Button Widget, make sure you’ve installed the Widgets library.

​
Quick Setup

The fastest way to add a button widget is through the Givebutter Dashboard:
  1. Visit your Givebutter Dashboard
  2. Select your campaign and navigate to Sharing > Widgets
  3. Choose Button as the widget type and customize the appearance
  4. Copy the generated code and paste it on your site
<givebutter-widget id="YOUR_WIDGET_ID"></givebutter-widget>

​
Manual Setup

For full control without using the dashboard, create buttons directly with the <givebutter-button> tag: 
<givebutter-button campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-button>

​
Configuration Options

Customize your button’s appearance by adding attributes to the <givebutter-button> element:

​
Required Attributes

AttributeDescriptionExample
campaignYour campaign code (from your dashboard)my-campaign

​
Styling Attributes

AttributeDescriptionDefaultType
labelText displayed on the buttonDonateString
hide-labelHide the label text (icon only)falseBoolean
label-colorColor of the text and icon#FFFFFFHex Color Code
background-colorBackground color of the button#3366FFHex Color Code
border-colorColor of the button borderNoneHex Color Code
border-widthWidth of the border in pixels0Number
border-radiusCorner roundness (higher = more rounded)100Number
drop-shadowDisplay a shadow beneath the buttontrueBoolean
iconIcon to displayheartheart, gift, giving_hands, ticket, none
icon-positionPosition of the iconleftleft, right
typeHow the button opens the formmodalmodal, link
max-widthMaximum width of the modal560pxCSS value

​
Positioning

Use these attributes to create a fixed-position floating button:
AttributeDescriptionDefaultOptions
positionFixed position on the screenNonetop-left, top-right, middle-left, middle-right, bottom-left, bottom-right
vertical-offsetVertical offset from edge (pixels)25Number
horizontal-offsetHorizontal offset from edge (pixels)25Number

​
Examples

<givebutter-button
  campaign="YOUR_CAMPAIGN_CODE"
  label="Buy Tickets"
  background-color="#6366F1"
  border-radius="100"
  drop-shadow="true"
  icon="ticket"
></givebutter-button>

​
Troubleshooting

Button not appearing? Make sure you’ve installed the Widgets library on your page and that your campaign code is correct.
Color not working? Hex codes must include the # symbol (e.g., #FF8A00 not FF8A00).