cloudsponge / contact-picker-examples

CloudSponge Widget Examples
http://www.cloudsponge.com
4 stars 3 forks source link

Zap to sendgrid #1

Open dangerouse opened 9 years ago

dangerouse commented 9 years ago

Hot diggigy dog!

dangerouse commented 9 years ago

fist pump!

raelgc commented 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.

circuitfive commented 9 years ago

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.

dangerouse commented 9 years ago

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.

raelgc commented 9 years ago

So, based in @dangerouse comments, I proposed we should choose between:

  1. Hide the deep-links until CS got loaded (make the sample more "pretty");
  2. Get ride of afterInit (make the sample more simple);
raelgc commented 9 years ago

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>&nbsp;
      <a class="deep-link" href="#" onclick="return cloudsponge.launch('yahoo');"       data-toggle="tooltip" title="Yahoo"><img       src='/img/contact-sources/yahoo.png'/></a>&nbsp;
      <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>&nbsp;
      <a class="deep-link" href="#" onclick="return cloudsponge.launch('icloud');"      data-toggle="tooltip" title="iCloud"><img      src='/img/contact-sources/icloud.png'/></a>&nbsp;
      <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">&times;</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>