# HTML Script Demo This HTML template showcases the following features: 1. **XCE Script Integration:** The template seamlessly integrates the XCE script into the page's `` 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 an offer from the XCE platform and configure currency formatting. Upon successful offer retrieval, the template stores the offer 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 offer 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! ### HTML Examples Currently we have a script configured with two different elements: Travel demo and Ticketing demo. Each required their own specific body request. Copy the desired HTML snippet bellow and paste on your sandbox for testing. {% hint style="info" %} Difference between snippets are: `offer_request` data and the element names: `xce-travel-demo` and `xce-ticket-demo` . {% endhint %} {% hint style="warning" %} **These are Demo scripts.** `xce-travel-demo` , `xce-ticket-demo` and the `offer_request` only work for Demo scripts. Partner scripts would have their own elements with different names as well as expect different request body. {% endhint %} {% tabs fullWidth="false" %} {% tab title="Travel" %} ### Travel: Comprehensive protection Offer This is an example of what you should be seeing:
XCE Travel Demo
{% code overflow="wrap" lineNumbers="true" fullWidth="false" %} ```html XCE TRAVEL DEMO

Hello World!

This is an XCover Elements Travel demo.

Before selecting an option, click on the following "Checkout" CTA to trigger the element error state

``` {% endcode %} {% endtab %} {% tab title="Ticketing" %} ### Ticketing: Event ticket protection Offer This is an example of what you should be seeing:
XCE Ticketing Demo
{% code overflow="wrap" lineNumbers="true" fullWidth="false" %} ```html XCE TICKET DEMO

Hello World!

This is an XCover Elements Ticket demo.

Before selecting an option, click on the following "Checkout" CTA to trigger the element error state

``` {% endcode %} {% endtab %} {% endtabs %}