Code Samples

One Click

£10 was added! You are now being forwarded to your basket...

An error occurred

<spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" donation-amount="10" forward-to="https://system.spektrix.com/iframedemo/website/basket2.aspx">
    <button data-submit-donation>Donate £10</button>
    <div data-success-container style="display: none;">£10 was added! You are now being forwarded to your basket...</div>
    <div data-fail-container style="display: none;">An error occurred</div>
</spektrix-donate>

Basic Example

Amount to Donate £

Donation added!

An error occurred

<spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL">
    <span>Amount to Donate £</span>
    <span class="amount" data-display-donation-amount></span>
    <br>
    <input type="text" data-custom-donation-input>

    <button data-submit-donation>Donate</button>
    <div data-success-container style="display: none;">Donation added!</div>
    <div data-fail-container style="display: none;">An error occurred</div>
</spektrix-donate>

Predefined

Amount to Donate £0

Insert success content/markup here

Insert failure content/markup here

<spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL">
    <span>Amount to Donate £</span>
    <span data-display-donation-amount>0</span>
    <br>
    <button data-donate-amount="10">£10</button>
    <button data-donate-amount="20">£20</button>
    <button data-donate-amount="30">£30</button>

    <div>
        <button data-submit-donation>Donate</button>
        <button data-clear-donation>Clear Donation</button>
    </div>
    <div data-success-container style="display: none;">Insert success content/markup here</div>
    <div data-fail-container style="display: none;">Insert failure content/markup here</div>
</spektrix-donate>

Cumulative

Amount to Donate £0

Insert success content/markup here

Insert failure content/markup here

<spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" cumulative-mode>
        <span>Amount to Donate £</span>
        <span class="amount" data-display-donation-amount>0</span>
        <br>
        <button data-donate-amount="10">£10</button>
        <button data-donate-amount="20">£20</button>
        <button data-donate-amount="30">£30</button>
        <div>
            <button data-submit-donation>Donate</button>
            <button data-clear-donation>Clear Donation</button>
        </div>
        <div data-success-container style="display: none;">Insert success content/markup here</div>
        <div data-fail-container style="display: none;">Insert failure content/markup here</div>
</spektrix-donate>

Cumulative with images

Donation Amount: £

Insert success content/markup here

Something went wrong, please contact the box office.

<spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" cumulative-mode>
    <div style="...parentContainerStyle...">
        <div style="...sectionButtonStyle...">
            <span style="font-weight: bold;">Donation Amount: £
                <span data-display-donation-amount></span>
            </span>
        </div>
        <div class="row row--no-gutters">
            <div class="col col--6 col--offset-3">
                <img style="max-width: 33%;" class="food-item" src="/img/webComponents/donate/001-radish.svg" data-donate-amount="5" />
                <img style="max-width: 33%;" class="food-item" src="/img/webComponents/donate/002-bread.svg" data-donate-amount="10"/>
                <img style="max-width: 33%;" class="food-item" src="/img/webComponents/donate/003-roast-chicken.svg" data-donate-amount="20" />
            </div>
        </div>
        <div class="row row--no-gutters">
            <div class="col col--6 col--offset-3">
                <img style="max-width: 33%;" class="food-item" src="/img/webComponents/donate/004-cupcake.svg" data-donate-amount="49" />
                <img style="max-width: 33%;" class="food-item" src="/img/webComponents/donate/005-pie.svg" data-donate-amount="49" />
                <img style="max-width: 33%;" class="food-item" src="/img/webComponents/donate/006-apple.svg" data-donate-amount="49" />
            </div>
        </div>
        <div style="...sectionButtonStyle...">
            <button class="button button--sm button--primary" data-submit-donation>Donate</button>
            <button class="button button--sm button--secondary" data-clear-donation>Clear Donation</button>
        </div>
        <div class="my-4" data-success-container style="display: none;">Insert success content/markup here</div>
        <div class="my-4" data-fail-container style="display: none;">Something went wrong, please contact the box office.</div>
    </div>
</spektrix-donate>

Basic Slider

Make an excuse

