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.
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.
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>
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.
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>
000394585

We use three kinds of cookies on our websites: required, functional, and advertising. You can choose whether functional and advertising cookies apply. Click on the different cookie categories to find out more about each category and to change the default settings.
Privacy Statement
Required cookies are necessary for basic website functionality. Some examples include: session cookies needed to transmit the website, authentication cookies, and security cookies.
Functional cookies enhance functions, performance, and services on the website. Some examples include: cookies used to analyze site traffic, cookies used for market research, and cookies used to display advertising that is not directed to a particular individual.
Advertising cookies track activity across websites in order to understand a viewer’s interests, and direct them specific marketing. Some examples include: cookies used for remarketing, or interest-based advertising.