IFrame

A component that is used to embed a third-party website into a modal window or the settings page.

Examples

Embedding a PDF viewer in a modal window

const pdfViewer: IFrame = {
  src: "https://example.com/pdf-viewer",
  width: "100%",
  height: "80%",
  name: "pdf-viewer-frame",
  sandbox: "allow-scripts allow-same-origin allow-forms",
  id: "pdf-viewer-iframe",
  style: {
    border: "none",
    borderRadius: "8px",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
  }
}

Embedding a settings configuration page

const settingsConfig: IFrame = {
  src: "https://example.com/plugin-settings",
  width: "100%",
  height: "100%",
  name: "plugin-settings",
  sandbox: "allow-scripts allow-same-origin allow-forms allow-popups",
  id: "settings-iframe",
  style: {
    border: "1px solid #eceef1",
    backgroundColor: "#ffffff",
    padding: "16px"
  }
}

Properties

Property	Type	Description
src	string	Defines the base URL to a modal window or the settings page. It is used to generate links
width	string	Defines the frame width measured in percent
height	string	Defines the frame height measured in percent
name	string	Defines the name of the object inserted into the page
sandbox	string	Defines the frame sandbox
id	string	Defines the element ID
style	{ [key: string]: string; }	Defines the frame style
className	string	Defines the CSS class for styling the component. Can be used to override or extend the default component styles.