App iFrame Embedding

Embedding a ProcFu app using iframes is straightforward but comes with certain limitations due to browser security policies. Due to these complications, we DO NOT recommend using iframes. Instead, we suggest running your app on a custom domain and styling it to match the rest of your site.

Using iFrames

But if you HAVE to use iframes, here are the steps to do so:

• App URL: Obtain the URL of your mini app, for example, https://procfu.com/widgets/mcapp/abc123.
• Embed Code: Insert the iframe into your website with the mini app URL:

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

• Dynamic Height: To adjust the iframe height dynamically based on its content, add the iframe fixer JavaScript to your page:

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

Handling Authentication

If your mini app uses Podio or Google for user authentication, remember that these services do not allow their login pages to be displayed within iframes.

As a solution enable the “IFramed” option in your app configuration. This modification changes the authentication behavior to show a login button instead of auto-logging in. When users click the login button, a new window opens for authentication, which closes automatically upon successful login, prompting the original page to reload.

Embedding in Notion

To embed your ProcFu app within Notion, use the embed option provided by Notion.

Since Notion embeds function similarly to iframes, ensure you set the “IFramed” flag in the ProcFu app as described in the authentication section above.

This method provides an excellent way to embed interactive sheets of Podio data directly into your Notion pages. Instead of attempting to synchronize a Notion table with a Podio app, simply embed a ProcFu app for seamless integration.

iFrame Browser Compatibility

iFrames may not function correctly in private/incognito browser sessions or in Safari. This is due to enhanced security measures implemented by browser vendors around iframes.

Known iFrame Embed Error: CSRF Token Mismatch

This issue commonly arises with apps embedded using iFrames and tends to be specific to individual users, often caused by factors such as network conditions or browser settings. Unfortunately, there is little we can do from our end to resolve such issues. As previously noted, we do not recommend using iFrames for embedding due to these complexities, which are created by browser security measures that are beyond our control.