There are three parameters that you can use to customize your HTML giving widget. 

  1. data-action: Change the name of the giving button on the form (default is "Give")
  2. data-giving-to: Force the form to a specific giving type (for example, "Missions Trip")
  3. data-amount:Force a specific amount (for example, "150" for $150 or "125.99" for $125.99)

TIP: these also must be lowercase to work on your site.

TIP: Be sure that your website theme or template allows custom HTML/CSS/JavaScript to be sure there are no errors when embedding this code.

The Button Title 

  1. Grab your full code which will look like this:

<button class="tithely-give-btn" style="background-color: #00DB72;font-family: inherit;font-weight: bold;font-size: 19px; padding: 15px 70px; border-radius: 4px; cursor: pointer; background-image: none; color: white; text-shadow: none; display: inline-block; float: none; border: none;" data-church-id="355177">Give</button>

<script src="https://tithe.ly/widget/v3/give.js?3"></script>

<script>

var tw = create_tithely_widget();

</script>

    2. Towards the bottom of the code between data-church-id=”355177” and >Give</button> you will be adding all the parameters starting with the button title on the giving page. Adding data-action=”Support Missions”. 

This line of code will look like this:

data-church-ID=”355177” data-action=”Support Missions”>Give</button>

TIP: If you would like to test this yourself before adding to your website try heading to https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml_basic and paste your complete button code and click ‘Run’

Allocating Funds:

We do this by adding data-giving-to= and your desired giving fund. This gets added in order behind the data-action=”Support Missions”:

data-church-ID=”355177” data-action=”Support Missions” data-giving-to=”Missions Trip”>Give</button>

TIP: note that spaces are not an issue in the custom code, you do not need to worry about this.

Giving Amount:

This is done by adding data-amount=100. Here you can either place ‘100’ or ‘100.00’ also note this is the only time you will not add the quotation marks around the variable. This will look like.

data-church-ID=”355177” data-action=”Support Missions” data-giving-to=”Missions Trip” data-amount=100>Give</button>

Button Name:

The last area you can edit is the button name that will display on your website before the button is clicked. The default is set to Give which you can see between >< you can simply edit this to any other word(s) you would like. 

Let’s change it to “Donate”:

data-church-ID=”355177” data-action=”Support Missions” data-giving-to=”Missions Trip” data-amount=100>Donate</button>

Your complete code will now look just like this: 

The only difference will be the Church ID number after data-church-id= and the different parameter names you have chosen:

<button class="tithely-give-btn" style="background-color: #00DB72;font-family: inherit;font-weight: bold;font-size: 19px; padding: 15px 70px; border-radius: 4px; cursor: pointer; background-image: none; color: white; text-shadow: none; display: inline-block; float: none; border: none;" data-church-id="355177" data-action="Support Missions"data-giving-to="Missions Fund" data-amount=100>Donate</button>

<script src="https://tithe.ly/widget/v3/give.js?3"></script>

<script>

var tw = create_tithely_widget();

</script>

Adding Color to Your Giving Button:

Locate where it says: style="background-color: #00DB72 in your custom code. You will be editing where it currently will say #00DB72.

This is called a hex code. To find your desired colors hex code you can simply search for this in a search engine and then place that code, including the pound symbol, where the current code is located (#00DB72). This will automatically update when you place on your site.

This is what your current code will look like.

<button class="tithely-give-btn" style="background-color: #00DB72;font-family: inherit;font-weight: bold;font-size: 19px; padding: 15px 70px; border-radius: 4px; cursor: pointer; background-image: none; color: white; text-shadow: none; display: inline-block; float: none; border: none;" data-church-id="233640">Give</button>
<script src="https://tithe.ly/widget/v3/give.js?3"></script>
<script>
var tw = create_tithely_widget();
</script>

Centering your giving button: 

This is how to center your giving widget.

Start by location you custom code. 

Then locate where you code says display: inline-block;

<button class="tithely-give-btn" style="background-color: #00DB72;font-family: inherit;font-weight: bold;font-size: 19px; padding: 15px 70px; border-radius: 4px; cursor: pointer; background-image: none; color: white; text-shadow: none; display: inline-block; float: none; border: none;" data-church-id="233640">Give</button>
<script src="https://tithe.ly/widget/v3/give.js?3"></script>
<script>
var tw = create_tithely_widget();
</script>

You will then remove the words inline-block; and replace with display: block; margin-left: auto; margin-right: auto; width: 50%;

Your new custom code with a centered button will look like below.

<button class="tithely-give-btn" style="background-color: #00DB72;font-family: inherit;font-weight: bold;font-size: 19px; padding: 15px 70px; border-radius: 4px; cursor: pointer; background-image: none; color: white; text-shadow: none; display: block; margin-left: auto; margin-right: auto; width: 50%; float: none; border: none;" data-church-id="233640">Give</button>
<script src="https://tithe.ly/widget/v3/give.js?3"></script>
<script>
var tw = create_tithely_widget();
</script>

If you are placing this widget in a small area on your site or when you place the widget the words are not centered, you will need to change the percentage that is currently set at 50% to 100%.

Here is a helpful video that will walk you through this process:

Please send any further questions you have to support@tithe.ly :)

Did this answer your question?