How to Auto-Install App Packs in a Customer's Podio Account

If you’re a Podio Partner and have created App Packs that you wish to sell to your customers, here’s how.

Most simple e-commerce plugins for websites have a confirmation page after a sale is completed. Using a ProcFu HTML Widget, you can allow customers to install an app pack from a web page after the purchase transaction is completed.

Unfortunately you cannot iframe this widget because Podio doesn’t like to be framed in, but a simple link to a new page will do the trick.

The Mechanism

The way we go about this process is pretty simple:

Customer makes a purchase on your website and you get the confirmation number or transaction ID

We use the confirmation number as a user ID for an oAuth API service in ProcFu to connected directly to Podio on a new API key

We use a PF code block to:
1. Add the customer to a workspace in our Org so that we can install private app packs to his space
1. Install the app pack using an oAuth call with our own Podio API Key
1. Remove the customer from our space again (optional), and redirect him to refresh his GF account so that flows get imported.

Create an API key for Podio

We want the customer to see your company details when installing the app pack, so you will need to create an API key in Podio.

Go to Account Settings > API Keys in Podio, and create an API key using procfu.com as the domain:

Since we will need the ID of our new HTML Widget to set up the API service in ProcFu, we’ll need to create the HTML Widget first.

In ProcFu on the Account page, navigate to “Website Widgets” and create a new HTML Widget:

Remember the Code Block Name you chose as you’ll need this later when creating the code to install the app pack.

After saving, you can see the ID of the newly created widget:

Make note of this widget ID.

Next, in your ProcFu account, go to API Services on the Account page, and click on the “Add API” button:

And fill in the details for your API Key from Podio. The Client Secret will be from the Podio API key you just created, and the success and failure URLs will be https://procfu.com/widgets/html/{widget_id} with ?ok=1 and ?oops=1 as parameters respectively:

Create the Code Block

To create the Code Block, click on “Code” in ProcFu, and create a new code block by clicking on “+ Create New” in the sidebar.

Be sure to give the code block the same name that you specified when you created the HTML Widget!

The full source for the code block can be found here.

Simply copy and paste it over.

The important bits are all in the code commented as configuration. You’ll need to edit this before using:

// configuration
$api_service = "ppdemo"; // the name you gave your podio integration on the Account page under "API Services"
$share_id = 12345; // ID of the app market app pack to install
$widget_id = "abckbbmtFVya1"; // ID of the PF website widget serving this code block
$my_customer_space_id = 234567; // podio space to add the customer to
$remove_customer_after = true; // should the customer be removed from the above space after install?
$sucess_message = '<h3>Installation Successful</h3>' .
    '<p>The Podio Apps have been installed in your selected workspace. ' .
    'To complete the setup and install the Flows, please Refresh your GlobiFlow account ' .
    'by clicking <a href="https://secure.globiflow.com/buildtree.php" target="_blank">THIS LINK</a>.</p>' .
    '<p>Thank you for choosing MYCOMPANYNAME</p>';
// end configuration

Feel free to also change any styling etc to make the resulting HTML look better. I’ve minimized code for ease-of-reading for demonstration purposes here.

Hooking it up

The last thing you need to do is to redirect the customer to the HTML Widget with the confirmation number or transaction ID to install the app pack.

Here is some sample code to insert into your thank you page to get you started:

<h3>Thank You</h3>
<p>You will now be redirected to install the App Pack in your Podio Account.</p>
<p>If you are not automatically redirected, click <a id="pfinstall">here</a>.</p>

<script>
    var param_name = "confirmation_number"; // url parameter on your thank you page with the confirmation number or transaction id
    var widget_id = "abckbbmtFVya1"; // PF HTML Widget ID
    var txnid = (location.search.split(param_name + '=')[1] || '').split('&')[0];
    var url = "https://procfu.com/widgets/html/"+widget_id+"?txnid="+txnid;
    document.getElementById("pfinstall").href = url;
    window.setTimeout(function(){ document.location.href=url; }, 3000);
</script>

Note: Change the name of the url parameter and widget id to your own.

The Result

The result is quite impressive. On your confirmation page, the customer will be shown your usual thank you message along with the above redirect info:

After which they’ll be asked to authorize Podio:

After which they’ll be asked to select which Workspace to install the app pack in:

After which they’ll be asked to refresh their GF space (with link to do so - you could even add JavaScript to auto-redirect them):

And once GF has refreshed, any Flows used in the App Pack should be installed in the user’s account.