Using an IFrame Client Extension

Using an IFrame Client Extension


IFrame client extensions use Liferay’s front-end infrastructure to register external applications as <iframe> HTML elements. They’re added to Liferay pages as widgets. Unlike other front-end client extensions, IFrames do not provide a static resource.


IFrame client extensions are under development and are currently unsupported in Liferay 7.4.

Start with a client extension from the sample workspace.


To start developing client extensions,

  1. Install Java (JDK 8 or JDK 11).


    Check the compatibility matrix for supported JDKs, databases, and environments. See JVM Configuration for recommended JVM settings.

  2. Download and unzip the sample workspace:

    curl -o\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip

Now you have the tools to deploy your IFrame client extension.

Specify a URL for the IFrame Client Extension to Load

The client-extensions/liferay-sample-iframe-1/client-extension.yaml file defines the IFrame client extension project in the sample workspace:

    name: Counter App
    type: iframe

This client extension has the ID liferay-sample-iframe-1 and contains the key configurations for an IFrame client extension, including the name, type and the URL of the app to ingest as an IFrame. The Counter App running at the example’s url is a basic React app that simulates adding items to a shopping cart. After deploying the client extension, you can add the app to a page in Liferay as you would any widget.

See the IFrame YAML configuration reference for more information on the available properties.

Deploy the IFrame Client Extension


To deploy your client extension to Liferay Experience Cloud, use the Liferay Cloud Command-Line Tool to run lcp deploy.

Start a new Liferay instance by running

docker run -it -m 8g -p 8080:8080 liferay/portal:

Sign in to Liferay at http://localhost:8080. Use the email address [email protected] and the password test. When prompted, change the password to learn.

Next, go to the client extension’s folder in the sample workspace and run

../../gradlew clean deploy$(docker ps -lq)

This builds your client extension and deploys the zip to Liferay’s /deploy folder.


To deploy all client extensions in the workspace simultaneously, run the command from the /client-extensions folder.

Confirm the deployment in your Liferay instance’s console:

STARTED liferay-sample-iframe-1_1.0.0 [1592]

Now that your client extension is deployed, configure Liferay to use it.

Add the IFrame Client Extension as a Widget

The IFrame is added to a page as a widget.

  1. Click Edit (Edit) at the top of any page.

  2. Add the widget to the page. In the Fragments and Widgets sidebar (Fragments and Widgets), click Widgets.

  3. Find the Client Extensions → Counter App widget and drag it onto the page. Click Publish.

    Drag the Counter App onto a page.

Confirm the Counter App is working by adding some items.