Integrate with Spektrix

Integrate with Spektrix

  • Guides
  • Support
  • Iframe Content

›Iframes

Overview

  • Introduction
  • Web Integrations Quick Start
  • Custom Domains
  • Website Admin
  • Images
  • System Email Authentication
  • Glossary

Iframes

  • Iframe List
  • Resizing the Iframes
  • Express Checkout Flow
  • Filtering Iframes
  • Styling
  • Culture / Language
  • Iframe Loading Trigger
  • Iframe Content Tool

API

  • Overview
  • Filtering Events
  • Seat Status and Availability
  • Adding Items to the Basket
  • API Sign Up Form
  • Customer Information
  • Custom Baskets
  • Potential Discount
  • Priority Booking
  • Guide for Ticket Agents
  • API Authentication
  • Custom Payments
  • EPOS Integration
  • Third Parties

Web Components

  • Web Components

Tracking

  • Data Layer
  • Tracking Iframes

Tools

  • Sign Up Form
  • View from Seat
  • Machine-readable Spektrix Data

Legacy

  • API v.1
  • API v.2
  • Basket and Logged in Widget

Listening For An Iframe To Load

Message Event

Every time an embedded Spektrix iframe loads, it will fire two messages to the parent page Window, each triggering a message event. The messages' data property will include some information on the basket, customer, login status, and other items. You can use the appearance of the messages to understand that a Spektrix iframe has loaded or to access basket contents.

To get started with this, you can add an Event Listener to the parent page set to listen for the event:

window.addEventListener('message', (event) => {console.log(event.data)})

This snippet is intended to simply help familiarise yourself with functionality – to do more, you’ll need to supply your own callback.

Everytime an iframe completes loading, it will log basketContents with corresponding items and as well as information on whether or not there is a current customer logged in on the client:

basketContents:{
    "totalDiscount":0.0,
    "total":0.0,
    "customer":null,
    "tickets":[],
    "membershipSubscriptions":[],
    "giftVouchers":[],
    "merchandiseItems":[],
    "donations":[],
    "hash":"NotLoggedIn"
}
basketHash:NotLoggedIn

If you log in the customer and add some tickets, for example, you’ll get responses which looks like:

basketContents:{
    "totalDiscount":25.00,
    "total":26.00,
    "customer":{
        "age":null,
        "billingAddress":null,
        "deliveryAddress":null,
        "birthDate":null,
        "email":"john.doe@spektrix.com",
        "firstName":"John",
        "lastName":"Doe",
        "mobile":"",
        "name":"John Doe",
        "phone":"",
        "title":"",
        "passwordSet":true,
        "giftAidDeclarationRequired":false,
        "id":"I-8H22-22HV",
        "creditBalance":0.0},
    "tickets":[{
        "band":{
            "id":"201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL"},
            "event":{"id":"401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH"},
            "instance":{"id":"426ANNBCVJQNPTKKTSTRDGGPTTRSJBLSG"},
            "planId":"401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH",
            "seatName":"",
            "planName":"Demo Theatre General Admission",
            "type":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},
            "ticketType":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},
            "ticketType_Comment":"Will be removed in a future API release - Use 'Type' instead",
            "delivered":false,
            "barcode":null,
            "offer":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},
            "discount":25.00,
            "price":25.00,
            "total":26.00,
            "id":"159ABTGJHMDHKQTHHPJTQNLKMCJMRSBMG"}],
    "membershipSubscriptions":[],
    "giftVouchers":[],
    "merchandiseItems":[],
    "donations":[],
    "hash":"l8IJqdp0pk"
}
basketHash:l8IJqdp0pk

Use Cases

The primary reason that this feature was implemented is that the messages are used to trigger our library of basket-summary and login-status web components in order to instantly reflect changes in the session made by the customer without the parent page reloading.

That said, there is no limit on using this message as you see fit – whether to pass information to other parts of the parent page or to listen for an iframe fully loading. A couple of use cases would be if you are building a progress indicator that indicates a completed step every time an iframe loads or custom upsells without needing to wait on additional API calls.

← Culture / LanguageIframe Content Tool →
  • Message Event
  • Use Cases
More
Get In TouchTerms of UseBrand GuidelinesGitHub
Spektrix
Copyright © 2023 Spektrix