Manage iframes for embeds

When you embed Sigma, you use an HTML iframe. To manage the available functionality of the embedded content, including the display of the embedded content in your application, set different options in the <iframe> element and in the CSS that you use to manage the display.

This document describes a few solutions that can help you achieve a the ideal design for your embedded Sigma content.

Manage the height of your iframe in your application

To manage the display of your embedded content and support a responsive or static display, choose from the available options:

• Adjust the iframe height using JavaScript
• Set a dynamic iframe height in CSS
• Set a fixed iframe height in CSS

For more details about how to implement these solutions, see Embedding 11: Responsive Embeds in the Sigma QuickStarts.

Adjust the iframe height using JavaScript

Use the JavaScript in your application to dynamically adjust the height of the iframe based on the height of the embedded content. A JavaScript event listener can detect the content height using the workbook:pageheight:onchange event, then adjust the height of the iframe to match the content.

💡

Dynamically adjusting the height of the iframe works best when embedding content that cannot be edited or customized (explored) by the user.

Set a dynamic iframe height using the calc() function

Use the calc() function in your CSS to dynamically set the iframe height based on the viewport height and other page elements. You can also use the calc() function to dynamically compute values for other CSS properties.

💡

You can use the calc() function to implement an iframe that is responsive to the application viewport and other page elements, but this method does not adjust the size of the iframe to the embedded content.

Set a fixed iframe height

Set a fixed iframe height using the iframe height property that displays most or all of the embedded content, regardless of screen size. Setting a fixed iframe height lets you control content visibility up to the specified height. If the content exceeds the fixed height, the iframe displays a scrollbar.

📘

Using a fixed iframe height can result in display issues with your embedded content, like overflow or truncation, and possibly require a user to scroll excessively to view the content, depending on their screen size.

Allow users to copy paste across embeds

When you embed content, you can allow users to copy and paste elements from one embed to another embed using the allow property of the iframe. Without this setting, users can copy and paste elements only within the same embed.

To support this in embedded content, update your iframe to allow copy paste actions:

<iframe src="<embed URL>" allow="clipboard-read; clipboard-write">

Both the embed copied from and to must have these options specified in the iframe.

📘

Allowing copying and pasting across embeds only works for secure embeds that use JWT-signed embed URLs because secure embeds permit editing content.