Coded Elements

🚧

Advanced Usage

If you're new to Elements, we recommend using Dynamic Elements through the Givebutter Dashboard.

Creating elements using HTML

Once you have the Elements library installed on your page, you can add elements directly to your page using HTML tags & attributes.

To create an Element using HTML, either create a new tag, or add the givebutter-element attribute to any existing tag (we recommend a DIV or SPAN, but any tag will work)

<div
  	givebutter-element="button"
	givebutter-campaign="Cmp1"
></div>

Any attribute prefixed with givebutter- will automatically be used as an option when creating an element. kebab-case-options will be converted to camelCaseOptions automatically.

Creating Elements using JavaScript

You can also create an Element using JavaScript. This can only be done after the onReady event has fired.

window.Givebutter(function(givebutter) { // onReady event listener
    // Find or create an existing  html element
    let container = document.getElementById('element-placeholder');
    givebutter.createElement(
        container,  // HtmlElement to replace
        "bubble", // Element type
        { // Element Options
           campaign: 'Cmp1,
           label: 'Donate'
        }
    );
});

🚧

Changing Element options (using JavaScript) after an element has been created is not officially supported. It's recommended to delete the element and recreate it to ensure your options take effect. If you have a situation where deleting and recreating an element is not feasible, please contact support and we can work with you to find a solution.

Global Options

Global options apply to all elements on the page created after the option has been set.

// Single Option
Givebutter('setOptions', key, value);

// Multiple options (Shallow merge)
Givebutter('setOptions', {key: value});

❗️

Shallow Copy

Options are set using Object.assign. This only create a shallow copy of objects. if they contain nested settings the nested objects will be replaced and not merged. (For instance, when using the bubble settings object to configure it directly)

Example:

Givebutter('setOptions', 'bubble', {'campaign': 'CMP1', 'label': 'Donate Now!' });
// options.bubble =  {'campaign': 'CMP1', 'label': 'Donate Now!' }


Givebutter('setOptions', 'bubble', {'visible': false} );
// options.bubble =  {'visible': false }

If you need to set nested options, you can specific multiple keys. The last parameter is always the value.

Givebutter('setOptions', 'bubble', {'campaign': 'CMP1', 'label': 'Donate Now!' });
// options.bubble =  {'campaign': 'CMP1', 'label': 'Donate Now!' }


Givebutter('setOptions', 'bubble', 'visible', 'false');
// options.bubble =  {'campaign': 'CMP1', 'label': 'Donate Now!', 'visible': false }

Multiple keys used to set options.analytics.googleAnalytics.enabled = false

// Multiple keys
Givebutter('setOptions', 'analytics', 'googleAnalytics', 'enabled', false);