The widget displays as a button within an existing page. When the button is clicked the donation process opens in a popup window within the current page. This is demonstrated below.
Including the widget on a page is a two step process
The widget is a script that can be included with a standard script tag.
<script src=""></script>
Including the widget requires one piece of information: a charity ID. This is provided by the mytennights team.
The donate button can be placed anywhere a normal HTML button can be placed. No special configuration is necessary.
<mtn-button charity="YOUR-CHARITY-ID"></mtn-button>
If you want the widget to open automatically without any button being clicked, then you can add a small javascript snippet to achieve this.
<script src=""></script>
<script defer>openMyTenNights('YOUR-CHARITY-ID')</script>
Normally the widget can't be used to complete checkout until the campaign opens. Even then real card details are required. It is possible to change the widget to use a sandbox mode instead. This allows the use of test credit card numbers and real payments will not be taken.
To test, update the <script> tag from Step 1 of the Quick Start, replacing mytennights.com with staging.mytennights.shamaazi.io. The other elements do not need to be updated. Remember to change this back once testing has been completed.
<script src=""></script>
Information about test card numbers can be found in the Stripe testing documentation.
If the provided <mtn-button> is not sufficient, it is possible to create your own controls that open the widget. These can be styled and themed however you wish.
Import the script, and call the openMyTenNights('YOUR-CHARITY-ID') function.
<script src=""></script>
<button onclick="openMyTenNights('YOUR-CHARITY-ID')">MY BUTTON</button>
You don't have to do anything, as long as the Google Analytics / Google Tag Manager Data Layer snippet is present on your page events will automatically be pushed.
Events look like the following, with amount in cents/pennies:
{
event: 'donation',
currency: 'GBP', // (AUD / GBP / CAD / USD / ZAR)
amount: 33355,
product: 'mytennights'
}