Integration of external websites via iFrames with pwa-builder.io

 In Blog

your pwa – 3 simple steps to insert a web page using the iFrames:

News appear a lot on the Internet & new needs of users are constantly arising, which can also be integrated into the web presence of your company. An effective way to integrate external content is <iFrame>. Existing sites or a radio can be easily integrated into your apps.

Step 1 Content module

  • Create a Content module and click on the source code button.

Step 2 Insert source code:

  • In the source view, please insert the following code:
<div style="-webkit-overflow-scrolling: touch;overflow-x:hidden;overflow-y: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;"><iframe src="https://pwa-builder.io/" style="width:100%;height:100%;border: none;"></iframe></div>

Step 3 Insert desired url:

Replace the URL “https://pwa-builder.io/ with a direct link to the page you want to include. Notes on use: Please note that despite the large number of compatible sites, there are some providers that block the use of <iFrames> so that embedding is prevented. Furthermore, the page to be embedded must have an SSL certificate (https://) because it can be embedded but not displayed correctly.

The complete content of the website is embedded by <iFrame> .

  • When displaying a iframe, the content of the entire website is taken over.
  • It is not possible to show only parts of a website as or to hide various parts of it.

With the pwa-builder you can insert as many iFrames as you like.

pwa builder special tip:

Your website is increasingly visited by smartphone users. In some industries, up to 80 % of visitors are mobile. Therefore, a mobile optimized website is very important for companies today. With pwa-builder.io you create a progressive web app.

Recent Posts

Leave a Comment