ProcFu Mini App Embedding Tips

ProcFu’s new mini apps have taken off with a bang. It’s great to see how excited users are about this feature.

Not only can you easily (point & click) create mobile friendly apps and customer portals, but also specialized team apps from any app in Podio.

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

IFrames

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

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

2. 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, click on the “+a” link in the footer of the app editor to bring up the advanced settings

Then 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 mini 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.