Add the AptEdge snippet to your site

1. Navigate to your Salesforce site and open the Experience Builder.

   ⚠️ You’ll need to log in as an administrator or user with edit permissions.

2. Click the Settings icon (⚙️) in the toolbar.

   

3. In the Settings panel, select Advanced.

   

4. Under Head Markup, choose Edit Head Markup.
5. Add the AptEdge snippet that you copied within <script> tags, then click Save to apply the changes. For example:

<script>
	// Add your snippet here
</script>

Configure your Content Security Policy (CSP)

For the snippet to load properly, you may need to adjust your site’s Content Security Policies:

1. In the Settings panel, select Security & Privacy.

2. Under Content Security Policy (CSP), change your Security Level to Relaxed CSP.

   

3. Once the site reloads, you may see a Can’t Access Resources error. Choose OK.
4. Add AptEdge as a trusted site:
    

5. Trusted Site Name	Trusted Site URL
   AptEdge CSS	https://<your_instance>.aptedge.io/self-service/css/style.css
   AptEdge JS	https://storage.googleapis.com/aptedge-self-service-customers/css/aptedge.js
   AptEdge Inject JS	https://<your_instance>.aptedge.io/self-service/css/inject.js

Test and publish your site

1. Once you’ve added the JavaScript snippet and added AptEdge as a trusted site, choose Publish on the top right of the Experience Builder.
   1. Note, AptEdge will not appear when hitting "Preview"

2. You should see AptEdge appear in the bottom right corner of your site. Feel free to test it out!

   

Set user info in Salesforce

If the user is authenticated, set their name and email in the user key to enable AptEdge to identify them in usage analytics, to gather feedback, to target Proactive Answers, and for personalization.

Salesforce Sites do not provide a global object to access logged in user details. To get the details of the current user and pass it to AptEdge, we’ll need to create an Apex class.

Create the Apex class

1. Log into Salesforce as an administrator.
2. Click the ⚙️ gear icon in the top-right corner of the page.
3. Choose Setup to enter Salesforce Setup.

4. In the Setup search bar, type Apex Classes, then choose Apex Classes.

   

5. Click New to create a new Apex class.

6. In the Apex code editor, paste in the following sample REST API. Note the class name that is defined in the code, which in this case is SiteUserInfo.

   @RestResource(urlMapping='/siteUserInfo')
   
   global with sharing class SiteUserInfo {
       global class UserInfoDTO {
           public String userId;
           public String name;
           public String email;
           public String userType;
           public Boolean isAuthenticated;
       }
       @HttpGet
       global static UserInfoDTO getUserDetails() {
           UserInfoDTO result = new UserInfoDTO();
           result.userId = UserInfo.getUserId();
           result.name = UserInfo.getName();
           result.email = UserInfo.getUserEmail();
           result.userType = UserInfo.getUserType();
           result.isAuthenticated = result.userType != 'Guest';        
           return result;
       }
   }
   

7. Choose Save.

Configure access to the Apex class

Guest users and JavaScript code running on your Salesforce Site can’t access your new Apex class by default, so we must explicitly allow public access.

1. In Salesforce Setup, search for and choose Sites.

   

2. Select the site label for your Salesforce Site.
3. Choose Public Access Settings.

4. Scroll down to the section named Enabled Apex Class Access, then choose Edit.

   

5. Add your newly created Apex class, e.g. SiteUserInfo, to the Enabled Apex Classes list, then choose Save.

Use the Apex class to fetch user details

Now that the Apex code is publicly accessible, you can use it to access the details of the current user in JavaScript:

1. Open the Head Markup file where you added the AptEdge install script.

2. Within the script tags, query the Apex class for the user object. A simple way to do this is to use the fetch() method in JavaScript to make an HTTP GET request, then parse the response for the user object it returns.

   <script>
   	fetch('/SITE_NAME/services/apexrest/siteUserInfo', { // Use your site name
   		method: 'GET',
   		credentials: 'same-origin'
   	})
   	.then(response => response.json())
   	.then(user => {
   		// Your AptEdge install script goes here
   	})
   	.catch(error => console.error('Error fetching user info:', error));
   </script>
   

3. At the start of the AptEdge install script you added, look for where the user key is set within the aptedgeConfig object. It should look like this:

   const aptedgeConfig = {
     apiKey: "API_KEY",
     instanceName: "INSTANCE_NAME",
     user: {},
   };
   

4. By default, the AptEdge install script you added passes in an empty user (user: {}). Change this to pass in the user object that you retrieved from the Apex class instead:

   const aptedgeConfig = {
     apiKey: "API_KEY",
     instanceName: "INSTANCE_NAME",
     user: user, // Pass in the user object from the Apex class here
   };
   

5. Your completed script should look like this:

   <script> 
   fetch('/SITE_NAME/services/apexrest/siteUserInfo', { // Use your site name 
     method: 'GET', 
     credentials: 'same-origin' 
   })
   .then(response => response.json())
   .then(user => { 
     const aptedgeConfig = { 
       apiKey: "API_KEY", // Your unique API key 
       instanceName: "INSTANCE_NAME", // Your unique instance name, e.g. https://INSTANCE_NAME.aptedge.io 
       user: user, // Pass in the user object from the Apex class here }; 
       // The rest of the JavaScript snippet goes below 
       !(function(i,s,o,g,r,a,m){(i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)}),(a=s.createElement(o)),(m=s.getElementsByTagName(o)[0]),(a.type="module"),(a.async=1),(a.onload=function(){i[r](aptedgeConfig)}),(a.src=g),m.parentNode.insertBefore(a,m)})(window,document,"script","https://storage.googleapis.com/aptedge-self-service-customers/css/aptedge.js","AptEdge") })
       .catch(error => console.error('Error fetching user info:', error));
   </script>