Product Locator Installation for Multiple PLs Per Page

Add an id parameter in each embed code and have the id be different for each Product Locator. The id can be anything you want (a number is preferred) but it must be different for each Product Locator being loaded on the page.

Alter the id value in ALL parts of the embed code to match the id parameter.

For example, these two embed codes will work on the same page:


<!-- LOCALLY.COM WIDGET EMBED CODE -->
<div id="lcly-button-0">
  <a id="lcly-link-0" href="https://brands.locally.com" target="_blank">
    Product Locator by Locally
  </a>
</div>
<script id="lcly-script-0" async></script>
<script id="lcly-config-0">
  var lcly_config_0 = {
    "id": "0",
    "company_name": "Acme Outfitters",
    "company_id": "999"
  };
  var lcly_query_0 = Object.keys(lcly_config_0)
  .reduce(function(a,k){a.push(encodeURIComponent(k) + '=' 
  + encodeURIComponent(lcly_config_0[k]));return a},[]).join('&');
  var lcly_endpoint_0 = 'https://acme.locally.com/stores/map.js?' + lcly_query_0;
  document.getElementById('lcly-script-0').src = lcly_endpoint_0;
</script>


and

<!-- LOCALLY.COM WIDGET EMBED CODE -->
<div id="lcly-button-1">
  <a id="lcly-link-1" href="https://brands.locally.com" target="_blank">
    Product Locator by Locally
  </a>
</div>
<script id="lcly-script-1" async></script>
<script id="lcly-config-1">
  var lcly_config_1 = {
    "id": "1",
    "company_name": "Acme Outfitters",
    "company_id": "999"
  };
  var lcly_query_1 = Object.keys(lcly_config_1)
  .reduce(function(a,k){a.push(encodeURIComponent(k) + '=' 
  + encodeURIComponent(lcly_config_0[k]));return a},[]).join('&');
  var lcly_endpoint_1 = 'https://acme.locally.com/stores/map.js?' + lcly_query_1;
  document.getElementById('lcly-script-1').src = lcly_endpoint_1;
</script>

Notice how ALL instances of the id 0 have been replaced with 1.


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.