HTML demo

This is a demo of an integration and should not be copy/pasted for a production integration.

This HTML template showcases the following features:

  1. XCE Script Integration: The template seamlessly integrates the XCE script into the page's <head> section, establishing a connection with the XCE platform.

  2. 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.

  3. 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:

<!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;
      }
      .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 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>
      <xce-gitbook-demo></xce-gitbook-demo>
    </main>
    <script>
      window.signalLayer = window.signalLayer || [];

      let responseData;
      let selectedOption;
      
      const orderTotal = 200;
      
      const requestData = {
        customer_language: 'en-US',
        customer_country: 'GT',
        currency: 'GTQ',
        partner_subsidiary: 'eventix',
        request: [
          {
            event_datetime: '2024-11-15T21:23:07.412Z',
            policy_start_date: '2024-10-14T21:23:07.412Z',
            number_of_tickets: 1,
            total_tickets_price: 69.69,
            event_name: "Bombay Velvet - Bollywood Summer Jam '24",
            event_country: 'GT',
            tickets: [
              {
                price: 35,
              },
            ],
            event_location: 'Metro City Concert Club',
            policy_type: 'event_ticket_protection_demo',
            total_event_cost: 200,
          },
        ],
      };

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

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

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

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

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

PreviousConfirm cancellation previewNextRequests & Responses

Last updated