Installation

If you haven't already, Install the Elements library.

Then, add the following HTML snippet on your page:

<div givebutter-element='button' givebutter-campaign='YourCampaignCode'></div>

Attaching to an existing button

The button elements supports several themes designed to match your websites design.

givebutter-theme="click-only" will create a button out of any existing HTML element. This can be used on any HTML element, such as buttons, links or images, and will show a donation form when clicked!

<button givebutter-element='button' givebutter-campaign='YourCampaignCode' givebutter-theme="click-only">Donate!</button>

There is also a text-only theme for dynamic elements that will keep your existing styles, but update the contents of the element with whatever label you pick in the dashboard. This allows you to add a dynamic button to your site that you can control through the Givebutter Dashboard.
When using the text-only theme only the campaign and label settings in the Dashboard will be used. (Color and other styling settings are not applied)

<button givebutter-element-id="1234" givebutter-theme="text-only">Donate!</button>

Configuration

You can configure how the button appears using the following attributes:

Attribute

Description

Default

Type

givebutter-label

Text shown in the button

Donate

String

givebutter-label-color

Text & Icon Color

#FFFFFF

Hex Color Code

givebutter-background-color

Background color of the button

#FF8A00

Hex Color Code

givebutter-icon

Icon to show in the button:
'heart' or 'none'

heart

String

givebutter-drop-shadow

Show a dropshadow under the button

true

Boolean

givebutter-border-radius

Border Radius (Used to create rounded corners)

100

Number

givebutter-border-color

Color of the border

(Empty string)

Hex Color Code

givebutter-border-width

Width of the border

0

Number

<span givebutter-element='button' givebutter-campaign='YourCampaignCode' givebutter-label="Donate to this years campaign"></span>

Did this page help you?