Pure HTML Integrations

The most powerfull feature of Clerk.js is the ability to embed any Clerk.io result into any website using nothing but HTML!

The easiest way to explain how is just with a example. The following code lists the store's 3 most popular products:

<!-- List of products -->
<ul class="product-list" id="clerk-list">
  <!-- Clerk.js Block to be rendered -->
  <script
    class="clerk"
    type="text/x-clerk-template"
    data-target="#clerk-list"
    data-api="recommendations/popular"
    data-limit="3"
    data-labels='["Product Page Popular"]'>
    
    <!-- Template used for each product -->
    <li class="product">
      <a href="{{ url }}">
        <img src="{{ image }}" title="{{ alt }}" />
        <h2>{{ name }}</h2>
        <div class="price">{{ money price }}</div>
        <button>Buy Now</button>
      </a>
    </li>
          
  </script>
</ul>

<!-- List of products -->
<ul class="product-list">
  <!-- Clerk.js Block to be rendered -->
  
    <!-- Template used for each product -->
    <li class="product">
      <a href="http://your-store.com/red-lightsaber">
        <img src="http://your-store.com/images/red-lightsaber.jpg" alt="Red Lightsaber" />
        <h2>Red Lightsaber</h2>
        <div class="price">1,495.95</div>
        <button>Buy Now</button>
      </a>
    </li>
  
    <!-- Template used for each product -->
    <li class="product">
      <a href="http://your-store.com/death-star-deluxe">
        <img src="http://your-store.com/images/death-star-deluxe.jpg" alt="Death Star Deluxe" />
        <h2>Death Star Deluxe</h2>
        <div class="price">999,999,999,999.95</div>
        <button>Buy Now</button>
      </a>
    </li>
  
    <!-- Template used for each product -->
    <li class="product">
      <a href="http://your-store.com/tie-fighter">
        <img src="http://your-store.com/images/tie-fighter.jpg" alt="Tie Fighter" />
        <h2>Tie Fighter</h2>
        <div class="price">195,000.95</div>
        <button>Buy Now</button>
      </a>
    </li>
  
</ul>

Thats all there is to it! No code! Easy!

All the magic above is initiated by the script element having the class clerk. Immediately after being loaded, Clerk.js will scan the page source for any element with the class clerk (it doesn't have to be a script element - script elements just ensure that the browser doesn't render the template).

Then it reads the data- attributes of the element. Note that if the attribute value is not valid JSON it will just be treated as a string. An attribute can be a special attribute and will thus have the effect described in the list of special attributes below. All other data- attributes will be sent to Clerk.io as request parameters.

When Clerk.io responds, the resulting products will be rendered using the template in the block body and be injected in to the DOM where the block is placed.

In this process, click-tracking is automatically added to each product.

In case of an error, a report will be made to the console with all error details.

Below is the list of special attributes. All other attributes will be sent as request parameters.

Attribute	Behaviour
`data-api`	The API endpoint to be requested.
`data-template`	CSS selector for the template to be used (to avoid duplicating templates). If not present, the element body will be used. If the starting character is `@`, the template will be loaded from Clerk.io using the remainder of the value as the template id.
`data-target`	CSS selector for where the products should be rendered. If not present, the products will be added to the DOM where the current element is.
`data-after-call`	Name of the global function to handle the `after-call` event. See Events for more details.
`data-before-render`	Name of the global function to handle the `before-render` event. See Events for more details.
`data-after-render`	Name of the global function to handle the `after-render` event. See Events for more details.
`data-on-error`	Name of the global function to handle the `after-on-error` event. See Events for more details.