ProcFu App Embedding Tips

Embedding an app is super simple, but there are a few caveats.

⚠️

Note that IFrames will not work properly in private/incognito sessions or in Safari. Browser vendors are continually increasing security around iframes. It is best to run your app on a custom domain and just style it like the rest of your site (see 🌐Custom URLs and Domains).

But if you HAVE to use iframes ...

IFrames

If you’ve created a customer portal for your customers and want it embedded on your website, iframes is the way to go.

Get the URL of your mini app, eg “https://procfu.com/widgets/mcapp/abc123”

Add an iframe tag to your website with the mini app URL

<iframe src="https://procfu.com/widgets/mcapp/abc123" style="width: 100%; border: 1px solid #ccc"></iframe>

If you want your iframe height to adjust to the content of the iframe itself, also include the iframe fixer javascript in your page

<script src="https://procfuwidgets.b-cdn.net/pfui/pf_iframe_fixer.js"></script>

Authentication

If you’re using Podio or Google to authenticate users in your mini app, you may run into issues in an iframe because neither Podio nor Google allow their login pages to be framed.

In order to work around this, select the “IFramed” option

What this does is change the authentication to not auto-login, but instead show a login button, which, when clicked, will open a new window to allow the user to log in. This login window will then auto-close on log in, and the original page will reload itself.

Notion

In Notion, you should choose the embed option

Because Notion Embeds are basically iframes, you would still need to make sure that you set the “IFramed” flag in the ProcFu app as per the authentication section above.

This is a great way to embed interactive sheets of Podio data in your Notion pages. No need to try sync a Notion table with a Podio app - just embed a mini app.