Embedding a Nira asset with <iframe> Embedding a Nira asset with <iframe>

Embedding a Nira asset with <iframe>

With a Trial, Professional, Business, or Enterprise plan, you can use an <iframe> tag to embed any asset(s) into your web page, blog, and other web-based media.

Smaug Dragon captured in Wellington Airport as an embed:

Smaug Iframe

The iframe tag used to embed Smaug:

<iframe frameborder="0" width="800" height="640" loading="lazy" style="background:black" allowfullscreen src="https://publicnira2.nira.app/a/btk2lMXES_GS_kssfEYNYA"></iframe>

iframe attributes:

src="https://URL_FOR_YOUR_ASSET"

The src attribute should be set to your Nira asset's URL. You can find an asset's URL in your web browser's address bar while you're viewing the asset, or you can find it in the Share... > Visibility area for the asset. Alternatively, you can use an asset's inspection link in an iframe tag if you want the visitor to be able to create/edit callouts and measurements on the asset. To learn more about inspection links, see Sharing your asset using an Inspection Link. Also see the section below called Asset Visibility when embedding for some important notes.

width="800" height="640"

A width of 800 and a height of 640 was used for this example, but you should adjust these values for your particular use case. If you'd like your iframe to adapt itself to the size of its containing element or the size of the browser window, it's better to define width and height using css with percentages or viewport units (vw and vh) units instead of using the width and height attributes. To learn more, see Sizing Items in CSS (mozilla.org).

allowfullscreen

This ensures that your visitors will have access to a fullscreen button within the Nira view (strongly recommended)

loading="lazy"

This causes the browser to delay loading of the iframe until it actually appears on the screen, instead of initializing it when the page first loads. This is optional, but it does tend to help web pages load quicker, particularly if you have many iframes on a single long-scrolling page.

style="background:black"

This sets the background of the iframe to be black. You can customize this color to your liking. If you omit the style="background:black" portion entirely, the color of the webpage behind the iframe will "show through". This background color defined on the iframe tag is only used before the asset is loaded (asset preview page) and while the asset is in the process of loading. Once the asset is fully loaded, the environment settings that you defined for your Nira asset will be used to determine the background color.

Asset Visibility when embedding

It's important to choose a sensible Visibility setting for any asset that you plan to embed. Here are some pointers for each visibility setting type:

Publicly Accessible is the simplest choice, since anyone that visits the page containing your embedded asset will be able to view it.

Password Protected can be used for an embedded asset, but anyone that views it will need the password that you set for it.

Private is also usable with embedding, but the visitor will need to ensure that they're logged into your Nira organization before they view the embed. If they're not logged in, they will receive a "This resource was not found or is private" error message when they try to view a page with the embed.

A note on inspection links

As mentioned above, an asset's inspection link can be used in an iframe tag's "src" attribute. It will work regardless of the asset's visibility tab setting.

Important note for mobile devices

Note: Most websites and webpages already have the tag mentioned below, but we've included this tip here for the sake of completeness:

For any page where you're embedding a Nira asset, it's strongly recommended to have the following tag within your document's <head></head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

If you don't have this tag on your page, Nira's buttons, asset thumbnails, and other UI elements may appear very small on mobile phones or tablets. Almost every website and web page already includes this tag, because it has a big impact on whether the page will look and behave appropriately on mobile devices.

For more examples

See Nira embedding examples

Was this article helpful?

1 out of 1 found this helpful

Add comment

Please sign in to leave a comment.