What are Web Components?

Rachael Norris
Rachael Norris
  • Updated

In this article, we’ll take you through the basics of what Web Components are and what they can be used for. We’ll also take a closer look at considerations around using this integration tool.

Before starting you can get an overview of web integrations by taking a look at the article Introduction to Website Integrations.


Introduction to Web Components

Web Components are customisable blocks that can be added on your website to complement your online booking journey. They contain pre-built functionality to dynamically display information and perform specific functions such as different asks and calls to action

Web Components can be added anywhere on your website by your web developer. The same Web Component can be used on your website multiple times and different Web Components can be used in combination with each other and with other tools. 

We have created a number of Web Components and made these available to make it easy for your web developer to add certain Spektrix API functionality to your website.

Your web developer can then customise these elements to fit your website by applying text, images and other styling content. 

Everything that is needed, including the code and full documentation, for your Web Developer to be able to add Web Components to your website can be found on our Integrations Portal.


Web Components Considerations

There are some considerations to make when choosing Web Components as your integration tool.

What's possible with Web Components...

  • Web Components are a time efficient solution because they are quicker to implement than the API, whilst still offering more flexibility than iframes. 
  • Using Web Components is the only way to show Basket/Cart Summary alongside log in status in the navigation bar.

What's not possible with Web Components...

  • Functionality is limited to Adding Merchandise, Memberships, Gift Vouchers or Donations to the Basket/Cart - you cannot use a Web Component to browse Events or Instances.


What can you do with Web Components?

Web Components can provide an enhanced customer experience in two ways:

  • Allow customers to purchase Merchandise, Gift Vouchers, Memberships and make Donations.
  • Example use cases can include:

    • Adding Web Components on a standalone page to create something like a Merchandise shop page or a Support Us page for making donations. 
    • Combining Donations and Membership Web Components to provide the option for both single and recurring Donations on the same page.
    • Upsell on your basket page - this can be either as part of a custom basket that uses the API or next to an embedded iframe.
  • Provide information to customers about their login status and the count of items and value in their basket.


Further Reading

Now that you understand a little more about how Web Components work, next, take a look at our article on Configuring Web Components.

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

  • What is the API?
  • What are iFrames?

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

Created with Balsamiq.