Quick Start

This page shows the smallest working Haven Directory embed. Copy it into an HTML file, replace the placeholders, and open it in a browser.

Minimal directory embed

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Directory</title>

  <!-- Haven Kit (loads library + credentials) -->
  <script src="https://kit.havendestinations.ca/YOUR_KIT_ID.js"></script>
</head>
<body>

  <div id="haven-app"></div>

  <script>
    (function () {
      var poll = setInterval(function () {
        if (window.haven && haven.ready && haven.ready()) {
          clearInterval(poll);

          haven.config({
            useMapBox: false,
            useFontAwesome: false,
          })
          .directory.init({
            selector: '#haven-app',
            options: {
              sort: 'name',
              cols: 2,
            },
          })
          .render();
        }
      }, 10);
    })();
  </script>

</body>
</html>

What happens

The Haven Kit script loads haven.min.js, haven.min.css, and calls haven.init() with your feed credentials.
Your code polls until haven.ready() returns true.
haven.config() sets global options and creates the directory and calendar plugin instances.
.directory.init() configures the directory module.
.render() fetches listings from the Haven API and renders them into #haven-app.

Placeholders to replace

Placeholder	Replace with
`YOUR_KIT_ID`	Your Haven Kit ID (e.g. `u64353316x`)

Add maps and filters

For a production-ready directory with map, search, and detail lightbox, see:

Next steps

Loading Haven — Kit vs standalone, dependency order
Initialization — haven.init(), haven.config(), and the fluent API
Directory guide — full configuration walkthrough

Quick Start ​

Minimal directory embed ​

What happens ​

Placeholders to replace ​