Post-purchase quick upsell

The Spektrix Quick Upsell managed component lets customers select supplementary events for an event instance and complete payment on a single page. It is designed for journeys that start from a personalised email link, but customers can also enter their details on the page.

The component:

1. Displays the supplementary events available for the configured event instance.
2. Adds the customer's selections to their basket.
3. Displays an order summary and collects any required customer or billing details.
4. Lets the customer complete payment using Spektrix Payments.

Customers who are already logged in use their Spektrix account details and can select or add a saved billing address when one is required. Logged-out customers use the contact details supplied when the component is initialised, or enter their details if any are missing.

Initialising the component

Add an empty element to the page where you want the component to appear. The element must have a unique id.

<div id="quick-upsell"></div>

Import and call initManagedComponent, passing the element ID, the required Spektrix configuration, and any known contact details:

import { initManagedComponent } from "spektrix-quick-upsell-managed-component";

await initManagedComponent({
    containerId: "quick-upsell",
    clientName: "thetheatre",
    apiHost: "https://tickets.thetheatre.org",
    instanceId: "<instanceId>",
    topLevelDomain: "thetheatre.org",
    firstName: "Alex",
    lastName: "Smith",
    email: "alex.smith@example.com",
});

The component does not read contact details directly from the page URL. If a personalised link includes customer details, the host page must read and decode them before passing firstName, lastName, and email to initManagedComponent.

Required configuration

Parameter	Type	Description
containerId	string	The id of the HTML element where the component will be rendered.
clientName	string	The client's Spektrix system name. For example, thetheatre.
apiHost	string	The Spektrix API host. For example, https://tickets.thetheatre.org.
instanceId	string	The ID of the event instance whose supplementary events will be offered.
topLevelDomain	string	The top-level domain of the website hosting the component. For example, thetheatre.org. This value is passed to the Spektrix Payments component.

initManagedComponent returns a Promise<void> that resolves when initialisation is complete.

Optional configuration

Parameter	Type	Default	Description
culture	string	The client's configured culture, then en-GB	The locale used to format currency values.
commissionNoteText	string	None	A pre-formatted transaction fee message displayed at the top of the supplementary events step. For example, Plus a fee of £5.00 per order.
firstName	string	None	The logged-out customer's first name.
lastName	string	None	The logged-out customer's last name.
email	string	None	The logged-out customer's email address.

Handling completed orders

When checkout completes successfully, the component dispatches an ORDER_CONFIRMED event on window. The component does not redirect the customer, so listen for this event to navigate to an order confirmation page.

window.addEventListener("ORDER_CONFIRMED", (event) => {
    const { orderId } = event.detail;
    const query = orderId ? `?orderId=${encodeURIComponent(orderId)}` : "";
    window.location.assign(`/order-confirmation${query}`);
});

Styling

The component uses the following CSS custom properties from the page where it is embedded:

Property	Description
--custom-body-font-name	Font family used for body text and form controls.
--custom-header-font-name	Font family used for headings.
--custom-button-background-color	Colour used for primary actions and links.

Set these properties on the component container or one of its ancestors:

#quick-upsell {
    --custom-body-font-name: Arial, sans-serif;
    --custom-header-font-name: Georgia, serif;
    --custom-button-background-color: #6b2d84;
}