Installation Instructions for Multiple PLs Per Page or SL & PL on One Page

Add an id parameter e.g. "id": "1", 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_1[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.

Add an id parameter e.g. "id": "1", in each embed code and have the id be different for the Product Locator and Store Locator. The id can be anything you want (a number is preferred) but it must be different for each Locally tool 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. 

Product Locator: (just add the parameter "id": "0" to the embed code that is provided to you)

<!-- LOCALLY.COM WIDGET EMBED CODE -->
<div id="lcly-button-0"
  data-switchlive="true" 
  data-switchlive-impression="true"
  data-switchlive-impression-id-PL="1"
  >
  <a id="lcly-link-0" 
    data-switchlive="true"
    data-switchlive-mode="auto"
    data-switchlive-id-PL="6"
    role="button"
    href="https://join.locally.com/for-brands" target="_blank">
    Product Locator by Locally
  </a>
</div>
<script id="lcly-script-0" async></script>
<script id="lcly-config-0">
  var __lcly_channel_domain_0 = "locally";
  var lcly_config_0 = {
    "company_name": "Acme",
    "button_text": "Find a Store",
    "button_id": "HTML",
    "company_id": "999",
    "css": "3",
    "upc": "999999999999",
    "show_location_prompt": "1",
    "lang": "en-us",
    "n_dealers": "3",
    "no_link": "1",
    "id": "0"
  };
  var lcly_query_0 = Object.keys(lcly_config_0)
  .reduce(function(a, k) {a.push(encodeURIComponent(k) + '=' 
  + encodeURIComponent((typeof lcly_config_0[k] === 'object' && lcly_config_0[k] !== null)
  ? JSON.stringify(lcly_config_0[k])  : 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>

Store Locator: (Notice how ALL instances of the id 0 have been replaced with 1.)

<!-- LOCALLY.COM WIDGET EMBED CODE -->
<div id="lcly-button-1"
  data-switchlive="true" 
  data-switchlive-impression="true"
  data-switchlive-impression-id-PL="1"
  >
  <a id="lcly-link-1" 
    data-switchlive="true"
    data-switchlive-mode="auto"
    data-switchlive-id-PL="6"
    role="button"
    href="https://join.locally.com/for-brands" target="_blank">
    Store Locator by Locally
  </a>
</div>
<script id="lcly-script-1" async></script>
<script id="lcly-config-1">
  var __lcly_channel_domain_1 = "locally";
  var lcly_config_1 = {
    "company_name": "Acme",
    "company_id": "999",
    "inline": "1",
    "lang": "en-us",
    "id": "1"
  };
  var lcly_query_1 = Object.keys(lcly_config_1)
  .reduce(function(a, k) {a.push(encodeURIComponent(k) + '=' 
  + encodeURIComponent((typeof lcly_config_1[k] === 'object' && lcly_config_1[k] !== null)
  ? JSON.stringify(lcly_config_1[k])  : lcly_config_1[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>