Fixed Size

The simplest way to embed a model is using a fixed sized iframe:

<iframe src="https://workingspec.com.au/embed/xxx" width="800" height="450" allowfullscreen></iframe>

Simply copy the code above, change the xxx at the end of the src attribute to match the abbreviation of the model you wish to embed, and if desired edit the width and height attributes to match your required size.

For example, to embed the model with abbreviation ws-e2p-sof1 you would use the following:

<iframe src="https://workingspec.com.au/embed/ws-e2p-sof1" width="800" height="450" allowfullscreen></iframe>

Responsive

You can embed the model in a responsive site using the following pattern:

CSS

.ws-embed {
  position: relative;      
  width: 100%;      
  height: 0;

  /*      
    16:9 ratio

    eg 9÷16 = 0.5625 = 56.25%      
  */      
  padding-bottom: 56.25%;      
}

.ws-embed iframe {      
  border: 0;      
  position: absolute;      
  width: 100%;      
  height: 100%;      
  left: 0;      
  top: 0;      
}

HTML

<div class="ws-embed">
  <iframe src="https://workingspec.com.au/embed/xxx" allowfullscreen></iframe>        
</div>

Copy the CSS and HTML above and paste into your existing stylesheet and HTML files. If you wish to use an aspect ratio other than 16:9, see the comments in the CSS above for details on calculating the ratio.

Replace the xxx at the end of the src attribute to match the detail abbreviation of the model you wish to embed.

The div with the class ws-embed will fit 100% of the available space - for further control over the width, place this div in a parent element and set a width on the parent.

Advanced

The information above demonstrates the basics of embeding Working Spec models in web pages using iframe.

To handle multiple models it is useful to display a selection grid where users can quickly select models of interest. Call our API to get the JSON model data to build the grid.

Javascript

// This returns 'jh' (James Hardie) models on the Australian server.
const res = await fetch('https://workingspec.com.au/api/client/v1/company/jh')

Github Repo Example

Visit our public Github repo ws-client-api-example for website API documentation and working web code to:

• generate a selection grid of Working Spec 3D interactive models.
• respond to user selection by launching the Working Spec WebGL player in a popup window.