Follow these steps to integrate the MarkerScript JavaScript code into your Salesforce CRM using a Lightning Web Component (LWC).

Step 1: Create the Lightning Web Component (LWC)

Open Salesforce Developer Console:
- Log in to your Salesforce org.
- Click on the gear icon (Setup) in the top right corner.
- Select Developer Console.
Create the LWC Component:
- In the Developer Console, go to File > New > Lightning Component.
- Name the component MarkerScript.

Step 2: Modify the Component Files

MarkerScript.html

Create a file named markerScript.html with the following content:

<template>
    <!-- No visual content needed -->
</template>

MarkerScript.js

Create a file named markerScript.js and add the following content:

import { LightningElement } from 'lwc';

export default class MarkerScript extends LightningElement {
    connectedCallback() {
        window.markerConfig = {
            project: 'YOUR_PROJECT_ID',
        };

        (function (e, r, a) {
            if (!e.__Marker) {
                e.__Marker = {};
                var t = [], n = { __cs: t };
                ["show", "hide", "isVisible", "capture", "cancelCapture", "unload", "reload", "isExtensionInstalled", "setReporter", "setCustomData", "on", "off"].forEach(function (e) {
                    n[e] = function () {
                        var r = Array.prototype.slice.call(arguments);
                        r.unshift(e), t.push(r)
                    }
                });
                e.Marker = n;
                var s = r.createElement("script");
                s.async = 1;
                s.src = "<https://edge.marker.io/latest/shim.js>";
                var i = r.getElementsByTagName("script")[0];
                i.parentNode.insertBefore(s, i)
            }
        })(window, document);
    }
}

MarkerScript.js-meta.xml

Create a file named markerScript.js-meta.xml and add the following content:

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

Step 3: Deploy the Component

Save all the files in the Developer Console.
Deploy the component:
- Using Salesforce CLI or directly from the Developer Console. If you're using the Salesforce CLI, run the following command:
```
sfdx force:source:deploy -p force-app/main/default/lwc/markerScript
```

Step 4: Add the Component to a Lightning Page

Open Lightning App Builder:
- In Salesforce Setup, enter App Builder in the Quick Find box and select Lightning App Builder.
Create or Edit a Page:
- Create a new Lightning page or edit an existing one.
Drag and Drop the Component:
- Find your MarkerScript component in the custom components section.
- Drag and drop it onto the desired section of the page.
Save and Activate:
- Save the page and activate it if needed.

Final Note

By following these steps, your JavaScript code snippet will be added to Salesforce and executed as part of the Lightning Web Component. Ensure you test the functionality thoroughly in a sandbox environment before deploying to production.

If you have any questions, contact us.

Guided Widget Targeting with Marker.io