Skip to content
English
More support Support Portal Sign in
Contact us
  • There are no suggestions because the search field is empty.

Getting Started V.1

This section will guide you through using the Embedded Web Directory on an existing HTML page. By following this default settings will be applied and getting up and running is a breeze. To customise the Embedded Web Directory further please see the Styles API and Settings API sections of the documentation, where you will also find details of the default settings.

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wayfinder JavaScript Embedded Web Directory: Demo</title>
</head>
<body>
<main>
    <h1>Hello, world!</h1>

    <wf-app apiKey="xxxxxxxx-xxxxxxxxxxxxx"></wf-app>
</main>

<script src="https://cdn.wayfinder.acquiredigital.com/live/js-api/three.min.js"></script>
<script src="https://cdn.wayfinder.acquiredigital.com/live/js-api/wayfinderv2.js"></script>
<script type="module" src="https://cdn.wayfinder.acquiredigital.com/live/js-api/wfv2.js"></script>
</body>
</html>
 

Load the Wayfinder Web Map V2.0 API

<script src="https://cdn.wayfinder.acquiredigital.com/live/js-api/three.min.js"></script>
<script src="https://cdn.wayfinder.acquiredigital.com/live/js-api/wayfinderv2.js"></script>
 

Firstly we need to load a couple of dependencies that are required. We load both scripts from the Acquire Digital CDN to ensure the correct versions are used.

The Embedded Web Directory JavaScript uses the Wayfinder Web Map V2.0 API to load destination data. The three.js JavaScript 3D library is also a dependency.

Load the Embedded Web Directory JavaScript

<script type="module" src="https://cdn.wayfinder.acquiredigital.com/live/js-api/wfv2.js"></script>
 

Now that we have taken care of the dependencies, we can load the Embedded Web Directory JavaScript, again from the Acquire Digital CDN. Ensure that this script is declared as a module by including type="module" in the <script> element.

Add the Embedded Web Directory Web Component to Your HTML

<wf-app id="webDirectory" apiKey="xxxxxxxx-xxxxxxxxxxxxx"></wf-app>
 

The Embedded Web Directory Component <wf-app></wf-app> can now be added in your existing HTML page, in whatever location you choose. The component has a max width of 1080px and as such is intended to be a main section of the page.

 

Provide your API Key

There is only one required attribute that you must pass to the web component: apiKey . You will also need to give it the following ID: webDirectory to ensure that scrollTo functionality works.

This is the same API Key that is used for the Wayfinder web map. Please contact Acquire Digital for access.

Fig 1. An example of the Embedded Web Directory web component with default settings.