How to embed the Tridify BIM Viewer on your web page

In this tutorial you will learn how to embed a window containing your Tridify BIM Viewer into your website.

Explore the benefits of the Tridify BIM Publishing Service and start a FREE 14-day trial (no credit card required)

1. Select the code for embedding

Choose which HTML example code is best for your situation.  Copy and paste the HTML code snippet into your HTML editor.

 

Example 1:
By changing values of width and height, you'll be able to choose the size of the web viewer window.

<iframe src="your link here" style="border: 0" width="1000" height="800" frameborder="0" scrolling="no" allowfullscreen></iframe>

 

Example 2:
By using this sample, you'll get a web viewer window that will scale with your page size.

<div style="padding: 56.25% 0 0 0; position: relative;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="your link here" frameborder="0" allowfullscreen></iframe></div>

2. Copy the Web Viewer link

Log in to the Tridify BIM Publishing Service and go to your Project. Copy the Viewer link in the Published links tab or publish a new Viewer and on the Published link page copy the link.

 

Embed_viewer_1

3. Paste the Tridify BIM Viewer link into the editor

Paste your BIM Viewer link into the HTML code snippet within the quotation marks. You should now see the embedded Viewer on your web page.

You can try out the sample HTML codes in the W3Schools.com TryIt Editor.

 

Embed_viewer_2