• No Money
• :(

£0

Insert success content/markup here

Insert failure content/markup here

<spektrix-donate id="steps" client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL">
    <style>
        .step {
            display: none;
        }

        .visible {
            display: block;
        }

        .step h3 {
            color: black;
        }
    </style>
    <div>
        <div id="blurb">
            <div class="step visible" data-amount="0">
                <h3>Make an excuse</h3>
                <ul>
                    <li>No Money</li>
                    <li>:(</li>
                </ul>
            </div>
            <div class="step" data-amount="25">
                <h3>Make a spark</h3>
                <ul>
                    <li>Glass of water</li>
                    <li>Crust of bread</li>
                </ul>
            </div>
            <div class="step" data-amount="50">
                <h3>Make a fire</h3>
                <ul>
                    <li>Instant Ramen</li>
                    <li>Coke</li>
                </ul>
            </div>
            <div class="step" data-amount="75">
                <h3>Make a firework</h3>
                <ul>
                    <li>Burger</li>
                    <li>Good Beer</li>
                </ul>
            </div>
            <div class="step" data-amount="100">
                <h3>Make a forest fire</h3>
                <ul>
                    <li>Steak</li>
                    <li>Wine</li>
                </ul>
            </div>
        </div>
        <div id="donate-area">
            <div id="amount">£
                <span id="amountlabel" class="amountlabel" data-display-donation-amount>0</span>
            </div>
        </div>
        <div id="slider-box">
            <input id="slider" type="range" list="tickmarks" step="25" value="0" data-custom-donation-input>
            <datalist id="tickmarks">
                <option value="0">
                <option value="25">
                <option value="50">
                <option value="75">
                <option value="100">
            </datalist>
            <button data-submit-donation>DONATE</button>
        </div>
        <div id="donate-button">
        </div>
    </div>
    <div data-success-container style="display: none;">Insert success content/markup here</div>
    <div data-fail-container style="display: none;">Insert failure content/markup here</div>
    <script>
        var amountLabel = document.getElementById('amountlabel');
        var blurb = document.getElementById('blurb');
        var steps = blurb.querySelectorAll('.step');
        var step = document.getElementById('steps');
        var slider = document.getElementById('slider');

        function setVisibility(value) {
            for (let step of steps) {
                let attributeValue = step.getAttribute('data-amount');
                if (attributeValue === value) {
                    step.className = 'step visible';
                } else {
                    step.className = 'step';
                }
            }
        }

        slider.addEventListener('input', function () {
            setVisibility(slider.value);
            step._updateDonationTotal(slider.value);
        })
    </script>
</spektrix-donate>

Select your fund

Amount to Donate £0

Select Fund: Youth Arts ProgramsGeneral OperatingProductions

Insert success content/markup here

Insert failure content/markup here

<spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" id="selectfundcomponent">
    <span>Amount to Donate £</span>
    <span data-display-donation-amount>0</span>
    <br>
    <button data-donate-amount="10">£10</button>
    <button data-donate-amount="20">£20</button>
    <button data-donate-amount="30">£30</button>

    <select name="fundid">
        <option value="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" selected>Youth Arts</option> 
        <option value="3ATSRVPTNMNJHBVSHDTHQMJJKSJQLDGQQ" >Save our roof</option>
        <option value="3003AMMCQHKLGNBKBQRCJNHRDHSRCRVBJ">Productions</option>
    </select>

    <div>
        <button data-submit-donation>Donate</button>
        <button data-clear-donation>Clear Donation</button>
    </div>
    <div data-success-container style="display: none;">Insert success content/markup here</div>
    <div data-fail-container style="display: none;">Insert failure content/markup here</div>

    <script>
        var selectFundComponent = document.getElementById('selectfundcomponent');
        var fundSelector = document.querySelector('[name="fundid"]');

        fundSelector.addEventListener('input', function () {
        selectFundComponent.fundId = fundSelector.options[fundSelector.selectedIndex].value;
        })
    </script>
</spektrix-donate>

Tribute Types and Recognition Names

Amount: £0

Recognition Name:

I would like this donation to be anonymous.

Dedication/Tribute:
In honour ofIn memory of

Insert success content/markup here

Something went wrong, please contact the box office.

<div style="margin-bottom: 4rem;">
    <spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" id="tributetypecomponent">
        <div style="...parentContainerStyle...">
            <div style="...sectionButtonStyle...">
                <span style="font-weight: bold;">Amount: £
                    <span data-display-donation-amount>0</span>
                </span>
            </div>
            <div style="...sectionButtonStyle...">
                <input type="text" placeholder="Custom Amount" data-custom-donation-input />
            </div>
            <div style="...sectionButtonStyle...">
                <button class="button button--sm button--primary" data-donate-amount="10">£10</button>
                <button class="button button--sm button--primary" data-donate-amount="20">£20</button>
                <button class="button button--sm button--primary" data-donate-amount="30">£30</button>
            </div>
            <div style="...sectionButtonStyle...">
                <label for="recognitionName">Recognition Name: </label>
                <input id="recognitionName" placeholder="Recognition Name" type="text" data-recognition-name />
            </div>
            <div style="...sectionButtonStyle...">
                <input id="isAnonymous" type="checkbox" oninput="handleAnonymous(event)" data-is-anonymous />
                <label for="isAnonymous">I would like this donation to be anonymous.</label>
            </div>
            <div style="...sectionButtonStyle...">
                <label for="tributeType">Dedication/Tribute: </label>
                <br />
                <select name="tributeType" defaultValue="3ATSRVPTNMNJHBVSHDTHQMJJKSJQLDGQQ" data-tribute-type>
                    <option value="3ATSRVPTNMNJHBVSHDTHQMJJKSJQLDGQQ">In honour of</option>
                    <option value="4ACBGKTGSSSRMNPHTKMSMPGGVGMDGPCMB">In memory of</option>
                </select>
                <input placeholder="Tribute Name" type="text" data-tribute-name />
            </div>
            <div style="...sectionButtonStyle...">
                <button class="button button--sm button--primary" data-submit-donation>Donate</button>
                <button class="button button--sm button--secondary" data-clear-donation>Clear Donation</button>
            </div>
            <div data-success-container style="display: none;">Insert success content/markup here</div>
            <div data-fail-container style="display: none;">Something went wrong, please contact the box office.</div>
        </div>
    </spektrix-donate>
</div>

<script>
    var isAnonymous = false;
    var recognitionName = '';

    function handleAnonymous(e) {
        var recognitionInput = document.querySelector('#recognitionName');
        if (e.target.checked) {
            recognitionName = recognitionInput.value;
            recognitionInput.value = '';
            recognitionInput.placeholder = 'Anonymous';
            recognitionInput.setAttribute('disabled', 'true');
        } else {
            recognitionInput.removeAttribute('disabled');
            recognitionInput.placeholder = 'Recognition Name';
            recognitionInput.value = recognitionName;
        }
        isAnonymous = e.target.checked;
    }
</script>