Configuring Web Components

Rachael Norris
Rachael Norris
  • Updated

In this article, we’ll include information about which Web Components are available and how to configure them. We’ll also link out to guides on our Integration Portal that will inform your web developer on how to implement them. 

Before getting started with Web Components, take a look at our article:

There are two types of Web Components that we will cover in this article:

  • Web Components which provide information to customers about their login status and the count of items and value in their Basket/Cart.

If you’re keen to get started we’ve included links to the relevant guides on the Integration Portal. These are technical guides, aimed at the person in your organisation who’s going to work most closely with your web developer to get this set up.

 

Web Components and your CMS

To learn more about configuring Web Components in conjunction with your CMS, take a look at Ways to integrate your website with CMS.

 

Donate

The Donate Web Component allows a Customer to add a Donation amount directly to their Basket/Cart from anywhere on your website.

It is also possible to collect:

  • Recognition name
  • Whether the donor wishes to remain anonymous
  • Tribute name
  • Tribute options ‘In honour of’ and ‘In memory of’

As Web Components give you flexibility in user journey and design, there are various ways to configure your Donate Web Component.

Some simpler examples include:

  • A one-click Donate button 

  • A selection of Donation amounts to choose from

  • A slider that increases the Donation amount in intervals 

You can also choose to add one or more of the following options of extra functionality:

  • Collect Donations cumulatively. This lets the customer donate multiple amounts to a Fund in a single transaction. This may work particularly well for fundraising campaigns where you make a direct relation between Donation and what it could provide, such as a capital Campaign
  • Allow the Donor to select which Fund to donate to. This can be most impactful when you're running multiple Campaigns which may appeal to different segments of your audience.
  • Forward the Customer to any page, including the checkout, once they have added the donation to their Basket/Cart. You can create a quick Donation path by bypassing the Basket/Cart and taking them straight to check out. This can also be used to create a ‘pay what you can’ approach, where the customer selects the Donation amount and then proceeds to choose their cost-free tickets. 

To get started with implementing this Web Component, we’ve supplied everything your web developer will need on our Integrate Portal: Quick Start for Web Developers (Donations).

 

Merchandise

The Merchandise Web Component lets a Customer add Merchandise directly to their Basket/Cart from anywhere on your website.

As Web Components give you flexibility in user journey and design, there are various ways to configure your Merchandise Web Component.

  • Present a predefined quantity. This can be dynamic based on other items in the Customer’s Basket/Cart. For example, if a Customer has two Tickets in their Basket/Cart, the Merchandise Web Component can offer two vouchers for drinks.
  • Give the option to increase or decrease the quantity incrementally. For example, the Customer can press the “+” and “-” buttons to add more or fewer items.
  • Enable a free text option to give your Customers the ability to enter the exact quantity.

  • Present SKU/product variations, for example Small, Medium, Large options for clothes.

Additional functionality may include:

  • Creating a bundle of two or more different pieces of Merchandise. For example, offering a combination like a T-shirt and a CD which can be added to the Basket/Cart with a single click. 

  • Upselling by forwarding the Customer to another page. For example, when an item of Merchandise is added to the Basket/Cart, you can then forward the Customer to the Ticket purchase path.

To get started with implementing this Web Component, we’ve supplied everything your web developer will need on our Integrate Portal: Quick Start for Web Developers (Merchandise).

 

Memberships

The Memberships Web Component lets a Customer add a Membership directly to the Basket/Cart from anywhere on your website.

As Web Components give you flexibility in user journey and design, there are various ways to configure your Memberships Web Component.

You can:

  • Show a single or multiple Memberships on the same page. You can choose how they are displayed on the page, and any additional information you’d like to include, such as details about Membership benefits. 
  • Let Customer's Memberships automatically renew. 

You can also choose to add one or more of the following options of extra functionality:

  • Dynamically convert a Donor to a Member by indicating what the value of the membership would get them.
  • Add a Membership Web Component to your Basket/Cart page to upsell Memberships. You could also dynamically show potential savings or benefits on eligible orders.
  • Add a Membership to the Basket/Cart during priority booking and immediately redirect to your Events page.
  • Capture additional information, such as the name of the second Member for joint memberships. This can be achieved by implementing a Membership Web Component that also captures Order Attributes via the API. 
  • Combine with the Donations Web Component to collect one-off Donations and recurring Donations (auto renewable Memberships) on the same page. 

REMINDER: It is not possible to buy Gift Memberships via a Web Component. If you wish to present this as an option, you can use the Membership Web Component to purchase the non-gift Membership, and link out to the Gift Voucher / Gift Membership iframe to purchase the Gift Membership.

To get started with implementing this Web Component, we’ve supplied everything your web developer will need on our Integrate Portal: Quick Start for Web Developers (Memberships).

 

Gift Vouchers

The Gift Voucher Web Component lets a Customer add a Gift Voucher directly to their Basket/Cart from anywhere on your website.

Through the Gift Voucher Web Component, it is possible to collect:

  • Amount
  • Send date
  • To and From names
  • A message for the recipient 
  • Whether the email with the Gift Voucher goes to the recipient or the person purchasing the Gift Voucher

To get started with implementing this Web Component, we’ve supplied everything your web developer will need on our Integrate Portal: Quick Start for Web Developers (Gift Vouchers).

 

Login Status

The Login Status Web Component can be used to provide information to Customers about their login status and what’s in their Basket/Cart.

These Web Components can be added on your navigation bar to display up to date information wherever the Customer is on your website. 

When a Customer has logged in to their online account, you can also choose to display their name (first name, last name or both) and/or email address. You could use this to add a friendly welcome message such as “Hi {first name}”. 

To get started with implementing this Web Component, we’ve supplied everything your web developer will need on our Integrate Portal: Quick Start for Web Developers (Login Status).

 

Basket Summary

You can use the Basket Summary Web Component to display one or a combination of the following pieces of information. 

  • Number of Items in the Basket/Cart
  • Total value of the Basket/Cart
  • Total discount value in the Basket/Cart
  • The currency of the system 

This information is generated dynamically based on the current contents of a Customer’s Basket/Cart.

To get started with implementing this Web Component, we’ve supplied everything your web developer will need on our Integrate Portal: Quick Start for Web Developers (Basket Summary).

 

Further Reading

You can continue learning about web integrations in the Integrate your Website with Spektrix section of the Support Centre.

To learn more about the other integration tools available, take a look at:

  • What is the API?
  • What are iFrames?
  • What is Spektrix Link?