Best Practice - To Embed or Not to Embed the Participant Center, That is the Question!

Hey Lee, just to confirm: are you editing custom JavaScript within the custom.js file of the Participant Center itself, or the PageWrapper?

Hi Lee,


I would say move away from having to embed the participant center in a pagebuilder -- Doing so gives you greater control on what you would like to do with your Participant Center (including those JS DOM manipulation due to iframe related browser restriction and the endless posibility of rendering it the way you want at initial load instead of manipulating afterwards (optimizing the performance), that to include making it mobile friendly which is currently not yet on vanilla version.


When you create a new PC2 instance, you can access the entire folder associated of that PC2 instance from the ftp and manipulating a "stand-alone" PC2 instance usually revolves mainly around the following 3 files within that folder:

• dashboard.html
• js/custom.js
• css/custom.css

If you are more familiar with jQuery (like me) instead of the YUI, you can tap into the "doc ready" state of the PC2 loading which is you call your functions within the following line in that custom.js
 YAHOO.Convio.PC2.Utils.require("pc2:registrationLoaded", "pc2:constituentLoaded", "pc2:configurationLoaded", "pc2:wrapperLoaded", function() {
        //YAHOO.log("Registration, Constituent, Configuration, and Wrapper are all loaded.", "debug", "custom.js");
        //call your JS functions here
    });


I would also "sanitize" / "separate" our jQuery from default Convio jQuery through the use of the noConflict such as declaring within that custom.js the following line  (and use "myJQ" instead of the regular $ or jQuery)
var myJQ = jQuery.noConflict(true);


While on the dashboard.html, you can usually call additional libraries / dependencies (i.e. bootstrap framework to make it responsive), create additional HTML elements (i.e. div containers/placeholders) to load 'reusable' pagebuilders.


You can also jQuery load CLO pagebuilders and use them as "reusables" benefitting from the S-tag  (i.e. those participant S48 tag for badges etc) as you can actually recreate the URL parameter needed to achieve those.


Here are couple examples of our stand-alone implementation , feel free to visit and register (free registration) on our walk event at
http://stepout.diabetes.org  (just launching the 2016 yesterday)  or here is the previous year implementation (based on previous year wrapper) to give you a variety of what are the potentials you could do with a stand alone PC2
http://stepout.diabetes.org/site/TR/StepOut/StepOutContent?fr_id=11140&pg=entry


So far it has been a rewarding experience and much stable solution compared to when we were embedding the PC2 in an iframe.


Hope it helps,


regards,

Daniel

LOVE the mobile-friendliness.  That is a huge drawback for the out-of-the-box PC2.  Your responsive solution looks amazing.