HTML demo

This is a demo of an integration and should not be copy/pasted for a production integration. This integration uses our "Demo partner" and can be used to demonstrate XCE functionality for a partner.

This HTML template showcases the following features:

XCE Script Integration: The template seamlessly integrates the XCE script into the page's <head> section, establishing a connection with the XCE platform.
Standard Signal Utilization: The template effectively employs standard XCE signals, namely set and listen, to interact with the XCE platform.
1. set signal: The set signal is utilized to request a quote from the XCE platform, configure currency formatting and render the checkout order total. Upon successful quote retrieval, the template stores the quote response and element is rendered. In case of an error, it logs the error message to the developer console and element is hidden.
2. listen signal: The listen signal keeps track of the selected option and logs the selected option and in case the option selected was the 'Yes' option it also logs the previously stored quote response to the developer console.
Custom CTA for Error Handling: The template showcases a custom CTA button that programmatically updates the element state to an error state if no option was previously selected, highlighting the importance of making a selection before proceeding.

To utilize this template, copy and paste it into your IDE, save it as an .html file, and open it in your web browser. Don't forget to open your DevTools!

This is an example of what you should be seeing:

HTML Examples

Currently we have a script configured with two different elements. Each required their own specific body request.

Copy the desired HTML snippet bellow and paste on your sandbox for testing.

Difference between examples are: quote_request data and the elements xce-travel-demo and xce-ticket-demo .

Partner scripts wouldn't include the elements used in the examples, neither the quote_request would work as script was built exclusively for demo purposes.

Demo element xce-gitbook-demo has been deprecated. Please update to xce-travel-demo or xce-ticket-demo

Travel: Comprehensive policy

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700&family=Roboto&display=swap"
      rel="stylesheet"
    />
    <title>XCE DEMO</title>
    <script type="module" src="https://sandbox.xce.xcover.com/gitbook-demo/v2/xcover-elements.js" async></script>
    <style>
      html {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
      }
      main {
        padding: 12px;
      }
      .offer-container {
        border: 1px solid rgba(0, 0, 0, 0.2);
        padding: 16px;
        border-radius: 5px;
      }
      .button {
        display: inline-block;
        padding: 8px 16px;
        margin-bottom: 22px;
        font-size: 12px;
        color: white;
        background-color: #04aa6d;
        border: 2px solid #04aa6d;
        border-radius: 30px;
        text-transform: uppercase;
        text-align: center;
        transition-duration: 0.4s;
      }
      .button:hover {
        background-color: white;
        color: black;
      }
    </style>
  </head>

  <body>
    <main>
      <h1 id="header">Hello World!</h1>
      <p id="description">This is an XCover Elements Travel demo.</p>
      <p>Before selecting an option, click on the following "Checkout" CTA to trigger the element error state</p>
      <button class="button" onclick="onCheckout()">Checkout</button>
      <div class="offer-container">
        <xce-travel-demo></xce-travel-demo>
      </div>
    </main>
    <script>
      window.signalLayer = window.signalLayer || [];

      let responseData;
      let selectedOption;

      const orderTotal = 200;

      const requestData = {
        fast_quote: false,
        currency: 'AUD',
        source: 'xce',
        request: [
          {
            total_tickets_price: 344,
            policy_start_date: '2026-05-13T18:59:13.958Z',
            policy_end_date: '2026-05-19T18:59:13.958Z',
            departure_country: 'AU',
            destination_country: 'US',
            is_return: false,
            flights: [
              {
                legs: [
                  {
                    departure_datetime: '2025-09-19T18:59:13.958Z',
                    arrival_datetime: '2025-09-19T18:59:13.958Z',
                    flight_number: 'SK1530',
                    marketing_airline_iata_code: 'SK',
                    marketing_airline_icao_code: 'SAS',
                    operating_airline_iata_code: 'SK',
                    operating_airline_icao_code: 'SAS',
                    departure_airport: 'SYD',
                    arrival_airport: 'JFK',
                    departure_country: 'AU',
                    arrival_country: 'US',
                  },
                ],
                departure_datetime: '2025-09-19T18:59:13.958Z',
                arrival_datetime: '2025-09-19T18:59:13.958Z',
                departure_country: 'AU',
                departure_city: 'SYD',
                arrival_city: 'JFK',
              },
            ],
            number_of_children: 0,
            number_of_adults: 1,
            number_of_infants: 0,
            trip_start_date: '2026-05-19T19:03:36.671Z',
            trip_end_date: '2026-05-19T19:02:21.444Z',
            policy_type: 'comprehensive_travel_insurance',
          },
        ],
        customer_country: 'AU',
        customer_language: 'en',
      };

      const onSet = async (request) => {
        try {
          const res = await request;
          responseData = res;
        } catch (err) {
          console.error(err);
        }
      };

      const onChange = (args) => {
        if (args.selectedOption === 'comprehensive_travel_insurance') {
          console.log('Insurance selected: ', args);
        } else {
          console.log('No insurance selected: ', args);
        }
        selectedOption = args.selectedOption;
      };

      const onCheckout = () => {
        if (selectedOption) {
          console.log('Valid selection - Checking Out 🎉');
          alert('Valid selection - Checking Out 🎉');
          return;
        }
        console.log('No protection option selected - Block checkout');
        window.signalLayer.push({
          signal: 'update',
          element: 'xce-travel-demo',
          isError: true,
        });
      };

      window.signalLayer.push({
        signal: 'set',
        element: 'xce-travel-demo',
        data: {
          quote_request: requestData,
          order_total: orderTotal,
          currency_config: {
            trailingZeroDisplay: 'stripIfInteger',
            customOptions: {
              format: '$%v AUD',
            },
          },
        },
        onSet,
      });

      window.signalLayer.push({
        signal: 'listen',
        element: 'xce-travel-demo',
        onChange,
      });
    </script>
  </body>
</html>

Ticketing: Event ticket protection policy

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700&family=Roboto&display=swap"
      rel="stylesheet"
    />
    <title>XCE DEMO</title>
    <script type="module" src="https://sandbox.xce.xcover.com/gitbook-demo/v2/xcover-elements.js" async></script>
    <style>
      html {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
      }
      main {
        padding: 12px;
      }
      .offer-container {
        border: 1px solid rgba(0, 0, 0, 0.2);
        padding: 16px;
        border-radius: 5px;
      }
      .button {
        display: inline-block;
        padding: 8px 16px;
        margin-bottom: 8px;
        font-size: 12px;
        color: white;
        background-color: #04aa6d;
        border: 2px solid #04aa6d;
        border-radius: 30px;
        text-transform: uppercase;
        text-align: center;
        transition-duration: 0.4s;
      }
      .button:hover {
        background-color: white;
        color: black;
      }
    </style>
  </head>

  <body>
    <main>
      <h1 id="header">Hello World!</h1>
      <p id="description">This is an XCover Elements Ticket demo.</p>
      <p>Before selecting an option, click on the following "Checkout" CTA to trigger the element error state</p>
      <button class="button" onclick="onCheckout()">Checkout</button>
      <div class="offer-container">
        <xce-ticket-demo></xce-ticket-demo>
      </div>
    </main>
    <script>
      window.signalLayer = window.signalLayer || [];

      let responseData;
      let selectedOption;

      const orderTotal = 200;

      const requestData = {
        fast_quote: false,
        request: [
          {
            policy_type: 'event_ticket_protection_demo',
            policy_start_date: '2025-09-13T18:59:13.958Z',
            event_datetime: '2025-09-13T18:59:13.958Z',
            event_name: 'Event name',
            event_location: 'Location name',
            number_of_tickets: 2,
            tickets: [
              {
                price: 426,
              },
              {
                price: 426,
              },
            ],
            total_event_cost: 852,
            event_country: 'US',
          },
        ],
        partner_transaction_id: '434',
        currency: 'USD',
        customer_country: 'US',
        customer_region: 'NY',
        customer_postcode: '10036',
        customer_language: 'en-us',
        partner_metadata: {
          context_id: '346',
          event_id: '69123455',
        },
      };

      const onSet = async (request) => {
        try {
          const res = await request;
          responseData = res;
        } catch (err) {
          console.error(err);
        }
      };

      const onChange = (args) => {
        if (args.selectedOption === 'event_ticket_protection_demo') {
          console.log('Insurance selected: ', args);
        } else {
          console.log('No insurance selected: ', args);
        }
        selectedOption = args.selectedOption;
      };

      const onCheckout = () => {
        if (selectedOption) {
          console.log('Valid selection - Checking Out 🎉');
          alert('Valid selection - Checking Out 🎉');
          return;
        }
        console.log('No protection option selected - Block checkout');
        window.signalLayer.push({
          signal: 'update',
          element: 'xce-ticket-demo',
          isError: true,
        });
      };

      window.signalLayer.push({
        signal: 'set',
        element: 'xce-ticket-demo',
        data: {
          quote_request: requestData,
          order_total: orderTotal,
          currency_config: {
            trailingZeroDisplay: 'stripIfInteger',
            customOptions: {
              format: '%m%v USD',
            },
          },
        },
        onSet,
      });

      window.signalLayer.push({
        signal: 'listen',
        element: 'xce-ticket-demo',
        onChange,
      });
    </script>
  </body>
</html>

Last updated 4 months ago

hashtagHTML Examples

hashtagTravel: Comprehensive policy

hashtagTicketing: Event ticket protection policy

HTML Examples

Travel: Comprehensive policy

Ticketing: Event ticket protection policy