Code Samples

Basic Example

Amount to Donate £

<spektrix-donate client-name="demo2" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ">
    <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;">Insert success content/markup here</div>
    <div data-fail-container style="display: none;">Insert failure content/markup here</div>
</spektrix-donate>

Predefined

Amount to Donate £0

<spektrix-donate client-name="demo2" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ">
    <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

<spektrix-donate client-name="demo2" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ" cumulative-mode>
        <span>Amount to Donate £</span>
        <span class="amount" data-display-donation-amount>0</span>
        <br>
        <button class="btn button-primary" data-donate-amount="10">£10</button>
        <button class="btn button-primary" data-donate-amount="20">£20</button>
        <button class="btn button-primary" 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>

Basic Slider

Make an excuse

No Money
:(

£0

<spektrix-donate id="steps" client-name="demo2" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ">
    <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 forrest 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" 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:

<spektrix-donate client-name="demo2" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ" 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="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ" 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>

Basic Example​

Predefined​

Cumulative​

Basic Slider​

Make an excuse

Select your fund​

Basic Example

Predefined

Cumulative

Basic Slider

Select your fund