Skip to content

Seat selection

Easily offer seat selection using the Dynamic Upsell widget. To display the seat options, follow these steps:

  1. Follow the widget implementation instructions.
  2. Use the showUpsell function with the container, display, and allowProducts parameters. For example:

      container: document.getElementById("upsell-container"),
      display: "card",
      allowProducts: ["seats"]
    The function parameters mean the following:

    • container: The element ID of the container you want to display the widget within.
    • display: the format to display the available products.
      • card: (Default) Displays a card with an action button that allows customers to "opt-in" to the product.
      • embedded: Displays the products embedded in your container upon page load.
      • modal: Displays the products in a pop-up "modal" overlaying your page. The modal opens as soon as ancillaries are loaded into the widget.
    • allowProducts: The type of product to display. You can only use one type of product per function.

Seat display options

Through the showUpsell function you can select how to display the available seats. Gordian provides the following display types:

  • card: The card display type adds a seat selection box with a "select your seats" button. The seat map opens up as a model when selected. Seat card display

  • embedded: The embedded display type adds a seat map directly onto your page, open and displayed from the start. Seat embedded display

  • modal: The modal display type opens up the seat map as a popup window as soon as it is ready. Seat modal display

You have now setup the Gordian SDK to display seats with the Dynamic Upsell widget anywhere in your existing customer journey.


Refer to the Dynamic Upsell widget documentation for guidance on integrating the basket and fulfillment.