Passing Information from Justuno Popup to your site

First how familiar would you say you are with jQuery?  Below are some methods we've baked into our platform to allow you to pass information or call javascript to and from your site and the Justuno Overlay.

First here are some tidbits you'll need to understand about our system.  

  • We do make jQuery available on both your own site and our iframe overlay, but we do it in a way that it will not conflict with jQuery you might already have installed on your site.  Because of that you must reference jQuery via the "jju" variable, so instead of $(this).xyz you would write jju(this).xyz.
  • We have two different Javascript windows and two different CSS windows that you can edit to further customize your promotions.  Each JS/CSS is either labeled with "Popup" or "Tab".  The "Popup" windows are to add code inside of our Justuno iFrame while the "Tab" windows are to add code to your own site easily for those promotions.  DO NOT use the actual JS or CSS opening/closing <script> and <style> tags as we automatically put then in the code.

Whew! Now that we got that explanation over with we can move on to some actual example code: 

Here's how you can call javascript in either your own site or the Justuno Overlay Iframe when someone engages with the promotion:

 

Method 1 (simple)
This method is much easier if you don't need to pass anything other then the email submitted and engagement type.

Basically whenever an engagement happens (email submission, form submission, social follow/like/share...) the function named ju_callback() will be fired on both your own site as well as the Justuno Overlay Iframe if it exists in them.  So if you add this function below to your TAB JS window then it will be called on your own site.  If you add it to the Overlay JS window it will be called within the Justuno Iframe.

 

 

function ju_callback(t,email,coupon){

// do something /* The following is just some explanation of the information passed to this function.
for instance if this is in the Overlay JS and you wanted to do something with ju_qs("customvar") which is equal to your customvar querystring when someone engages with the promotion overlay. Here's where you would do it. There are 3 variables passed into this function. The first variable "t" will equal the integer value of the engagement type. Below is a list of the integer values to strings for reference:

1 = Facebook
2 = Google Plus
3 = Twitter TWeet
4 = Email Signup
5 = LinkedIn Share
6 = Twitter Follow
7 = Pinterest Follow
8 = Instagram Follow
9 = Youtube Subscribe
10 = Incentivized Form
11 = VK Follow
12 = Reddit Subscribe
13 = Google Follow
14 = LinkedIn Follow
15 = Intro Continue Click
16 = Unlocked Click

The second variable "email" will equal the email address entered if it's a newsletter signup promotion.

Finally, the "coupon" variable will equal the coupon code given to your user. This will only be populated if you are using the coupon layer. This comes in handy if you need to automatically apply the coupon code to your user's session when the coupon code is a unique coupon code. */
}

 

Method 2 (advanced)
This method allows you to send any type of information received/derived from your promotion to your site.  We use a method called postMessaging which allows us to send arbitrary information to your site's javascript from our pop up iframe.  A great example of this approach is how to add items to the cart from the Justuno Promotion here

The following example code would go in the Pop Up JS portion of the custom code.  You will need to review/edit some of the code to match your needs

 

$(function(){

// this next line is the click handler we are creating to attach this event to any cta in the popup promotion $(document).on('click', '.design-layer[data-layertype="standard-button"]', function(){

// the only key/value below that is required is the 'juCustom':true. keyname1 and keyname2 below are just examples var pass_data = { 'juCustom':true, 'keyname1':'value',
'keyname2':'value', }; $.postMessage( JSON.stringify(pass_data), parent_url, parent );
});
});

 

The following example code would go in the Tab JS portion of the custom code.  You will need to review/edit some of the code to match your needs

 

window.juIframeCatch = function(data){
  // do something with the values you just sent to your site's javascript
var keyname1 = data.keyname1;
var keyname2 = data.keyname2; }
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.