Code Samples

Basic Example

Join our bronze membership programme.

Autorenew?

Insert success content/markup here

Insert failure content/markup here

<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="demo4" membership-id="7811AHVQTSPCBNLQKKQPBRJBQGNMNPTPB" forward-to="https://system.spektrix.com/demo4/website/Basket2.aspx">
        <p>Join our bronze membership programme.</p>
        <button  data-submit-membership>Buy Bronze 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>
</div>

Choose your membership level

Autorenew?

Insert success content/markup here

Insert failure content/markup here

• 10% discount

Autorenew?

Insert success content/markup here

Insert failure content/markup here

• 10% discount
• Access to the members bar

Autorenew?

Insert success content/markup here

Insert failure content/markup here

• 10% discount
• Access to the members bar
• Annual members' dinner
• Call from the director

<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="demo4" membership-id="6211AMDMRPBRJPVSHPQLPNSRPPKBHBTHT" forward-to="https://system.spektrix.com/demo4/website/Basket2.aspx">
        <button class="btn btn-dark mx-2" data-submit-membership>Buy Bronze 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="demo4" membership-id="6410ADGSLQHSNTLQCCBGCLVSMJHVNSTHK" forward-to="https://system.spektrix.com/demo4/website/Basket2.aspx">
        <button class="btn btn-dark mx-2" data-submit-membership>Buy Silver 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>
    <br />
    <spektrix-memberships client-name="demo4" membership-id="6210ALSQJVNMLNTKDLVHPMHQTQBNLVPGD" forward-to="https://system.spektrix.com/demo4/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>
        <li>Access to the members bar</li>
        <li>Annual members' dinner</li>
        <li>Call from the director</li>
    </ul>

Donate to Membership

Amount: £0

Insert success content/markup here

Insert failure content/markup here

<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="demo2" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ" donation-amount="10" forward-to="https://system.spektrix.com/demo2/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="demo4" membership-id="7811AHVQTSPCBNLQKKQPBRJBQGNMNPTPB" forward-to="https://system.spektrix.com/demo4/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 = '6211AMDMRPBRJPVSHPQLPNSRPPKBHBTHT';
        } else {
            donateToMembershipsComponent.style.display = 'block';
            donateToMembershipsComponent.membershipId = '6410ADGSLQHSNTLQCCBGCLVSMJHVNSTHK';
        }
        
        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?

Insert success content/markup here

Insert failure content/markup here

<spektrix-memberships client-name="demo4" membership-id="6211AMDMRPBRJPVSHPQLPNSRPPKBHBTHT" 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://system.spektrix.com/demo4/website/ChooseSeats.aspx?EventInstanceId=42634" frameborder="0" style="width: 100%; min-height: 1000px;" data-memb-iframe></iframe>`;

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