Renders the Catalog into the DOM


  1. elemId = "xkit-app"
    The HTML ID of the element into which the catalog should be rendered.



renderCatalogDefault is the most basic version of catalog rendering. It waits until the DOM is ready, finds the element into which it should be rendered, and then renders itself according to the configuration on the element itself.

This function is how the standalone Xkit Catalog works, and is recommended if you're rendering into a static HTML page (as opposed to a Javascript Single-Page app).

        <script src="https://<your-slug>"></script>
        <script>xkit.ready(function () { xkit.renderCatalogDefault() })</script>
    <div id="xkit-app"></div>


Configuring renderCatalogDefault is done by adding data- attributes to the #xkit-app HTML tag (or other ID you specified) you used to render the catalog.

For example, if you wanted to configure the token property, you would add a data-token attribute:

<div id="xkit-app" data-token="some-user-token"></div>

See Configuring xkit-catalog.js for a full list of available configurations