Editing Your Giving Button

Following the steps in this article allow for you to customize the HTML to change the verbiage, look, and feel of the Simple Giving Widget Button to fit your unique needs of your organization. 

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.

Edit Giving Button

1. Login to your Tithely account.
2. Select Giving from the left-hand menu.
3. Click the Back to Tithely 1.0 button. 
4. Under the 1.0 space click on Giving and choose Website Giving on the left hand side. 
5. Scroll down to the Simple Giving Widget Section and copy the code in the box below.
   The code will look something 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="5180329">Give</button>
   <script src="https://tithe.ly/widget/v3/give.js?3"></script>
   <script>
   var tw = create_tithely_widget();
   </script>

If you would like to test the button/code for 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’

Change Button Title 

The button title is what appears on the bottom of the giving form when making a gift: 

1. Towards the bottom of the code you just copied above between data-church-id=”XXXXXX” and >Give</button> you will be adding data-action=”Button Name”
2. You will add data-action=”Support Missions” to the html code and then customize the verbiage of the button. 
   For example, 
   
   • data-action=”Support Missions” (this would update the button to read Support Missions $X.XX)
   • data-action=”Donate”(this would update the button to read Donate $X.XX)

This line of code should look like this:

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

Add Fund / Giving Type

This update to the code will force the form to default to a specific giving type / fund you select. To find you fund names visit Fund Management or Managing Your Giving Types in 1.0.

1. Towards the bottom of the code you just copied above between data-church-id=”XXXXXX” and >Give</button> you will be adding data-giving-to= ”Fund Name”. This should be added in order behind the data-action=”Button Name”
2. You will add data-giving-to= ”Fund Name” to the html code to customize the fund givers are giving to. 
   For example, 
   
   • data-giving-to= ”Building Fund" (this would update for people to give to the building fund)
   • data-giving-to= ”Missions" (this would update for people to give to the missions fund)

This line of code should look like this:

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

Giving Amount

You can designate a specific amount that you would like this button to be locked in with. Let's say you want all payments to be $25 you can lock that number into the code.  You do not need to add this part to the code if you would like donors to be able to choose the amount they'd like to give. 

1. Towards the bottom of the html code you just copied above between data-church-id=”XXXXXX” and >Give</button> you will be adding data-amount=100. Note this is the only time you will not add the quotation marks around the variable. 
2. You will add data-giving-to= ”Fund Name” to the html code to customize the fund givers are giving to. For example, 
   
   • data-giving-to= ”Building Fund" (this would update for people to give to the building fund)
   • data-giving-to= ”Missions" (this would update for people to give to the missions fund)

This line of code should look like this:

data-church-ID=”XXXXXX” data-action=”Button Name” data-giving-to=”Fund Name” 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.

1. At the end of the html code you should see >Give</button>. 
2. Simply edit Give with any word that you would like. For example, 
   • >Donate</button> (This would change the button to read donate) 
   • >Sponsor a Youth</button> (This would change the button to Sponsor a Youth) 

Your complete code (assuming you have added each option) will now look something 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="XXXXX" data-action="Button Name"data-giving-to="Fund Name" data-amount=100>Donate</button>
<script src="https://tithe.ly/widget/v3/give.js?3"></script>
<script>
var tw = create_tithely_widget();
</script>

Change Color of Your Giving Button

Locate where it says: style="background-color: #00DB72 in your html code. You will be editing the number #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 where the current code is located (#00DB72). This will automatically update when you place on your site.

Center Your Giving Button

This is how to center your giving widget. 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%.