Embed Widget - Techical Overview

A breakdown on how our widget embed code works.

Pete avatar
Written by Pete
Updated over a week ago

Technical Overview

While we've tried to make this embeddable code simple, there are some advanced configuration options you can take advantage of.

Let's take a look at the snippet that you are adding and break it apart a bit. Here is the full snippet:

<!-- Start of 4Giving Code -->
<script>
(function (window, document) {
if (window.fourGiving) {
console.warn('4Giving Widget already added, you only need to add this code once.');
}
else {
(window.fourGiving = {}), (m = ['init', 'action']);
window.fourGiving._c = [];
m.forEach(function (me){
(window.fourGiving[me] = function () {
window.fourGiving._c.push([me, arguments]);
})
});
var elt = document.createElement('script');
elt.type = 'text/javascript';
elt.async = true;
elt.src = 'https://beta-js.4giving.com/shim-v2.js';
var before = document.getElementsByTagName('script')[0];
before.parentNode.insertBefore(elt, before);
}
fourGiving.init('staging');
fourGiving.action({"action":"_i","publicAccessCode":"6687","containerId":"zql4k","themeColor":"#5FAF85"});
})(window, document, undefined);
</script>
<div class="giving-embed" data-giving-embed-id="zql4k">
<a href="https://preview.4giving.com/6687" target="_blank">Donate Now</a>
</div>
<!-- End of 4Giving Code -->

There are two main parts here. The javascript code that generates the actions and the html code that draws the sections on your page.

HTML Code:

<div class="giving-embed" data-giving-embed-id="zql4k">
<a href="https://preview.4giving.com/6687" target="_blank">Donate Now</a>
</div>

and the Javascript Code:

<!-- Start of 4Giving Code -->
<script>
(function (window, document) {
if (window.fourGiving) {
console.warn('4Giving Widget already added, you only need to add this code once.');
}
else {
(window.fourGiving = {}), (m = ['init', 'action']);
window.fourGiving._c = [];
m.forEach(function (me){
(window.fourGiving[me] = function () {
window.fourGiving._c.push([me, arguments]);
})
});
var elt = document.createElement('script');
elt.type = 'text/javascript';
elt.async = true;
elt.src = 'https://beta-js.4giving.com/shim-v2.js';
var before = document.getElementsByTagName('script')[0];
before.parentNode.insertBefore(elt, before);
}
fourGiving.init('staging');
fourGiving.action({"action":"_i","publicAccessCode":"6687","containerId":"zql4k","themeColor":"#5FAF85"});
})(window, document, undefined);
</script>

Inside the Javascript Code there is a section which is responsible for initiating either your Button or Widget described in the Accepting donations on your web site article.

fourGiving.action({"action":"_i","publicAccessCode":"6687","containerId":"zql4k","themeColor":"#5FAF85"});

This is a specific action that tells the widget "Hey there, I would like to create a widget at element: zq14k with campaign id 6687 and use the theme color #5FAF85.

Here is a full list of items you can configure this action with:

Action Key

Value

Description

action

_i or _b

Embed or Button

publicAccessCode

6687

Campaign Identifier

containerId

zq14k

Random string of characters to uniquely identify element.

themeColor

#5FAF85

Hex Code to help colorize your embed.

disableCover

true or false

The embedded option has this configuration to remove the starting cover and go straight to the donation option.

customButton

true or false

You have the option of using your own button to initiate the Button modal.

customLabel

Donate

A label for the button that 4giving can generate for your modal.

You can place multiple widgets on your page. The above options will generate for you based on the Get Code button inside of your campaign dashboard page.

If you would like to use your own button to initiate the modal, you can check out our article on that here!

Did this answer your question?