Note: This guide is intended to show how you can create an embed link and subsequently construct an iframe via API calls. For a look at retrieving these from the Platform manually or integrating the viewer as a JS component, view this guide.
When a Product is created and a 3D model optimized, an iframe is generated which allows for easy embedding of the VNTANA Viewer and that Product. The iframe component itself is rather generic and aside from any customization you wish to do to it on your end, it only has one property that is unique.
<iframe frameBorder="0" src="..." width="400" height="250" allow="fullscreen"></iframe>
The properties in the iframe can be customized to change the size of the viewer, add a border, block fullscreen, as well as add a class to it for even more customizability. The src property is the embed link for the viewer with a specific Product loaded.
Copying the iframe / Embed link
To manually retrieve the iframe or embed link, simply visit the Product page for which you want to embed and either press the ‘Copy Embed Code’ button (the button that looks like two pieces of paper) to copy the entire iframe or the ‘Copy Share Link’ button (the arrow button) to copy just the embed link. The embed link allows anyone with it to view a page consisting only of the VNTANA Viewer with the designated Product loaded, while the , iframe allows you to embed the Viewer itself into your webpage.
Creating the Embed Link
To create the embed link and subsequently be able to create the <iframe> you will need certain information which can either be obtained via the Admin API or stored locally at the time of creating a Product. The embed link requires the Product UUID, Client Slug, and Organization Slug. To obtain the Client or Organization Slug via the API, you need to make calls to retrieve data pertaining to the Organization and Client. Check below for a couple endpoints to accomplish this.
The Request is structured as follows:
The Response is structured as follows:
The Request is structured as follows:
The Response is structured as follows:
As for the Product UUID, this can either be obtained by searching via the API for the Product in question or by setting up a Webhook that notifies you when a Product has completed converting (this works great if you want to automatically generate the <iframe> or embed link once a Product has finished converting). To see a guide on searching for Products to retrieve the UUID, view this guide.
Once you know each of these, the URL can be constructed by replacing their query values within the embed link. An detailed example is shown below.
- productUuid : [Required] The UUID of the Product to load in the viewer.
- clientSlug : [Required] The slug of the Client / Folder the Product is found within.
- organizationUuid : [Required] The slug of the Organization the Client / Folder and Product are in.
- fullScreen : [Optional] Indicates whether the fullscreen button should be hidden. Default is to show button, set fullScreen=0 to hide the button.
- mobileARView : [Optional] Indicates whether to hide the AR button in the viewer when on a Mobile device. Default is to show button, set mobileARView=0 to hide the button.
- qrCode : [Optional] Indicates whether to hide the AR button in the viewer when viewing in a Desktop browser. Default is to show button, set qrCode=0 to hide the button.
- domain : [Optional] Set the domain where the iframe will be embedded. This allows you to filter Analytics data by the Domain Source from the Analytics Dashboard.
With an Embed link created, it can be set as the src property of the iframe and now the iframe is ready to be embedded on your site.
Note: The iframe / embed link will not be able to load the model if it is not first published on the VNTANA Platform. To do this, simply go to the Product’s page and in the top right corner click the ‘Publish to API’ button. Or, to publish multiple Product’s at once, from the Product list view, check the one’s you wish to publish and select the ‘Publish to API’ button in the top right.
