Adding a MapCosmos store locator to your Salesforce-powered website or portal is simple with just a few steps.

The MapCosmos widget for Salesforce helps you increase engagement, drive in-store visits, and build trust by giving your visitors the ability to:

• Instantly search for nearby outlets
• Filter by services, categories, or tags
  Access one-click directions on desktop or mobile

1. Copy your installation code

• Log in to your MapCosmos dashboard
• Select your widget
• Open Settings → Installation Code
• Copy the embed code provided
  

👉 Haven’t created your widget yet? Follow our setup guide on how to configure a MapCosmos store locator first.

2. Embed the store locator in Salesforce

Depending on how you’re using Salesforce (Experience Cloud / Sites / Lightning Pages), you can add the code in a few ways:

Option A: Experience Cloud (Sites or Communities)

• Go to Setup → Digital Experiences → All Sites

• Choose your site and open the Builder

• Navigate to the page where you want the locator (e.g., “Find a Store”)
• On the left hand side under Components, type “HTML” in the search bar and drag the HTML Editor (or “Custom Component”) onto the page

• Paste the MapCosmos installation code into the editor
• Save & publish

Option B: Lightning Pages (internal apps or portals)

• Open the App Builder
• Select the page where you want the store locator displayed
• Add a Custom Lightning Component or Visualforce component with HTML support
• Paste the MapCosmos embed code
  Save & activate
  

Option C: Classic (Visualforce pages)

Create a new Visualforce page

Paste your MapCosmos embed code directly inside the <apex:page> container

Save and assign the page to the relevant menu item.

3. Save and go live 🚀

That’s it — you’ve successfully embedded a fully interactive store locator inside Salesforce.

Now your visitors can:
✅ Locate your nearest branches or partners instantly
✅ Access live directions in one tap
✅ Filter results by service type, category, or your own custom fields
✅ Read detailed store information
✅ Enjoy a seamless transition between online and offline experiences

🚀 Start using MapCosmos for free today and bring a customizable, performance-driven store locator to your Salesforce portal, app, or website.

‍

How to Add a Store Locator to Salesforce (WIP)

This guide explains how to add MapCosmos to Salesforce in three simple steps - with instructions for both Aura (Visualforce) and LWR (Lightning Web Runtime) sites.

1. Get the installation code

From your MapCosmos dashboard, open your widget and click “Installation Code” in the settings. Copy the installation code provided.

2.Check if you are on an Aura or LWR (Lightning Web Runtime)

You can check if you’re on LWR or Aura by going to Advanced Settings → Digital Experience → All Sites

In the left-hand panel

• If you see only Lightning Web Components under Framework and no “Standard Components” like Visualforce Page → you’re on LWR .
• If you see the broader library (Visualforce, Aura components, Standard components) → you’re on Aura.

3. Add the store locator to Salesforce

In Salesforce Admin, go to Quick Settings → Advanced Setup → Visualforce Pages → New

Give your page a name (e.g., StoreLocatorPage / Wheretofindus)

Paste your MapCosmos installation code into the editor, for example:

<apex:page>  
<script type="text/javascript" src="https://widget.mapcosmos.com/map-widget.js?key=WIDGET_KEY" async></script>
</apex:page>  

👉 The <apex:page> wrapper is required — every Visualforce Page must start and end with it.

1. Make the Visualforce page available in Lightning/Communities
   On the Visualforce page detail, check:
   Available for Lightning Experience, Lightning Communities, and the mobile app → Save.
2. You now have a reusable Visualforce Page that you can add to Experience Cloud (via a Visualforce Component in Builder) or to Lightning App Pages.
   

4. Add the Store Locator to your Site

Path A:
If you’re on Aura, add the Visualforce page to your site or app (only applicable if you are NOT on an LWR (Lightning Web Runtime) site:

• Experience Cloud site: Go to Advanced Setup → Digital Experiences → All Sites → Builder, open the page you want, and drag a Visualforce Component into the layout. Select your StoreLocatorPage.
  
• Lightning App Page: Use the App Builder to add a Visualforce component and point it to your StoreLocatorPage.

Path B:
If you’re on an LWR (Lightning Web Runtime):

1. Create a Lightning Web Component (LWC)
   
   
   • Files: mapCosmosLocator.html, mapCosmosLocator.js, mapCosmosLocator.js-meta.xml.
2. Deploy the LWC to your org
   Use SFDX/VS Code or your preferred deployment method.
3. Add the component in Experience Builder
   
   
   • Open your LWR site in Builder.
     
   • In Components, search for mapCosmosLocator.
     
   • Drag it onto the page, Save & Publish
   Note: LWR blocks inline <script> and doesn’t support Visualforce on pages — the LWC wrapper is the supported way to load third-party widgets.

mapCosmosLocator.html

 <template>
  <div id="map-cosmos-map-widget" data-widget-id="YOUR_WIDGET_ID"></div>
</template>
 mapCosmosLocator.js

 import { LightningElement } from 'lwc';

export default class MapCosmosLocator extends LightningElement {
  renderedCallback() {
    if (this._loaded) return;
    this._loaded = true;

    const script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://files.tgb-pro.com/map-widget.js';
    script.onload = () => {
      // script loaded – the widget will attach to the DIV via its own init
    };
    this.template.appendChild(script);
  }
}
 mapCosmosLocator.js-meta.xml

 <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>61.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    <target>lightningCommunity__Page</target>
  </targets>
</LightningComponentBundle>

5. Save and publish 🚀

That’s it! Your MapCosmos Store Locator is now live in Salesforce.

Now your visitors can:
✅ Find the nearest store or partner with just a few clicks
✅ Get real-time directions on desktop or mobile
✅ Search by products, categories, services, or your own custom fields
✅ Access detailed store information like hours, accessibility, and downloads
✅ Connect more closely with your brand offline

🚀 Get started with MapCosmos for free today and add a powerful, fully customizable store locator to your Salesforce portal, Experience Cloud site, or Lightning app.