Forem

Cover image for Embed Anything! Introducing the New iFrame Widget
Vihar Kurama for Appsmith

Posted on

Embed Anything! Introducing the New iFrame Widget

We’re excited to announce the new iFrame widget on Appsmith’s latest release (v1.6). With this, we can now embed content from other sources, such as web pages, videos, and scores of other content formats on Appsmith applications within no time!

https://youtu.be/4jXTyxUhnP0

At Appsmith, as an open-source organisation, we believe in the power of community and take member requests seriously. It’s also a part of our commitment to building in public. This iFrame feature was highly requested by our community members, prompting us to create an issue on our Github repository.

Iframe Issue.png

Today, we want to talk a little bit about how we got to prototyping and then delivering this widget.

First, we listed the basic requirements for an iFrame widget and the other specific functionalities we wanted to include. And yes, all the ideation and prototyping are open to the public; you can check out the Figma files! One of our contributors, Paul Li, volunteered to build the widget. Li’s submissions were then thoroughly tested on our deploy previews and then pushed into production. A working example of the collaborative engineering practices we follow here at Appsmith! 🙌

In case you’re wondering about how to set up Appsmith in the local environment and start contributing, this detailed guide will help you!

Iframe Peek.png

Using the iFrame widget

You can add the find the iFrame under the widget sections from the entity explorer inside the application. Drag and drop it onto the canvas to use it. By default, you’ll see a Wikipedia webpage, and you can change this by opening the property pane and adding a new link to the ‘Source’ property. You can also update the ‘label’ property to assign a name (title) to the content page that you wish to embed.

Iframe GIF.gif

Handling Message Events on iFrame Widget

The iFrame widget will allow you to trigger a value when a message event is received. This can be handled by configuring the onMessageRecieved property.

Here’s how it works:

  • The iFrame widget listens to the message event of the window for catching the message from the iFrame embed. This event can be registered in the event listener.
  • This means that the iFrame widget is ready to receive messages from the iFrame embed.
  • In the iFrame widget, the defined ‘onMessageRecieved’, is just a function that will execute any action set on receiving a message.

In the future, Appsmith will also provide an API that will let you access the message received from the iFrame embed.

Here is another example with a similar use case. When the developer provides auto-login to another website that they have embedded inside their new website.

Note that the control of the embedded website is paramount here and also this approach is insecure. We have allowed this assuming that the developer understands the security issues and deals with them appropriately.

Handling URLs on IFrame Widget

You can handle certain actions when the Widget’s URL is changed using the onURLChanged property.

Here’s an example:

Let’s say you have loaded user data in the table and want to display details from there onto the website. When you click on a particular row on the table, you can change the iFrame URL to show the rest of the details on your own website using the onURLchanged property. We can also bound a trigger to execute an action whenever the URL is changed.

Up.png

Hope you’ll build some super cool applications using the iFrame widget and Appsmith! If you do, don’t forget to tell us about it, we would love to feature your work! Your contributions and feedback help us make Appsmith better and we really appreciate it.

Join the community! Come chat with us on Discord, or jump in on Github directly!

You can also follow us on Twitter and Linkedin.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay