Loading

Salesforce Field Service Embed Appointment Assistant in External Site

Fecha de publicación: May 28, 2026
Descripción

With Salesforce Field Service, in order to keep all the customization of the product and to allow the Appointment Assistant to easily be shown in an external site, we suggest configuring the Appointment Assistant in a Salesforce community (using Aura type). Then, display the community in your site inside of an iframe HTML tag.

This approach preserves all Salesforce Field Service Appointment Assistant customizations while displaying the experience on your own domain. The iframe embeds the community page and dynamically appends the guest token from the URL to ensure the correct appointment is displayed for each visitor.

Diagram showing a Salesforce Aura community page embedded within an external website using an HTML iframe tag, with arrows illustrating the guest token being passed via the URL query string.

image (8).png
 

Solución

Please review the following information after configuring the Field Service Appointment Assistant in a Salesforce community, to then display the community in your site inside of an Iframe HTML tab. 

Embed in your own site

On your website, use this custom code in the HTML to present the community inside it:

<html>
           <body>
                   <iframe id="EmbeddedAA" frameborder="0" marginwidth="0" marginheight="0"
                         scrolling="NO" width="100%" height="100%">
                   </iframe>
           </body>

           <script>
                  let Iframe = document.getElementById("EmbeddedAA");
                  let communityURL = "https://{Your community domain}/s/";
                  var guestToken = window.location.search.substring(1);
                  let wholeURL = communityURL+"?"+guestToken;
                  Iframe.src = wholeURL;
          </script>
</html>
 

Using 3rd party website provider (Wix, Squarespace, etc.)

If you are working with 3rd party website provider, it becomes a bit more complicated, as each website provider uses different methods. The general approach is to create an event that calls the embedded component and returns an answer.

The code for the hosting site of the embedded component (Wix example):


import wixLocation from 'wix-location';

let communityURL = "https://{Your community domain}/s/";
let url = wixLocation.url;
var guestToken = url.split('?')[1];
let wholeURL = communityURL+"?"+guestToken;
$w.onReady(function () {
       $w("#html1").postMessage(wholeURL);
})

The code for the embedded HTML component:

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
    // when a message is received from the page code
    window.onmessage = (event) => {
        if (event.data) {
          document.getElementById("EmbeddedAA").src = event.data;
        }
     }
}
</script>

</head>

<body onload="init();">
     <div id="wrapper">
         <iframe id="EmbeddedAA" frameborder="0" marginwidth="0" marginheight="0"
               scrolling="yes" height="100%" width="100%"
               sandbox="allow-modals allow-popups-to-escape-sandbox allow-popups allow-scripts allow-same-origin">
         </iframe>
      </div>
</body>

<style>
     #wrapper { height: 520px; width: 374px; }
     #myIframe { transform: scale(0.90); }
</style>

</html>

Número del artículo de conocimiento

000394585

 
Cargando
Salesforce Help | Article