Button
Embed a popup donation button on your site. Customize the colors, positioning, and more.
Installing the Widgets library
If you haven't already, Install the Widgets library.
Widget
Once you've installed the Widgets library, you can embed a form anywhere on your website. To get started, visit your Givebutter Dashboard and select the campaign you're looking to embed. Then visit the Sharing tab and select Widgets in the sidebar. Copy the code as it appears in the dashboard and place it on your site:
<givebutter-widget id="{YOUR_WIDGET_ID}"></givebutter-widget>
Manual Embed
If you want to manually embed many donation forms, you could use the <givebutter-button></givebutter-button> HTML tag instead. Simply pass the options as below:
<givebutter-button campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-button>
Configuration Options
You can apply the following configuration options as attributes on your button element:
| Attribute | Description | Default | Type |
|---|---|---|---|
| label | Text shown in the button | Donate | String |
| labelColor | Text & Icon Color | # FFFFFF | Hex Color Code |
| backgroundColor | Background color of the button | # FF8A00 | Hex Color Code |
| dropShadow | Show a dropshadow under the button | true | Boolean |
| borderRadius | Border Radius (Used to create rounded corners) | 100 | Number |
| borderColor | Color of the border | (Empty string) | Hex Color Code |
| borderWidth | Width of the border | 0 | Number |
Updated 10 months ago