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

<!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

1. The Haven Kit script loads haven.min.js, haven.min.css, and calls haven.init() with your feed credentials.
2. Your code polls until haven.ready() returns true.
3. haven.config() sets global options and creates the directory and calendar plugin instances.
4. .directory.init() configures the directory module.
5. .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:

• Directory guide
• Full Directory example

Next steps

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