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:
  2. Open the SmartVu’s™ share page and simply add “/embed” to the URL, resulting in a URL like “<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.

2. Configuring the embed page

The embed page (<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=”<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=”<share_code>/embed?autoplay=1&hide_watermark=1″ />

See how it looks @Vuframe: