There are two ways to embed your 3D presentations in websites, just like embedding a YouTube video. Quick embedding using the native functionality of your software (if supported) or iframe embed codes.
Instant embedding
When using popular web software for work like Confluence, Canva, or Miro - you can embed your Jig just by copying and pasting the share link of your Jig into the software. JigSpace links support the oEmbed protocol, which allows web-based software to choose for users how they display links that have an embedded view of content associated with it.
In Confluence and JIRA, by Atlassian, you can choose if you want to display a link, preview card, or embed of your Jig when you paste the URL linking to your 3D content into a Confluence page or a JIRA issue.
When you go to embed 3D content in Canva it automatically unfurls your share links into the embedded 3D viewer, so you can easily add it to a slideshow or collaborative team document. Just navigate to the page or section of your document you want the Jig to appear in, and paste the JigSpace sharing link in.
Using iframe embed codes
Copy embed code
You can copy the iframe embed code from either the JigSpace app, or when viewing a Jig on a web browser in the WebAR viewer. This is suited to marketing websites hosted using CMS like Wordpress, or help desk software like Zendesk.
From the JigSpace apps
Navigate to the Jig you wish to embed, and click on the Share button.
Then click on the embed tab and 'Copy embed code'.
From the JigSpace WebAR viewer
Click on the Share button from the JigSpace WebAR viewer.
Copy the embed code from the pop-up and paste it into your website's HTML code. This will work almost anywhere on the web - if the HTML iframe tag is supported.
Implement iframe embed code
Pass the iframe embed code on directly to your website manager or web development team. Or, implement yourself with the following steps:
- Open your website or CMS editor (Hubspot, SharePoint, etc), and navigate to either the HTML code view, or iframe widget, usually indicated by a </> icon.
- Scroll to the part of the page or where you want the Jig to display.
- Paste the iframe code sent to you (it will look like this below).
Customize your embedded view
By clicking on the Customize tab in the Share your Jig panel, you can customize how a Jig loads and displays when embedded. Options include:
- Start Jig on specific step number (i.e. step no. 5)
- Show or hide background
- Automatically load or wait for user to initiate
- Autoplay on load
- Seconds delay for each step when autoplaying
- Loop, if autoplaying.
Configure your custom branding
Custom branding is set on your account level (for all your content).
Follow these instructions to configure your custom logo, color, and team name.
Visibility Settings
For a Jig to be viewed in the embedded viewer, it must have a visibility setting of Anyone with link can view. To adjust these settings, click the dropdown in the sharing panel.
Embed in 3rd party web platforms
You can also embed models on specific websites platforms and web-based software.
See examples below.
