Login/register

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 3D model in your Wordpress website using the 3DVieweronline Wordpress plugin.

  • 1. Search the 3DVieweronline in the WordPress marketplace.
  • 2. Download/Install the plugin.
  • 3. Activate the plugin by pressing the "Activate" button.
  • 4. Enjoy! :)
  • Once the plugin is activated, you can embed a 3D model in different ways.

    1. Embed 3D models into Wordpress posts:
  • - Add the 3DViewerOnline Iframe block on the page (Blocks->Embeds->3DViewerOnline Iframe)
  • - Copy the URL of the 3D model you want to embed from your 3DVieweronline account
  • - Paste the URL in the 3DViewerOnline Iframe block of your Wordpress page

    2. Embed 3D models into Wordpress/WooCommerce product pages:
  • - Copy the URL of the 3D model you want to embed from your 3DVieweronline account
  • - Paste the URL in the 3D Viewer Online tab of your Wordpress product page
  • - Edit the 3D Viewer Online Plugin settings to select your favourite integration option

    3. Embed 3D models into Wordpress/WooCommerce product pages using the short code:
  • - Copy the URL of the 3D model you want to embed from your 3DVieweronline account
  • - Add the 3DViewerOnline short code from the Visual editor icon
  • - Replace the `model_url` keyword with the URL of your model

    [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.

Magento extension

    You can embed a 3D model in your Magento website using the 3DVieweronline Magento extension.

  • 1. Search the 3DVieweronline extension from the Magento marketplace.
  • 2. Install and activate the extension.
  • 3. Enjoy! :)
  • Once the extension is activated, you can embed a 3D model by simply clicking on the 3D Model Viewer icon available in your editor, from any content or product page.

    A 3D Model Viewer window will pop up, asking for the 3D Model URL and for the 3D Viewer Width and Height.

    Fill-in those values and click on Insert to finalise. The 3D Viewer will be then included in your page.