Zap to sendgrid #1
Conversation
zap-to-sendgrid.html
Outdated
There was a problem hiding this comment.
true here means inlineOauth always, not just when mobile.
There was a problem hiding this comment.
Yeah, I like it way better than the pop-up. Maybe I'm weird. What do you think?
There was a problem hiding this comment.
Obviously you figured out that I really was referring to the comment only.
|
Hot diggigy dog! |
|
|
|
@circuitfive Maybe we should remove the If the goal is really use |
|
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 |
|
So, based in @dangerouse comments, I proposed we should choose between:
|
|
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> |
commit ac7c2d0 Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 17:19:27 2022 -0700 changed filename to hello-world commit 6fa0d5b Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 16:03:30 2022 -0700 added simple start script commit 6d299ca Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 14:58:41 2022 -0700 added link to minimum.html commit 6d9dac5 Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 14:57:00 2022 -0700 added smallest possible integration example commit 44ff860 Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 14:53:07 2022 -0700 typo commit 7c0c70b Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 14:48:24 2022 -0700 updated sources commit 76c4795 Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 14:41:14 2022 -0700 updated links and reformatted some things commit f9adcf3 Author: Jay Gibb <jay@arizonabay.com> Date: Thu Mar 24 14:08:32 2022 -0700 made links relative commit a7b07f6 Author: Jay Gibb <jay@arizonabay.com> Date: Wed Apr 19 13:49:53 2017 -0700 removed the old deep link style commit 1fd6eb7 Author: Graeme Rouse <graeme@cloudsponge.com> Date: Mon Oct 17 15:24:59 2016 -0700 examples, now with the new widget!
No description provided.