Button Widget

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:

Visit your Givebutter Dashboard
Select your campaign and navigate to Sharing > Widgets
Choose Button as the widget type and customize the appearance
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>

<givebutter-button
  campaign="{YOUR_CAMPAIGN_CODE}"
  label="Support Our Mission"
  background-color="#FF6B6B"
  label-color="#FFFFFF"
  border-radius="8"
></givebutter-button>

<!-- Different campaigns on the same page -->
<givebutter-button campaign="general-fund" label="General Fund"></givebutter-button>

<givebutter-button
  campaign="scholarship-fund"
  label="Scholarships"
  background-color="#4ECDC4"
></givebutter-button>

Configuration Options

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

Required Attributes

Attribute	Description	Example
`campaign`	Your campaign code (from your dashboard)	`my-campaign`

Styling Attributes

Attribute	Description	Default	Type
`label`	Text displayed on the button	`Donate`	String
`hide-label`	Hide the label text (icon only)	`false`	Boolean
`label-color`	Color of the text and icon	`#FFFFFF`	Hex Color Code
`background-color`	Background color of the button	`#3366FF`	Hex Color Code
`border-color`	Color of the button border	None	Hex Color Code
`border-width`	Width of the border in pixels	`0`	Number
`border-radius`	Corner roundness (higher = more rounded)	`100`	Number
`drop-shadow`	Display a shadow beneath the button	`true`	Boolean
`icon`	Icon to display	`heart`	`heart`, `gift`, `giving_hands`, `ticket`, `none`
`icon-position`	Position of the icon	`left`	`left`, `right`
`type`	How the button opens the form	`modal`	`modal`, `link`
`max-width`	Maximum width of the modal	`560px`	CSS value

Positioning

Use these attributes to create a fixed-position floating button:

Attribute	Description	Default	Options
`position`	Fixed position on the screen	None	`top-left`, `top-right`, `middle-left`, `middle-right`, `bottom-left`, `bottom-right`
`vertical-offset`	Vertical offset from edge (pixels)	`16`	Number
`horizontal-offset`	Horizontal offset from edge (pixels)	`16`	Number

Examples

Rounded Button
Square Button
Outlined Button

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

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

<givebutter-button
  campaign="YOUR_CAMPAIGN_CODE"
  label="Become a Member"
  background-color="#FFFFFF"
  label-color="#059669"
  border-color="#059669"
  border-width="2"
  border-radius="8"
></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).

Introduction

Widget Types

Website Builders

Advanced

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Styling Attributes

Positioning

Examples

Troubleshooting

​Prerequisites

​Quick Setup

​Manual Setup

​Configuration Options

​Required Attributes

​Styling Attributes

​Positioning

​Examples

​Troubleshooting

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Styling Attributes

Positioning

Examples

Troubleshooting