Depending on the hosting website, marketplace admins may need to address the following scenarios when embedding the IFRAME for their marketplace:
Auto-resize the height of the IFRAME
Deep-link to specific product pages or to specific collections
We've created the script below to address these scenarios.
Example of embed using the Builtfirst script
<script src="https://[subdomain].builtfirst.com/scripts/embed.js"></script>
<div id="builtfirtContainer"><div/>
<script>
Builtfirst.embed({
baseUrl: "https://[subdomain].builtfirst.com/",
autoHeight: true,
containerId: 'builtfirtContainer'
});
</script>
Code explanation:
Load the script.
Define the container for the Builtfirst IFRAME. If omitted, the script will create one automatically.
Call the embed method passing the configuration options.
Available configuration options
baseUrl (mandatory): URL to the marketplace.
autoHeight (optional): Possible values are true or false. If omitted true will be used.
containerId (optional): ID of the html tag where the IFRAME will be embedded. The height of the container will be automatically adjusted when autoHeight is set to true.
product (optional): Slug of the product page. If provided, the IFRAME will load a rendering the specified product page.
collection_ids (optional): Comma-separated list of collection IDs. If provided, the marketplace will load showing only the products within the provided collections.
jwt (optional): Only needed when using auto-sign.
cid (optional): Only needed when using auto-sign.
width (optional): Set the width of the container, default value '100%'.
Alternative for passing the optional configuration options to the embed method
If the page containing the IFRAME has the query parameter bf_redirect, the script will read it and use the value as path and query strings for the IFRAME src.
Examples:
Looking for more embed documentation?