Each MetaLocator interface includes a unique Installation Code fragment. The installation code fragment is generated based on the type of Interface and can change based on interface settings.
This article discusses the structure of the installation code and alternative methods to installation.
Standard Installation Method
The standard method of installing MetaLocator is to copy and paste the provided Installation code into your Website's page editing tool exactly where you would like the locator to appear. This is a one-time operation. Changes to your MetaLocator Interface settings and data will be automatically reflected in the locator.
To install an interface, follow these steps:
Step 1. Obtain your Interface Installation Code by clicking Interfaces, then click the Install button to reveal the Interface Installation Code. An example installation code fragment is shown below:
<!-- MetaLocator.com Code START -->
<div data-metalocator="locator" data-metalocator-itemid="XXXXXXX"></div>
<script async language="javascript" src="https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid=XXXXXXX"></script>
<!-- MetaLocator.com Code END: Do not modify this code block. See TOS for details. -->
Copy the code to your computer's clipboard by clicking into the code area.
Step 2. Paste the code into your Website editor tool.
This video shows the standard installation process in Wordpress.
2-Part Installation Method
This tutorial describes how to install a MetaLocator interface in 2 separate parts, HTML and JavaScript . This method should only be used if you need to add the JavaScript and HTML separately.
Step 1. Obtain your Interface Installation Code by clicking Interfaces, then click the Install button to reveal the Interface Installation Code. The code is formatted as shown below.
<!-- MetaLocator.com Code START -->
<div data-metalocator="locator" data-metalocator-itemid="XXXXXXX"></div>
<script async language="javascript" src="https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid=XXXXXXX"></script>
<!-- MetaLocator.com Code END: Do not modify this code block. See TOS for details. -->
Observe that the installation code has two components.
The placeholder:
<div data-metalocator="locator" data-metalocator-itemid="XXXXXXX"></div>
And the script:
<script async language="javascript" src="https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid=XXXXXXX"></script>
Step 2. Place the placeholder code fragment where you would like the locator to appear.
Step 3. Place the script code fragment in the HEAD or after the placeholder component.
Dynamic Initialization
MetaLocator can be initialized in response to a JavaScript event. This can be useful in scenarios where the Interface should not be displayed until the user performs an action, such as clicking a link, completing a wizard step or revealing a slide.\
In this scenario, the locator must be loaded into a custom container, typically a div tag, which would be specific to your implementation.
To setup this scenario, perform the following steps.
Step 1. Obtain your Interface Installation Code by clicking Interfaces, then click the Install button to reveal the Interface Installation Code. The code is formatted as shown below.
<!-- MetaLocator.com Code START -->
<div data-metalocator="locator" data-metalocator-itemid="XXXXXXX"></div>
<script async language="javascript" src="https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid=XXXXXXX"></script>
<!-- MetaLocator.com Code END: Do not modify this code block. See TOS for details. -->
Observe that the installation code has two components.
The placeholder:
<div data-metalocator="locator" data-metalocator-itemid="XXXXXXX"></div>
And the script:
<script async language="javascript" src="https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid=XXXXXXX"></script>
Step 2. Place the script component into the HEAD tag.
Step 3. Insert a custom container element on your page and ensure it has a unique selector. For example:
<div id="put_locator_here"></div>
Step 4: Dispatch the metalocator:render event to initialize the Interface, passing it the Interface's unique ID and the selector necessary to target your custom container element. Be sure to replace XXXXXXX with your Interface ID.
window.dispatchEvent(new CustomEvent("metalocator:render", {
detail: {itemid: "XXXXXXX", target: "#put_locator_here"}
}));
Be sure to use the code as provided by the MetaLocator Installation Code window and copy+paste the fragments as describe above.