Code Samples

tip

Due to the way in which Memberships work in Spektrix, you cannot have more than one of the same type of Membership in a Basket session at once. The examples on this page all use the same set of Memberships on the same Spektrix system, meaning that if you have already tried using one Component, others might fail due to the pre-existing Membership. In order to continue testing the others out, you'll need to delete them and empty your Basket out which can be done here.

Basic Example

Join our Gold Membership programme.

Autorenew?

<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="iframedemo" membership-id="401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx">
        <p>Join our Gold Mmbership programme.</p>
        <button  data-submit-membership>$100/yr</button>
        <label for="autorenew">
            <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
        </label>
        <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-memberships>
</div>

Monthly Auto-Renewing Donation

Donate $10 Monthly!

<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="iframedemo" membership-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx">
        <p>Donate $10 Monthly!</p>
        <button  data-submit-membership>$10/month</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-memberships>
</div>

Choose your membership level

Autorenew?

10% discount

Autorenew?

10% discount
Access to the members bar

<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="iframedemo" membership-id="401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx">
        <button class="btn btn-dark mx-2" data-submit-membership>Buy Gold Membership</button>
        <label for="autorenew">
            <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
        </label>
        <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-memberships>  
    <br />
    <ul> 
        <li>10% discount</li>
    </ul>
    <br />
    <spektrix-memberships client-name="iframedemo" membership-id="6410ADGSLQHSNTLQCCBGCLVSMJHVNSTHK" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx">
        <button class="btn btn-dark mx-2" data-submit-membership>Buy Platinum Membership</button>
        <label for="autorenew">
            <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
        </label>
        <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-memberships>  
    <br />
    <ul> 
        <li>10% discount</li>
        <li>Access to the members bar</li>  
    </ul>

Donate to Membership

Amount: £0

<div id="slider-box">
    <h4>Amount: £<span data-item-value>0</span></h4>
    <input id="sliderinput" type="range"  step="1" value="0" min="0" max="200" style="width: 100%">
    <span class="my-4" data-cta style="display: none;">For just £<span data-cta-amount></span> more, you could join our membership programme!</span>
</div>
<spektrix-donate style="margin-top: 2rem" client-name="iframedemo" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ" donation-amount="10" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/basket2.aspx" data-donate-component>
    <button class="btn btn-dark mx-2" data-submit-donation>Donate</button>
    <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;">Insert failure content/markup here</div>
</spektrix-donate>
<spektrix-memberships client-name="iframedemo" membership-id="7811AHVQTSPCBNLQKKQPBRJBQGNMNPTPB" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx" data-donate-to-memberships-component style="display: none">
    <button class="btn btn-dark mx-2" data-submit-membership>Buy Membership</button>
    <label for="autorenew">
        <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
    </label>
    <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-memberships>

<script>
    var sliderInput = document.getElementById('sliderinput');
    var itemValue = document.querySelector('[data-item-value]');
    var donateComponent = document.querySelector('[data-donate-component]');
    var donateToMembershipsComponent = document.querySelector('[data-donate-to-memberships-component]');
    var cta = document.querySelector('[data-cta]')
    var ctaAmount = document.querySelector('[data-cta-amount]')

    sliderInput.addEventListener('input', function () {
        if (sliderInput.value < 100) {
            sliderInput.step = 1;
            donateToMembershipsComponent.style.display = 'none';
            donateComponent.style.display = 'block';
            donateComponent.donationAmount = sliderInput.value;
        } else if (sliderInput.value >= 100) {
            sliderInput.step = 100;
            donateComponent.style.display = 'none';
            donateToMembershipsComponent.style.display = 'block';
            cta.style.display = 'none';
            donateToMembershipsComponent.membershipId = '401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH';
        } else {
            donateToMembershipsComponent.style.display = 'block';
            donateToMembershipsComponent.membershipId = '601APNNMRMBJQQPBSCNQGQHGKKCRPSSGN';
        }
        
        if (sliderInput.value > 50 && sliderInput.value < 100) {
            cta.style.display = 'block';
            ctaAmount.textContent = 100 - sliderInput.value;
        }

        itemValue.textContent = sliderInput.value;
        console.log('sliderInput.value', sliderInput.value)
    });
</script>

Instant Priority Booking

Autorenew?

<spektrix-memberships client-name="iframedemo" membership-id="601APNNMRMBJQQPBSCNQGQHGKKCRPSSGN" data-memb-to-priority-booking>
    <button class="btn btn-dark mx-2" data-submit-membership>Add Membership and buy event</button>
    <label for="autorenew">
        <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
    </label>
    <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-memberships>
<script>
var membToPriorityBookingComponent = document.querySelector('[data-memb-to-priority-booking]');
var priorityBookingContainer = document.querySelector('[data-priority-booking-container]');
var seatingPlanDiv = document.createElement('div');
seatingPlanDiv.innerHTML =`<iframe src="https://iframetool.integrate.spektrix.com/iframedemo/website/ChooseSeats.aspx?EventInstanceId=3006" frameborder="0" style="width: 100%; min-height: 1000px;" data-memb-iframe></iframe>`;

membToPriorityBookingComponent.addEventListener('success', function (e) {
    priorityBookingContainer.appendChild(seatingPlanDiv);
})
</script>

Basic Example​

Monthly Auto-Renewing Donation​

Choose your membership level​

Donate to Membership​

Instant Priority Booking​

Basic Example

Monthly Auto-Renewing Donation

Choose your membership level

Donate to Membership

Instant Priority Booking