How to Integrate Portlet as Widget in Liferay to any Website/Application?

Flexibility of allowing the integration of widgets to any third party website/application increases the reach of application as well as provides the insights about working strategies.

Many social applications such as Facebook, Google+ and LinkedIn provide the code snippet and it is the common practice for developers to embed a widget plug into any third party website using that code snippet.

Applications developed using Liferay, can also handle Widget Sharing along with customized view, very easily.

Publishing Liferay Application widgets to third party applications

The portlet applications developed for Liferay can be considered as widgets. Liferay provides an out of the box (OOTB) feature for publishing its portlets to other websites or applications. Simply by using this portlet sharing feature, we can plug our portlets to other websites virtually without any efforts.

In portlet configuration screen, Liferay provides “Sharing” tab.
You need to just copy-paste the code from “Any Website” section to your website’s page. This code will create an embedded iFrame in your webpage and import the portlet from Liferay portal.
In above example, we embedded liferay’s “hello-soy-portet” into other website. The steps are very simple as shown above.
To enable the custom views of the portlet for different users, we must allow the user to generate the embeddable code snippet after the configuration parameters are set.

Let’s understand with an example of weather portlet:

Suppose we have created a weather portlet in our Liferay portal and we want our users to be able to embed this weather portlet on their own website or portal.

Additionally, the user should be able to set:

The unit of the temperature (Fahrenheit or Celsius)
A boolean value to indicate if humidity measure should be included or not
Language id

Following are the steps to achieve this functionality:

In our weather portlet, we can provide a plugin code generation screen, where the user can set the parameters and based on that, the portlet will generate code snippet.
Once the user submits the configuration form, we store the configuration values in database and generate unique id (UUID) of this record.
We can add the unique id in Liferay’s code snippet as a request parameter of URL. The code snippet would look something like this:

Users will grab this snippet and add to the desired webpage(s) of their websites.
In the portlet’s render phase, you can get the “cfg” parameter. Get the configuration record based on that UUID.
Render the portlet based on the configuration saved by user.
This way all users will be able to configure and include the weather portlet in their own websites.

If you still have any query regarding how to enable widget integration for Liferay Application, you can discuss with our Liferay consultant! or send your query to info@azilen.com

You may find this resource useful: How to Integrate Portlet as Widget in Liferay to any Website/Application?