Open dangerouse opened 9 years ago
@circuitfive Maybe we should remove the afterInit
callback. The only thing it's doing is to add the href=#
, but we can hardcode this in each link and make the example simpler.
If the goal is really use afterInit
to avoid make the icons clickable while CS is not properly loaded, so we should move the onClick
handlers from the links to the afterInit
.
I just followed the code sample that we're giving to all of our customers. If putting the onClick handlers into the afterInit is the right way to do it, then we should update our documentation accordingly. I'm guessing that @dangerouse has a good reason for using the dynamic href to make the links clickable.
Re: afterInit and the onClick events.
I'm glad we're talking about this. The intent is just to demonstrate best practices, not to be prescriptive about how all customers must solve the problem. The problem is that we cannot launch a popup window until after the widget initializes. Some customers choose to display a spinner instead of a link, some may choose to hide the link altogether, others may ignore it and let the user see an popup blocker warning in their browser. There's many ways to skin this cat and we're just showing one. This topic would make a good blog post featuring at least 3 alternative samples.
Another point about this example is that because you are using inlineOauth:true
, you actually don't need to delay the deep links becuase launching 'gmail'
et al will result in a page redirect rather than opening a popup window. I'm glad that you prefer the inline, I think it needs to become the default for our widget 1.5.
So, based in @dangerouse comments, I proposed we should choose between:
afterInit
(make the sample more simple);An example of a simple version:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Zap to SendGrid</title>
<!-- You can delete everything above this comment, it's just here to make the helper pretty. -->
<script type="text/javascript">
// This is the main CloudSponge JavaScript snippet, you can replace CLOUDSPONGE_EXAMPLE_KEY with your
// own key after you buy a license. This key will only work on localhost.
(function(u){
var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
})('//api.cloudsponge.com/widget/CLOUDSPONGE_EXAMPLE_KEY.js');
</script>
<script type="text/javascript">
// This is where you can configure the behavior and style of the widget
// http://www.cloudsponge.com/developer/#the-contact-importer-widget
window.csPageOptions = {
mobile_render: true,
inlineOauth: true, // Inline oauth consent
selectAccount: true, // Display account selection screen during the OAuth
afterSubmitContacts:function(contacts, source, owner) {
// http://www.cloudsponge.com/developer/#callbacks-afterSubmitContacts
var body = $('#rafModal .modal-body');
// Capture the owner information
var owner_first_name = (owner && owner.first_name) || "Your friend";
var owner_email = "(" + (owner && owner.email && owner.email[0] && owner.email[0].address) + ")" || "";
// Open modal
$('#rafModal').modal({backdrop:'static', keyboard:false});
// Now for each contact, post to the Zapier webhook URL!
for (var i = 0; i < contacts.length; i++) {
var email = contacts[i].selectedEmail();
var first_name = contacts[i].first_name || "there";
var zap = "https://zapier.com/hooks/catch/3r7335/";
var data = {
'email': email,
'first_name': first_name,
'owner_email': owner_email,
'owner_first_name': owner_first_name
};
$.post(zap, data);
body.append('<p>' + email + ': <span class="text-success">✔</span> sent!</p>');
}
body.prepend("<p>We've sent referral emails to " + contacts.length + " of your friends.</p>");
return false;
}
};
</script>
</head>
<body>
<div class="container">
<h1>Zap to SendGrid</h1>
<p>A quick refer-a-friend feature powered by Zapier and SendGrid.</p>
<!-- Call cloudsponge.launch will start the import process -->
<p>
<a class="deep-link" href="#" onclick="return cloudsponge.launch('gmail');" data-toggle="tooltip" title="Gmail"><img src='/img/contact-sources/gmail.png'/></a>
<a class="deep-link" href="#" onclick="return cloudsponge.launch('yahoo');" data-toggle="tooltip" title="Yahoo"><img src='/img/contact-sources/yahoo.png'/></a>
<a class="deep-link" href="#" onclick="return cloudsponge.launch('windowslive');" data-toggle="tooltip" title="Outlook.com"><img src='/img/contact-sources/outlook.com.png'/></a>
<a class="deep-link" href="#" onclick="return cloudsponge.launch('icloud');" data-toggle="tooltip" title="iCloud"><img src='/img/contact-sources/icloud.png'/></a>
<a class="deep-link" href="#" onclick="return cloudsponge.launch('aol');" data-toggle="tooltip" title="AOL"><img src='/img/contact-sources/aol.png'/></a>
</p>
<!-- Zap! Modal -->
<div class="modal fade" id="rafModal" tabindex="-1" role="dialog" aria-labelledby="rafModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="rafModalLabel">Thank you!</h4>
</div>
<div class="modal-body">
<!-- Starts off blank, this div will be populated by the loop inside the afterSubmitContacts callback above -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hot diggigy dog!