Prerequisites

Before embedding Haven on your site, gather the credentials and optional dependencies listed below.

Required

Haven Kit URL

The recommended way to load Haven is via the Haven Kit — a single script tag that injects both the JavaScript library and your feed credentials:

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

Your Haven account manager will provide the kit URL (YOUR_KIT_ID is unique to your organization). The kit calls haven.init() automatically with your feed key, so you do not need to pass credentials manually.

Feed credentials (standalone only)

If you load Haven without the Kit, you need:

Setting	Description
havenFeedId	Your API key, sent as the haven-key request header
havenDomain	API base URL (default: https://havenapi.havendestinations.ca/)

haven.init({
  havenFeedId: 'YOUR_FEED_ID',
  havenDomain: 'https://havenapi.havendestinations.ca/',
});

Optional dependencies

Mapbox GL

Required when useMapBox: true (the default when Mapbox is detected on the page).

Load before the Haven script or before haven.init() runs:

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

You also need a Mapbox access token (pk....). Pass it via haven.init() when using standalone mode, or configure it in your Haven Kit settings.

Font Awesome

Required when useFontAwesome: true (the default when Font Awesome is detected).

<script src="https://kit.fontawesome.com/YOUR_FA_KIT.js" crossorigin="anonymous"></script>

Set useFontAwesome: false in haven.config() if you do not want icons in filters and search fields.

Theme CSS

Haven ships with optional companion stylesheets for layout and visual polish:

• haven-theme--default.css — shared base styles
• haven-theme--directory.css — directory grid layout
• haven-theme--calendar.css — calendar layouts

These are not required but strongly recommended for production embeds. See Theming.

Hosting requirements

Feature	Requirement
Basic embed	Any static file host or CMS page with a <script> tag
Path-based routing	Server rewrite rules (e.g. Apache .htaccess) to route clean URLs to your app shell
Custom templates	A publicly accessible URL hosting your Mustache template files

Checklist

• [ ] Haven Kit URL from your account manager
• [ ] A page with a render target (<div id="haven-app">)
• [ ] Mapbox token and scripts (if using maps)
• [ ] Font Awesome kit (if using filter icons)
• [ ] Theme CSS files (recommended)
• [ ] Custom template host URL (if overriding templates)

Next: Quick Start