Cannot read property 'recipeId' of undefined

[gradedcatfood]

I can't get the widget to open inside of my modal.

I get the following error: "Cannot read property 'recipeId' of undefined"

I've followed the example and cant get the basic window to open.

I have included the pio.latest.v2.js from the CDN right before this js file with the following:

PIO.config({
// required -- set the api key
recipeId: "hidden just in case, I have my stage key in here",
// set the environment to stage
url: "http://staging.widget.print.io/widget/"
});


jQuery(function ($)
{
$(document).ready(function ()
{
    openWidgetOnClick();

    function openWidgetOnClick()
    {
        $('.btn-postcard').on('click', function (e)
        {
            e.preventDefault();
            console.log('button click');

            //this will open the widget-- easy!
            PIO.open();
        });
    }
});
});

I am getting my log of "button click" but then get

open: undefined
Uncaught TypeError: Cannot read property 'recipeId' of undefined

It it somehow the PIO object is not being instantiated correctly for some reason?

So it seems that not using PIO.config was for some reason not working:

Got this to work but still having issues with PIO.config, but PIO.open works:

(function ($)
{
    $('.btn-postcard').on('click', function (e)
    {
        e.preventDefault();
        console.log('button click');

        //this will open the widget-- easy!
        PIO.open({
            recipeId: "key-here",
            url: "http://staging.widget.print.io/widget/",
        });
    });
})(jQuery);