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!