The embed functionality of the VUFRAME® App for Web allows you to seamlessly integrate your shared SmartVu's® into your own websites, webshops or applications. On compatible mobile devices, your users can even view your 3D content in Augmented Reality without having to install any apps. The following sections describe the necessary steps to do so.
In order to embed your SmartVu® into your own web page, please follow these steps to ensure everything is displayed correctly:
Open the embeddable web version of your SmartVu® by accessing the following URL: https://view.vuframe.com/<share_code>/embed.
Optionally, you may configure the way the embeddable version of the SmartVu® is displayed by appending configuration parameters.
Create a new IFrame-HTML-Element with the following code snippet and insert it into your website. Make sure you replace the URL with the link to your embeddable SmartVu®. Additionally, you can control the display size the embedded SmartVu® by setting the width and height attributes of the element or using CSS.
<iframe frameborder=0 src="https://view.vuframe.com/279ddcd8/embed"/>
The embed mode of the 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. Note that this parameter overrides the background color defined in the Background Color Extension of the SmartVu®.
autoplay: If set to 1, the 3D preview on the page will start immediately. The play button will not be displayed.
hide_sidebar: If set to 1, the sidebar and its widgets of your SmartVu® will not be displayed. Note that this parameter overrides the sidebar behaviour defined in the SmartVu® Editor.
hide_applink: If set to 1, the "Open in App"-button in the bottom left corner of the 3D view will not be displayed.
enable_shadows: If set to 1, shadows will be enabled on all devices. By default, shadows are disabled on all mobile devices. Note that this setting may cause a significant drop in performance for slower devices, so you should only set it for very simple models or if you plan to target desktop users exclusively.
These parameters are added to the URL after a question mark and separated by ampersands (“&”). Please refer to 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://view.vuframe.com/<share_code>/embed?hide_bg=1&bg_color=FF00FF" />
Example #2: Embed page that automatically loads 3D content. The "Open in App"-button and the sidebar will not be displayed:
<iframe frameborder=0 src="https://view.vuframe.com/<share_code>/embed?autoplay=1&hide_applink=1&hide_sidebar=1" />
See how it looks @Vuframe: www.vuframe.com/features/iframe
Previously to version 4.0.20 of VUFRAME® Studio, the embeddable version for SmartVu's® was located under https://share.vuframe.com/<share_code>/embed. If you are still using such a link on one of your web pages, don't worry - it will still work the same way as before. However, you should consider updating your page with the new URL format as it supports additional configuration parameters.
All SmartVu's® that are supported by the VUFRAME® App for Web are available for embedding. For a list of requirements, please refer to the corresponding article.
If you run into any issues, please refer to the troubleshooting and FAQ for the VUFRAME® App for Web.
Alternatively, you can always contact us to get support.