Widget Installation

Introduction

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.

Quick Start

Including the widget on a page is a two step process

1. Include the widget javascript

The widget is a script that can be included with a standard script tag.

<script src=""></script>

2. Add the button to your page

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>

How do I...

1. Open up the widget when the page is opened

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>

2. Test my widget installation

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.

3. Wire up my own controls

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>

4. Set up Google Analytics for donation events

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'
}