Here is the code snippet to manually display the recommendations on the site. It's a bit complicated, but it should work. Basically you can use our JS API inside the postRenderFunction:   

  

postRenderFunction: function($) {
    if (!window.gr_editor_proxied) {
	
		var selectorOfTheSiteElement = "DIV.content-pane > H3"; 	// this is the selected div on the site
		var uniqDivId = "Base Reco 1_11";							// unique id of the inserted div  
		var logicId = "BASE_RECO_1_12";								// ID of the logical placement (in the brackets)
		var designId = "CP2Template_Base Reco";						// the name of the design prefixed by "CP2Template_"
	
        var containerrr0 = $(selectorOfTheSiteElement);	
        var targetDivrr0 = document.createElement("div");
        $(targetDivrr0).attr("id", uniqDivId);	
        $(targetDivrr0).addClass("reco_box");
        $(targetDivrr0).insertAfter(containerrr0);
        var rr0 = {
            type: "recommendation",
            scenarioId: logicId,	
            numberLimit: 20,
            selector: selectorOfTheSiteElement, 			
            templating: {
                targetElementId: uniqDivId,		
                templateId: designId,
            },
            callback: function(recommendation, templating) {
                console.log("entering template callback function");
                var scripts = document.getElementById(uniqDivId).getElementsByTagName("script");
                for (var i = 0; i < scripts.length; i++) {
                    try {
                        eval(scripts[i].text);
                    } catch (Error) {
                        console.log(Error);
                    }
                }
            }
        };
        _gravity.push(rr0);

        _gravity.push({
            type: "event",
            eventType: "BROWSE"
        });
    } else {
        console.info("In editor proxy mode. Will not send VIEW and BROWSE event.")
    }
}