Iframe
The IFrame component allows you to embed external content from other websites or applications directly within your ToolJet application. This component is useful for integrating third-party services, displaying external web pages, or embedding multimedia content.
Properties
Property | Description | Expected Value |
|---|---|---|
| URL | The URL of the external content to be embedded in the iframe. | String (e.g., https://example.com). |
Events
The IFrame component currently does not have any event handlers.
Component Specific Actions (CSA)
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
Action | Description | How To Access |
|---|---|---|
| setUrl() | Sets the URL of the iframe to display different content dynamically. | components.iframe1.setUrl('https://example.com') |
Exposed Variables
The IFrame component currently does not expose any variables.
General
Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
Under the General accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Style | Description | Default Value |
|---|---|---|
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or set it programmatically using fx. |
Any property having fx button next to its field can be programmatically configured.