The VNTANA 3D Viewer can be integrated into your website by utilizing an iFrame or shared with others by simply utilizing a Product or Configurator’s embed link. This guide will show you how to retrieve your iFrame or embed link manually on the Platform as well as via the VNTANA Admin API.
Steps to Obtain iFrame Embed Code
- Login to your account on the VNTANA Platform
- Click on Products in the left-hand navigation menu
- Select the Product you want to view
- In the Embed Code section from the Product View Page, click on the Copy button to copy the entire Embed Code (circled in red below). The iFrame is now copied to your clipboard and can be used anywhere on your site. Just paste it in the HTML of the page you would like to include the 3D Web Viewer.
Important Notes
- Make sure your Product is LIVE, so it can be viewed publicly. Click the “Publish” button from the Product Details Page to publish your product and set its review state to Live.
- The <iframe> src is the URL to the 3D asset in a Standalone Viewer Page. This shareable link can be copied by clicking the Share button, which is below the Copy button.
- The asset can easily be swapped out for another asset in your Product List by changing the productUuid value. The productUuid can be found on the Product Details Page labeled Product ID.
- The Client Slug and Organization Slug are static values for all of your Products under the same Folder and Organization.
Styling the 3D Web Viewer
- The width and height of the <iframe> can be changed to better fit your site.
- The <iframe> style can be updated with custom CSS if needed.
- Use the transparent background option to place the viewer over your own custom background design or color.
- The buttons within the viewer can also be hidden by adding the following query parameters to the end of the Embed Code src.
- vntanaAnchor=0 – hides the VNTANA logo
- fullScreen=0 – hides the fullscreen button
- qrCode=0 – hides the View in AR button on desktop
- mobileARView=0 – hides the View in AR button on mobile
Creating an iframe / Getting an Embed Link via API
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 class="lazyload" 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.
Important: In order to leverage the Admin API to generate and use the iFrame or embed link, your Product must be in the Live Public status. If it is in Draft it won’t be accessible via search endpoints, and if it is in Live Internal it won’t be shareable externally. See the ‘Publish Status’ section of this guide for more info.
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. A 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.
