This documentation provides a step-by-step guide on how to embed an IFRAME of Builtfirst to your website.
Step 1: Obtain the IFRAME Code
To begin, you need to copy the Builtfirst marketplace IFRAME code.
In Builtfirst, navigate to the marketplace you want to embed
Click Settings > Embed
Search for the code of Step 1 and copy the code
Step 2: Paste your IFRAME
After obtaining the IFRAME code, follow these steps to integrate it into your website:
Access the Website: Open the HTML file or content management system (CMS) where you want to add the IFRAME. Typically, this involves logging into the CMS or accessing the site's codebase.
Locate the Desired Location in the HTML: Decide on the location where the IFRAME should be placed within your website's content.
Paste the IFRAME Code: In the chosen location, paste the iFrame code you provided at the beginning of this documentation.
Then, verify that the IFRAME appears correctly and functions as expected.
Adjust Dimensions (Optional)
If necessary, modify the height and width attributes of the IFRAME code to fit your website's design and layout. You can customize these attributes using numerical values in pixels or percentages.
height="1200px" width="100%"
Passing Information Between IFRAME and the Parent Page (Optional)
The communication between a Builtfirst marketplace embedded using an IFRAME and the parent page is done by using the API described at https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Messages that the embedded Builtfirst marketplace sends to the parent container are:
size_updated
Sent whenever the Builtfirst page height changes
Message structure
{ type: "size_updated", content: { height: number } }navigation_end
Sent after the user goes from one page to another within the IFRAME
Message structure
{ type: "navigation_end", content: { path: string } }
The following example shows:
how to change the container of the IFRAME height based on the embedded Builtfirst marketplace height
how to change the parent page scroll position based on when the Builtfirst marketplace page route changes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100%;
text-align: center;
}
iframe {
width: 90%;
height: 100%;
}
section {
height: 900px;
width: 100%;
background-color: burlywood;
}
</style>
<script>
window.addEventListener("message", receiveMessage);
function receiveMessage(event) {
const iframeContainer = document.querySelector("div");
if (event?.data?.type === "size_updated") {
iframeContainer.style.height = event?.data?.content?.height + "px";
}
if (event?.data?.type === "navigation_end") {
setTimeout(() => {
iframeContainer.scrollIntoView({ behavior: "smooth" });
}, 100);
}
}
</script>
<body>
<section></section>
<div>
<iframe src="https://marketplace.staging.builtfirst.com"> </iframe>
</div>
<section></section>
</body>
</html>