Embed the viewer
- To embed a model in your website through the
<iframe>tag, you can either copy the code from your account page or create it yourself.
- In the first case, from your account page just click on the code icon below the model you want to embed and configure the viewer dimensions. The
<iframe>tag is automatically updated according to your preference. Copy then the code generated and paste it in your desired location within the
<body>tags in your page, see the example below :
<iframe id='3dviewerplayer' type='text/html' width='640' height='480' src='https://www.3dvieweronline.com/members/Id00ec53c4682d36f5c4359f4ae7bd7ba1/J8rdYwXNBqtjdzj' frameborder='0' scrolling='no' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
<iframe>tag yourself, you will need to specify at least the
srcURL and the viewer dimensions
srcdefines the URL of the model to be embedded, while
heightspecify the 3D viewer player width and height in the page. You can specify a different
idif desired and change the
scrollingoptions. The last part of the
mozallowfullscreenallows you to enlarge the 3D viewer player to fullscreen size if requested.
- The example here on the left shows the embedding of the 3D viewer player in a generic section of the website. For a better user experience you can change the viewer colors to match your website style, enable the preview and set an axis rotation. You can set a transparent background to allow an even higher integration within your pages. Click on the play button to see the final results. To allow the 3D viewer player to take the parent div size, just set
- Dynamic iFrame change In this example the previous 3D viewer player is dynamically changed based on the user selection. Click on Model-1 or Model-2 to dynamically change the iframe
- Model 1
updateIframe(scr)is executed, where the iframe
srcis parsed as an argument and represents the URL of the model to display.
<a href="#examples" onclick="updateIframe('https://www.3dvieweronline.com/members/Id9bf31c7ff062936a96d3c8bd1f8f2ff3/RmzIEIohys873J0')">Model 2</a>
updateIframe()and perform the iframe
srcchange when a Model is selected.
<script>You can create animations or display loading animated gif when the iframe
srcis changed, by adding an EventListener associated to the iframe object
You can embed a model in your wordpress website using the 3DVieweronline wordpress plugin.
- 1. In your left WordPress menu select "Plugins" -> "Add Plugin".
- 2. Search "3DVieweronline” or upload the zip file you can find here.
- 3. Install the plugin by pressing the "Install" button.
- 4. Activate the plugin by pressing the "Activate" button.
- 5. Enjoy! :) Once the plugin is activated, click on the embed button and replace the
model_urlwith the URL of the model you want to embed and available in your account page. See the shortcode below:
[3Dvo-model url=model_url id=3Dvo width=640 height=480 autosize=yes]You can change the 3D viewer player
[3Dvo-model url=https://www.3dvieweronline.com/members/Id00ec53c4682d36f5c4359f4ae7bd7ba1/J8rdYwXNBqtjdzj id=3Dvo width=640 height=480 autosize=yes]
heightaccording to your preference.