# Element Display

Place a custom HTML element in the desired location in your HTML template. This is where the protection panel will be loaded by XCE.

<pre class="language-html"><code class="lang-html"><strong>&#x3C;!-- protection-offer example -->
</strong><strong>&#x3C;xce-protection-offer>&#x3C;/xce-protection-offer>
</strong></code></pre>

{% hint style="info" %}
The element name can change. The correct name will be provided to you during onboarding.
{% endhint %}

## Using custom attributes

XCE allows partners to use custom HTML attributes on the element to update the state such as UI, provide data for offer retrieval and more.\
\
**Custom attributes will be referenced in their specific integration guides.**

For example, in our protection-offer example we have the `selected` attribute that pre-selects one of the radio input options of the element.

{% hint style="warning" %}
The following custom attributes are just to showcase a scenario and might not be available on your integration.

Please refer to your CSE regarding the available custom attributes for your element.
{% endhint %}

<pre class="language-html"><code class="lang-html"><strong>&#x3C;!-- custom attributes example -->
</strong>&#x3C;!-- with 'yes protection' pre-selected -->
&#x3C;xce-protection-offer selected="accept">&#x3C;/xce-protection-offer>

&#x3C;!-- with 'no protection' pre-selected -->
&#x3C;xce-protection-offer selected="reject">&#x3C;/xce-protection-offer>
</code></pre>