How To: Embed SmartVuĀ® into your website (via iFrame)

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.

1. Accessing the embed page

Before you start please make sure you have followed these steps:

  1. 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.

  2. 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ā€.

  3. 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.

  4. 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ā€³/>

2. Configuring the embed page

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.

3. 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ā€‹

4. Using WebAR on the embed page

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.

5. Requirements for using the embed page and WebAR

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:

  1. Select ā€œ3D Modelsā€ in the sidebar menu

  2. Open the model you want to reprocess

  3. Click the ā€œEditā€ button in the top right corner of the page

  4. 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.

5. Troubleshooting

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.