Loading Haven

Haven can be loaded via the Haven Kit (recommended) or as standalone assets. Both approaches expose the same global window.haven object.

Haven Kit (recommended)

The Kit is a single script that injects the library, stylesheet, and your feed credentials:

html

<script src="https://kit.havendestinations.ca/YOUR_KIT_ID.js"></script>

Advantages:

One script tag — no manual credential management
CSS and JS versions stay in sync
Ideal for CMS embeds and iframe deployments

The Kit automatically calls haven.init(). Your integration code only needs to wait for haven.ready() before calling haven.config().

Standalone assets

If you host the built files yourself (from haven-js/dist/):

html

<link rel="stylesheet" href="https://YOUR_CDN/haven.min.css" />
<script src="https://YOUR_CDN/haven.min.js"></script>

Then call haven.init() explicitly with your credentials:

javascript

haven.init({
  havenFeedId: 'YOUR_FEED_ID',
  havenDomain: 'https://havenapi.havendestinations.ca/',
  mapboxApiKey: 'YOUR_MAPBOX_KEY',
  defaultSelector: '#haven-app',
}, function () {
  // ready callback (optional — you can also poll haven.ready())
});

Stylesheet required

As of v2.0.1, styles are in a separate haven.min.css file. Always load the stylesheet before the script.

Dependency load order

Load external dependencies before Haven when they are enabled:

1. Mapbox GL CSS + JS     (if useMapBox: true)
2. Font Awesome kit       (if useFontAwesome: true)
3. Haven Kit OR haven.min.css + haven.min.js
4. Theme CSS              (optional, after Haven)
5. Your page styles
6. Your initialization script

Mapbox must load first

When maps are enabled, Mapbox GL must be on the page before haven.init() runs. Haven checks for Mapbox during initialization (HavenChecks.checkForMapBox). If Mapbox is missing, map features will not work.

Example head section

html

<head>
  <!-- 1. Mapbox (if using maps) -->
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>

  <!-- 2. Font Awesome (if using icons) -->
  <script src="https://kit.fontawesome.com/YOUR_FA_KIT.js" crossorigin="anonymous"></script>

  <!-- 3. Haven Kit -->
  <script src="https://kit.havendestinations.ca/YOUR_KIT_ID.js"></script>

  <!-- 4. Theme CSS -->
  <link rel="stylesheet" href="/haven-theme--default.css" />
  <link rel="stylesheet" href="/haven-theme--directory.css" />
</head>

Theme CSS

Load theme files after Haven:

html

<link rel="stylesheet" href="/haven-theme--default.css" />
<link rel="stylesheet" href="/haven-theme--directory.css" />
<!-- or -->
<link rel="stylesheet" href="/haven-theme--calendar.css" />

See Theming for details on each file.

Render target

Add a container element where Haven will render:

html

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

For layouts with external filters or breadcrumbs, add additional containers — see DOM Containers.

Detecting readiness

Haven loads asynchronously. Poll until ready:

javascript

var poll = setInterval(function () {
  if (window.haven && haven.ready && haven.ready()) {
    clearInterval(poll);
    // safe to call haven.config()
  }
}, 10);

Bundle sizes (reference)

Asset	Minified	Gzip
`haven.min.js`	~206 KB	~51 KB
`haven.min.css`	~32 KB	~6 KB

Sizes vary by release.

Initialization — configure and render your first module.

Loading Haven ​

Haven Kit (recommended) ​

Standalone assets ​

Dependency load order ​

Example head section ​

Theme CSS ​

Render target ​

Detecting readiness ​

Bundle sizes (reference) ​

Next ​

Loading Haven

Haven Kit (recommended)

Standalone assets

Dependency load order

Example head section

Theme CSS

Render target

Detecting readiness

Bundle sizes (reference)

Next