The embed page allows you to view your shared 3D content directly within your browser. Additionally, you can display an interactive version of your 3D models on your website using an iFrame-Element.
Before you start please make sure you have followed these steps:
In order to access the embed page for one of your SmartVu’s® , you will need to share it first. The share link should look something like this: https://share.vuframe.com/c7bf08c8.
Open the SmartVu’s® share page and simply add “/embed” to the URL, resulting in a URL like “https://share.vuframe.com/<share_code>/embed”.
If your SmartVu® contains a compatible 3D file, it will be displayed in an interactive viewer. This viewer can then be embedded within your own website by adding an Iframe-Element that links to this page.
If your file is not displayed in an interactive viewer, please process it again in VUFRAME® Studio.
<iframe frameborder=0 src=”https://share.vuframe.com/279ddcd8/embed?autoplay=1&hide_watermark=1″/>
The embed page (https://share.vuframe.com/<share_code>/embed) supports the following configuration parameters:
hide_bg: If set to 1 the player will use a solid color as a background instead of the default environment.
bg_color: Sets the color of the 3D environment to the given hex color. The default background color is #EFEFEF.
autoplay: If set to 1, the 3D preview on the page will start immediately. The play button will not be displayed.
hide_watermark: If set to 1, the Vuframe logo in the bottom left corner of the page will not be displayed. Note that this param is only available for business projects. For non-business project, this param does not have any effect.
These parameters are added to the URL after a question mark and separated by ampersands (“&”). See the next section for a couple of examples.
Copy these HTML tags and paste them on your website to embed your SmartVu®. Note that you will need to replace “<share_code>” with the share code of your SmartVu™ in order for these tags to work.
Example #1: Embed page with a solid pink background:
<iframe frameborder=0 src=”https://share.vuframe.com/<share_code>/embed?hide_bg=1&bg_color=FF00FF” />
Example #2: Embed page that automatically loads 3D content. The Vuframe watermark will not be shown (assuming the shared SmartVu® is part of a business project):
<iframe frameborder=0 src=”https://share.vuframe.com/<share_code>/embed?autoplay=1&hide_watermark=1″ />
See how it looks @Vuframe: www.vuframe.com/features/iframe
When opened on a compatible iOS or Android device, the embed page allows you to view your 3D file in Augmented Reality directly from the browser. In order to do so, simply click the AR button in the top right corner of the page.
If your device supports WebAR, your 3D model will be opened in the the Apple Model Viewer on iOS or the ARCore Viewer on Android. You will now be able to place the model on any flat surface and view it in Augmented Reality.
In order to view your models on the embed page, they need to be processed by our Aura™ pipeline. For all files uploaded in October 2019 or later, you should be ready to go.
If your models are older than that, you will need to reprocess them as follows:
Select “3D Models” in the sidebar menu
Open the model you want to reprocess
Click the “Edit” button in the top right corner of the page
Start the reprocessing task by clicking the button “Reprocess 3D Model”
Your model will now be processed by Aura™. This may take a couple of minutes depending on the size and complexity of the 3D file. After your model has been processed successfully, you will need to share the changes to your SmartVu® by clicking the “Share Changes” button on the left side. You should now be able to view your model on the SmartVu® embed page and in WebAR.
Can’t access the embed page or see the Web AR Button? First, try to use a more powerful mobile device with more memory. If it still doesn’t work, your file is probably too complex.
Contact us to get support.