Embed the viewer

Embed the viewer using an <iframe> tag

  • 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 :
  • <body>
    ...
    <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>
    ...
    </body>

  • If you want to create the <iframe> tag yourself, you will need to specify at least the src URL and the viewer dimensions width and height. The src defines the URL of the model to be embedded, while width and height specify the 3D viewer player width and height in the page. You can specify a different id if desired and change the frameborder or the scrolling options. The last part of the iframe tag allowfullscreen webkitallowfullscreen mozallowfullscreen allows you to enlarge the 3D viewer player to fullscreen size if requested.

Examples

  • Simple integration

  • 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 width='100%'.

  • 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 src.

  • Model 1
  • Model 2
  • In order to achieve this simple automation, you need first to trigger the iframe change. This can be done by defining for instance a href link with an associated onclick event. In the following code when the link is clicked, the javascript function associated updateIframe(scr) is executed, where the iframe src is parsed as an argument and represents the URL of the model to display.

    <a href="#examples" onclick="updateIframe('https://www.3dvieweronline.com/members/Id9bf31c7ff062936a96d3c8bd1f8f2ff3/JBM3mWHh2jveQW4')">Model 1</a>
    <a href="#examples" onclick="updateIframe('https://www.3dvieweronline.com/members/Id9bf31c7ff062936a96d3c8bd1f8f2ff3/RmzIEIohys873J0')">Model 2</a>
    ...

    You will need then to create a small javascript to define updateIframe() and perform the iframe src change when a Model is selected.

    <script>
    var iframeID=document.getElementById('3dviewerplayer');
    function updateIframe(src){
    iframeID.src=src;
    }
    </script>

    You can create animations or display loading animated gif when the iframe src is changed, by adding an EventListener associated to the iframe object iframeID.

Wordpress plugin

    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_url with 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]
    changed to:
    [3Dvo-model url=https://www.3dvieweronline.com/members/Id00ec53c4682d36f5c4359f4ae7bd7ba1/J8rdYwXNBqtjdzj id=3Dvo width=640 height=480 autosize=yes]

    You can change the 3D viewer player width and height according to your preference.