Embedding code/ iFrame/ Webview

[ap1]

I am trying to use the Webview component and putting an iframe code but it doesn’s load anything. Am I supposed to do anything more than putting the URL or the iframe code in the Webview’s URL field?

Am I really unlucky here or what? After recently joining Adalo, my first encounter was the deck swiper component which I got to know is not working only after wasting quite a bit of time. And now the Webview component also doesn’t seem to work.

[Victor]

Hi @ap1,

Webview is used to show external websites, you need to put a URL link there. It works similarly to a browser. Just in case - not all websites are displayed correctly using webview, some restrict it.

Generally speaking, I don’t think it is possible to put iframe code inside Adalo app. You can put some HTML code using HTMLRenderer component from marketplace, though it doesn’t allow any scripting languages to be used.

Best regards, Victor.

[ap1]

Does Webview support iFrame or not ??? Because I have tried iframing multiple things but none loads here.

Also, even a simple google.com is also not working -

[Victor]

Dear @ap1,

As I stated above, webview is used to show external websites. You need to put a URL link there.

Iframe is a piece of HTML(+JS) code, it is basically a webpage, which needs to be stored on some webserver and transferred to the client (=browser).

Webview displays content, taken from some web server. So, Webview can’t be used to render iframe.
Also, don’t forget to add the protocol before the website name (http:// or https://, see below).

As for google.com not working - this is why I have mentioned that not all websites could be displayed correctly. And it does not depend on the webview as it is blocked on the website itself.
For example, here is the screenshot series which I made with various sites:

May be if you explain what you would like to achieve, someone can advice possible way to implement it on Adalo.

Victor.

[ap1]

Thanks for a detailed response @Victor. I appreciate it. I understand the difference between a website and an iFrame, but was somehow (??) convinced that the WebView component will support iFrames. Sorry about that, and thanks for clarifying that it does not.
It’s a bit surprising for me though. How else we include an iFrame. You asked for an example. Say I have an input form in Typeform which I want to embed in the Adalo app. Or I have an Airtable view (of records) that I need to show. These tools provide embedded code that we can use in any website/ web application.
Are you suggesting that in Adalo, everything including the inputs, the database, and all functionality must reside in Adalo in the absence of such iFrame support?

[Victor]

Hi @ap1,

Pleasure to help!
Answering further - may be your understanding of Adalo capabilities is a bit different from what it is designed for Primarily, it was created as a mobile app builder, so better to try thinking how mobile apps work. In mobile apps there are no iframes (as there are no HTML pages). An iframe is needed when you’d like to include the HTML content from some other site to your site, so we’re talking about web pages here; iframe is like a “container” for another page.

But in Adalo there is a container already… which is a webview For example, here is the Airtable iframe setup:

And here is what I get when I simply put the link itself

https://airtable.com/embed/shrSixgmiVdAk9lgH?backgroundColor=cyan&viewControls=on

into the webview from my example app:

(I’m viewing this from desktop, so airtable content is displayed in a desktop mode; checked PWA on my phone - displays correctly. Not sure how it will work in native app, would be interesting to test).

Same story with Typeform - the best option will be trying to include this form as a link directly to Webview.

As for your other question - again, try to think from the mobile app’s point of view.
Imagine some e-commerce mobile app. It doesn’t use iframes to display product data, ad banners, or user questionnaires. It gets all the information from the backend server(s) - could be its own servers, could be 3rd party servers. And then it renders the data to the user based on this app’s own built-in logic.
In Adalo you can create an app which have the frontend screens and logic, as well as a backend infrastructure to store the data. Also you can use APIs to connect to other services - either to store the data (this is called External Collections, and Airtable could be used), or to process it (for example, send email to new subscriber via SendGrid).

Hope this was helpful

Best regards, Victor.

[ap1]

Hi @Victor, Thanks again. This is very helpful. But I have two more comments -

1. Will explore the direct URL route as you shared. Currently I am getting “Airtable refused to connect” error but that maybe something to do with my setup. Will explore this.
2. Mobile apps can very well have iFrames. I have seen many. As an example, you may want to think of an app for small businesses, say for invoicing or time tracking, and then you may want to offer a Loan solution through a partnership. The Loan company can provide you their full application flow in an iFrame because they want to control the experience. In this case, the mobile app will simply load the iFrame and the user will go through the Loan app experience while not leaving the mobile app.
   Happy to learn more if you think I am getting all this wrong.

[Victor]

Hi @ap1,

I knew that you would mention the apps accessing the other companies’ websites

Just to clarify: iFrame is an HTML element: <iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDN

Webview is a separate “minibrowser” which displays web pages: WebView  |  Android Developers

In some frameworks like Electron both may exist, but this is a specific case. I don’t want to start a long argument, you can find a lot of interesting (and sometimes contradictive ) information by googling “webview vs iframe”.

But anyway: from mobile app perspective, in my personal opinion, I’d suggest avoiding using such type of integrations unless absolutely needed. The biggest problem as for me is organising the data flow. If the “Loan company” from your example forces the client to fill in application only on their website, then appears the problem of getting data back to your app. And also, you as an app owner don’t have any control over what is displayed in this 3rd party webpage.

More and more companies start to implement public APIs for their services, which brings more control over the data both for them and the app owner - as for me this will be the future.

Best regards, Victor.