Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 21:47:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7
ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/iframe.md
Pratik Agrawal f531b80f0d
[docs]: App Builder Sprint 21 (#14983) 
* audio and camera docs

* iframe

* iframe and tabs component
2026-01-19 09:50:50 +05:30

3.5 KiB
Raw Blame History

id title
iframe 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

<div style={{ width:"100px"}}> Property <div style={{ width:"250px"}}> Description <div style={{width: "200px"}}> 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.

<div style={{ width:"100px"}}> Action <div style={{ width:"200px"}}> Description <div style={{width: "150px"}}> 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

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Style <div style={{ width:"150px"}}> Description <div style={{ width:"135px"}}> 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.

:::info Any property having fx button next to its field can be programmatically configured. :::