Embed Widget - Using your own button | 4giving Fundraising: Help

So you've walked through Accept Donations on Your Web Site and you're now wanting to use your own button to initiate the overlay!

Here is the overlay we're talking about:

By default, 4giving will generate that "Donate" button that you see in the top right corner for you to be placed wherever you like in your code. This button initiates the dialog. However we recognize that at times, individuals want to be able to use their own button, image or link to do so.

Step 1:

Go to your campaigns page and find the campaign you wish to create the modal for and click on the Manage action.

From here you will see your campaign's configuration options.

Step 2:

Select the Sharing tab to dive get the button configuration code.

Step 3:

Select the Donation Embed type of "Overlay" which will result in you seeing a Donate button in your donation embed like this:

Step 4:

Click the "Get Code" button in the lower left of the Donation Embed box, you should then click into the ode box or "Copy to Code" button and the code will be copied to your clipboard. It looks something like this:

<!-- 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":"_b","publicAccessCode":"13B8","containerId":"8byo9t","themeColor":"#5FAF85","buttonLabel":"Donate"});
})(window, document, undefined);
</script>
<a class="giving-donate-button" href="https://preview.4giving.com/13B8" target="_blank" data-giving-button-id='8byo9t'>Donate</a>
<!-- End of 4Giving Code -->

For additional information on what this means, you can check out the Technical Overview

Step 5:

Find the button or element on your existing website you wish to have toggle the website. For example, here is my button:

<button class='my-fantastic--button'>Donate to Rescue Mother Indian</button>

Find the data-giving-button-id from your 4giving code snippet and add the entire attribute to your own clickable target to produce this:

<button class='my-fantastic--button' data-giving-button-id='8byo9t'>Hey There!</button>

The addition of data-giving-button-id='8byo9t' has been added.

Hint: The data attribute can be found in the HTML Code snippet mentioned by the Technical Overview.

Step 6:

Paste in the 4giving code into your site. You will then need to remove the HTML code snippet AND add an additional parameter to the action. Here's the full example that you received from the Get Code block from 4giving:

<!-- 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":"_b","publicAccessCode":"13B8","containerId":"8byo9t","themeColor":"#5FAF85","buttonLabel":"Donate", customButton: true});
})(window, document, undefined);
</script>
<!-- End of 4Giving Code -->

We're asking you remove this:

<a class="giving-donate-button" href="https://preview.4giving.com/13B8" target="_blank" data-giving-button-id='8byo9t'>Donate</a>

Then adjust the action near the bottom of the code snippet from this:

fourGiving.action({"action":"_b","publicAccessCode":"13B8","containerId":"8byo9t","themeColor":"#5FAF85","buttonLabel":"Donate"});

to this

fourGiving.action({"action":"_b","publicAccessCode":"13B8","containerId":"8byo9t","themeColor":"#5FAF85","buttonLabel":"Donate", customButton: true});

Note the addition of the custom button attribute.

Save your changes and you should be up and running with your custom button opening a modal!