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

Settings API

The Embedded Web Directory allows for a number of customisation options as well as the Styles API. This section details the settings that are available and how to pass them to the component.

Overview

In addition to the required apiKey attribute the Embedded Web Directory web component accepts an optional settings attribute. This accepts a JavaScript object of various settings to customise the component's content. Details of the settings options are available in the Settings API Reference

Passing the Settings Attribute to the Component

The settings object can either be passed to the component in two ways.

  1. Pass the attribute directly on the component - if you use this approach, be sure to use single quote marks when passing the object.
<wf-app apiKey="xxxxxxxx-xxxxxxxxxxxxx" settings='{"showEmptyCategories": false}'></wf-app>
 
  1. By creating the settings object as a variable and then selecting the web component and setting the attribute using JavaScript. To use this approach give the Embedded Web Directory component a unique id:
<wf-app id="webDirectory" apiKey="xxxxxxxx-xxxxxxxxxxxxx"></wf-app>
 

and then include a script such as this:

<script>
  const settings = {
    "showEmptyCategories": false,
    // other settings
  };
  let webDirectory = document.getElementById('webDirectory');
  webDirectory.settings = settings;
</script>