renderCatalog

Parameters

el: HTMLElement
The DOM node that the catalog should be rendered into.
opts : object
The options for rendering the catalog as specified in Configuring xkit-catalog.js

Returns

Catalog

renderCatalog Renders the full Xkit catalog into a specific DOM node. Using renderCatalog requires a bit more surrounding code to determine the right node and if it is available, but provides more flexibility. It is especially useful when rendering Xkit into a Javascript-controlled page.

<html>
  <head>
		<script src="https://<your-slug>.xkit.co/xkit-catalog.js"></script>
    // ... assumes jQuery
  </head>
  <body>
    <div id="my-special-node"></div>
    <script>
      $(() => {
        xkit.renderCatalog($("#my-special-node").get(0), {
          title: "My Integrations"
        })
      })
  </body>
</html>

To update the state of the catalog, for example if a button clicked outside should change the current URL, use the returned pushHistory function.

const catalog = xkit.renderCatalog($("#my-special-node").get(0), {
  title: "My Integrations"
})

$("#back-to-connectors").click(() => catalog.pushHistory("/connectors"))