Embed with iFrame

Search…
Embed with iFrame
Using the embed functionality of the Vuframe® App for Web, you can easily integrate your SmartVu's® into your own websites or apps.
Standalone vs. Embedded SmartVu's®
Standalone SmartVu® Page
Embedded SmartVu® Page
Embed Pages Basics
The embed functionality of the Browser® 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.
1. Setting up the embed page and integrating it into your website
In order to embed your SmartVu® into your own web page, please follow these steps to ensure everything is displayed correctly:
1.In order to view your SmartVu® using the VUFRAME® App for web, you will need to share it first. The share link should look something like https://share.vuframe.com/c7bf08c8 with the last part being the SmartVu®'s share code.
2.Open the embeddable web version of your SmartVu® by accessing the following URL: https://view.vuframe.com/<share_code>/embed.
3.Optionally, you may configure the way the embeddable version of the SmartVu® is displayed by appending configuration parameters.
4.If your SmartVu® meets all requirements for web publishing and you have followed all instructions correctly, it will be displayed in an interactive 3D viewer. Otherwise, refer to the troubleshooting section of this article.
5.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.
1
<iframe frameborder=0 src="https://view.vuframe.com/279ddcd8/embed"/>
Copied!
2. Configuring the embed page
Using the embed URL API you can customize the behavior and the look and feel of the embed page.
Check out the Documentation for the Embed API below.
3. Legacy Embed Page
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.
4. Requirements for embedding your SmartVu®
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.
Embed API
The Embed API allows you to configure the Vuframe® Player via URL parameters.
Parameters
The embed mode of the supports the following configuration parameters:
resolution: allowed values are 512 (SD), 1024 (HD), 2048 (UHD). Default: 1024
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®. Allowed values: 6-digit HEX color without #-sign, e.g. FFFFFF for white, or transparent
plane: Sets the color of the 3D floor to the given hex color. Allowed values: 6-digit HEX color without #-sign, e.g. FFFFFF for white.
autoplay: If set to 1, the 3D preview on the page will start immediately. The play button will not be displayed.
autopause: If set to 1, the player pauses when idle to save CPU and battery.
autorotate: If set to 1, the 3D model starts spinning when the user is idle for 5 seconds.
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.
openinapp (Deprecated): If set to 1, the "Open in App"-button in the bottom left corner of the 3D view will be displayed.
hide_navigation: If set to 1, the default navigation UI elements are hidden, e.g. the "Back" button only works in Embed mode
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.
enable_xr: pass enable_xr=0 to disable the AR button
enable_mirror: display a mirror surface below the model
enable_ao: enable ambient occlusion for the displayed model
format: aura or glb, glb is default. Pass aura to use the new AuraWeb format
initial_hotspot: pass the hotspot the SmartVu® starts with, e.g. &initial_hotspot=footsteps-00
aa: number of post-processing samples, range between 0 and 8. pass 0 to disable post-processing; default=2
exposure: global exposure of the scene – will not be applied if post-processing is disabled, default=1.0
contrast: global contrast of the scene – will not be applied if post-processing is disabled, default=1.0
Web Viewer v1.8.6 and higher:
brand_color: Sets the text and button color of the UI elements, e.g. Popups. Allowed values: 6-digit HEX color without #-sign, e.g. FFFFFF for white. Default: white.
brand_bg: Sets the background color of the UI elements, e.g. Popups. Allowed values: 6-digit HEX color without #-sign, e.g. FFFFFF for white. Default: #121A27
Web Viewer v1.8.14 and higher:
force_sidebar: If set to 1, the SmartVu sidebar UI is forced to be in its initial state (also requires the sidebar to be enabled for the SmartVu in studio)
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.
Javascript API
Methods
Command
Description
Params
vf.activate_trigger
activate a hotspot with the given name or path
{
method: 'vf.activate_trigger',
id: <id of trigger>
}
vf.set_ego_limits
limit the rotation of the ego camera
{
method: 'vf.set_ego_limites',
start_angle: 0,
min_angle: -90,
max_angle: 90,
}
vf.set_texture
load an external texture into the specified texture. alpha parameter is optional to force transparency on or off, leave it to use auto-detection based on texture file extension.
{
method: 'vf.set_texture',
id: <id of texture>,
url: <url of texture>,
alpha: <true
vf.show_object
show an object
{
method: 'vf.show_object',
path: <path to object>
}
vf.hide_object
hide an object
{
method: 'vf.hide_object',
path: <path to object>
}
vf.pause
pause the player manually, show pause UI optionally
{
method: 'vf.pause',
ui: <true
vf.unpause
unpause the player
{
method: 'vf.unpause'
}
vf.ui.list_triggers
request a list of triggers contained in the loaded scene. the response contains a data.params.triggers object with a list of all triggers contained in the scene.
{
method: 'vf.ui.list_triggers'
}
vf.navigate_back
trigger a back action to return to the previous view in the navigation stack of the 3D player
{
method: 'vf.navigate_back'
}
vf.set_background
change the background color of the 3D player. Allowed values: 6- or 8-digit hex code, without # or 'transparent'.
6-Digit Hex, no alpha: FFFFFF = white
8-Digit Hex, alpha: FF000088 = semi-transparent red
{
method: 'vf.set_background',
color: <HEX COLOR>
}
vf.set_material_color
change the color of a material in the loaded scene. Allowed values: 6-digit hex code, without #.
{
method: 'vf.set_material_coolor',
id: <name of the material>,
color: <HEX COLOR>
}
vf.allow_rotation
disable or enable the autorotation feature. This only has an effect if autorotate=1 is added as a param
{
method: 'vf.allow_rotation',
state: <true
Example call from Javascript to an iframe via jquery:
1
$("iframe.vuframe")[0].contentWindow.postMessage({method:"vf.activate_trigger", id: tourStop.trigger },'*');
Copied!
�
Callbacks
Using Javascript's PostMessage method the Vuframe® Embeddable Viewer will deliver events to the parent page in the following format:
1
{
2
    event_id: 'vf.<event_id>',
3
    params: {
4
        v1: 'value1', 
5
        v2: 'value2'
6
    }
7
}
Copied!
EventIDs
Description
Data
vf.did_activate_trigger
Sent when a hotspot is clicked or
activated by scripting logic.
{
trigger_type: '',
trigger_id: ''
}
vf.did_enter_context
Sent when the viewer changes
context, e.g. from touch view
to first person view.
{
context: ''
}
vf.did_exit_context
Sent when the viewer changes
context, e.g. from touch view
to first person view.
{
context: ''
}
vf.did_hide_popup
Sent when the viewer closes a popup.
{
title: ''
}
vf.did_list_triggers
Sent when the API requests a list of triggers.
{
triggers: [
{
path: 'root/child/trigger1',
type: 'EVENT',
}
]
}
vf.did_pause
Sent when player is paused
-
vf.did_resume
Sent when player is unpaused
-
vf.did_show_popup
Sent when the viewer opens a popup window, e.g. to display a PDF file.
{
title: ''
}
vf.did_change_background
Sent when the background color has been changed via API
-
How to listen for callbacks?
1
window.addEventListener('message', this.onApiCallback, false)
2
​
3
function onApiCallback(e)
4
{
5
		if (e.data.event_id === 'vf.did_activate_trigger')
6
		{
7
			// do something
8
		}
9
}
Copied!
�
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:
1
<iframe frameborder=0 src="https://view.vuframe.com/<share_code>/embed?hide_bg=1&bg_color=FF00FF" />
Copied!
Example #2: Embed page that automatically loads 3D content. The "Open in App"-button and the sidebar will not be displayed:
1
<iframe frameborder=0 src="https://view.vuframe.com/<share_code>/embed?autoplay=1&hide_applink=1&hide_sidebar=1" />
Copied!
See how it looks @Vuframe: www.vuframe.com/features/iframe​
Troubleshooting
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.