Skip to content

Zap to sendgrid #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dangerouse wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Zap to sendgrid #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f6e1e4b
WIP - proof of concept of zap to sendgrid hack
circuitfive Oct 29, 2015
deae1dd
Finish Zap to SendGrid hack (https://github.com/cloudsponge/cloudspon…
raelgc Oct 29, 2015
896ac2d
Removing images
raelgc Oct 29, 2015
72e72bb
Updating images path
raelgc Oct 29, 2015
f000e3a
lots of little changes, first release candidate
circuitfive Oct 30, 2015
ab0c354
Updating comment
raelgc Oct 30, 2015
969948c
Squashed commit of the following:
circuitfive Mar 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,26 @@
# CloudSponge Examples
This is a public library of fully functional examples of the CloudSponge widget. You can deploy any of these html files into your `localhost` environment to start tinkering around with the product.

## basic.html
The simplest way to integrate the CloudSponge widget is to add an anchor tag with the <code>cs_import</code> class somewhere on your page.
Hosting this directory is straightforward if you have python installed on your system:

* open a terminal
* cd to this directory
* run `python -m SimpleHTTPServer 5000`
* open [localhost:5000/](http://localhost:5000/) in a browser

## Basic Installation

The simplest way to integrate the CloudSponge widget is to add an anchor tag with the <code>cloudsponge-launch</code> class somewhere on your page.

* [Run /hello-world.html](/hello-world.html)
* [Run /basic.html](/basic.html)
* [Documentation](https://www.cloudsponge.com/developer/contact-picker/basic-installation/)

## Deep Links

## deep-links.html
You can skip the main menu and let your users go straight to the contact source that they want by adding these deep links to your page.

Most people replace these text links with graphics. You can <a href="http://www.cloudsponge.com/img/developer/icon-set.zip">download some icons here</a> if you don't have your own set.
* [Run /deep-links.html](/deep-links.html)
* [Documentation](https://www.cloudsponge.com/developer/contact-picker/linking-options/deep-links/)

Most people replace these text links with graphics. You can [download some icons here](https://www.iconfinder.com/cloudsponge) if you don't have your own set.
36 changes: 17 additions & 19 deletions basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,35 @@
<title>CloudSponge Basic Installation</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, don't edit it.
(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 src="//api.cloudsponge.com/widget/localhost-only.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 = {
textarea_id: 'contact_list',
mobile_render: true,
inlineOauth: 'mobile',
selectAccount: true,
include: ["email"],
sources: ['gmail','yahoo','windowslive','icloud','aol','linkedin']
};
cloudsponge.init({
sources: ['gmail','yahoo','outlookcom','office365','icloud','aol'],
// display only emails in the textarea
include: ["email"]
});
</script>
</head>
<body>
<div class="container">
<h1>Basic Integration</h1>
<p>The simplest way to integrate the CloudSponge widget is to add an anchor tag with the <code>cs_import</code> class somewhere on your page.</p>
<p>The simplest way to integrate the CloudSponge widget is to add an anchor tag with the <code>cloudsponge-launch</code> class somewhere on your page.</p>

<!-- Any link with a class="cs_import" will start the import process -->
<a class="cs_import">Add from Address Book</a><br />
<a class="cloudsponge-launch">Add from Address Book</a><br />

<p>The easiest way to populate an element is to give it a class or <code>cloudsponge-contacts</code>.</p>
<!-- This textarea will be populated with the contacts returned by CloudSponge -->
<textarea placeholder="Type email addresses separated by commas or select them from your address book by clicking the link above." id="contact_list" style="width:450px;height:82px"></textarea>
<textarea class="cloudsponge-contacts" placeholder="Type email addresses separated by commas or select them from your address book by clicking the link above." id="contact_list" style="width:450px;height:82px"></textarea>

<div>
<a href="/">
Back
</a>
</div>

</div>
</body>
</html>
67 changes: 19 additions & 48 deletions deep-links.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,68 +9,39 @@
<title>CloudSponge Deep Link Installation</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, don't edit it.
(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 src="//api.cloudsponge.com/widget/localhost-only.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 = {
textarea_id: 'contact_list',
mobile_render: true,
inlineOauth: 'mobile',
selectAccount: true,
include: ["email"],
sources: ['gmail','yahoo','windowslive','icloud','aol','linkedin'],
// set skipSourceMenu to true when using deep links for a more consistent UX
skipSourceMenu:true, // suppresses the source menu unless linked to directly
// delay making the links that launch a popup clickable
// until after the widget has initialized completly. a popup window must
// be opened in an onclick handler, so we don't support queueing these actions
afterInit:function() {
var i, links = document.getElementsByClassName('delayed');
for (i = 0; i < links.length; i++) {
// make the links that launch a popup clickable by setting the href property
links[i].href = "#";
}
// if this is not a mobile browser, we can show and enable the desktop-only links
if (!cloudsponge.mobile) {
links = document.getElementsByClassName('desktop-only');
for (i = 0; i < links.length; i++) {
// show it
links[i].style.display = "";
// make it clickable
links[i].href = "#";
}
}
}
};
cloudsponge.init({
sources: ['gmail','yahoo','outlookcom','office365','icloud','aol'],
include: ["email"]
});
</script>
</head>
<body>
<div class="container">
<h1>Deep Link Integration</h1>
<p>You can skip the main menu and let your users go straight to the contact source that they want by adding these deep links to your page.</p>
<p>Most people replace these text links with graphics. You can <a href="http://www.cloudsponge.com/img/developer/icon-set.zip">download some icons here</a> if you don't have your own set.</p>
<p>Most people replace these text links with graphics. You can <a href="https://www.iconfinder.com/cloudsponge" target="_blank">download some icons here</a> if you don't have your own set.</p>

<!-- Any link with a class="cs_import" will start the import process -->
<a class="deep-link delayed" onclick="return cloudsponge.launch('gmail');">Gmail</a><br />
<a class="deep-link delayed" onclick="return cloudsponge.launch('yahoo');">Yahoo</a><br />
<a class="deep-link delayed" onclick="return cloudsponge.launch('windowslive');">Outlook.com</a><br />
<a class="deep-link delayed" onclick="return cloudsponge.launch('icloud');">iCloud</a><br />
<a class="deep-link delayed" onclick="return cloudsponge.launch('aol');">AOL</a><br />
<a class="deep-link desktop-only" style="display: none;" onclick="return cloudsponge.launch('linkedin');">LinkedIn</a><br />
<a class="deep-link desktop-only" style="display: none;" onclick="return cloudsponge.launch('addressbook');">OS X Contacts</a><br />
<a class="deep-link desktop-only" style="display: none;" onclick="return cloudsponge.launch('outlook');">Outlook</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="gmail">Google Contacts</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="yahoo">Yahoo</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="outlookcom">Outlook.com</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="office365">Office 365</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="icloud">iCloud</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="aol">AOL</a><br />
<br />

<!-- This textarea will be populated with the contacts returned by CloudSponge -->
<textarea placeholder="Type email addresses separated by commas or select them from your address book by clicking the link above." id="contact_list" style="width:450px;height:82px"></textarea>
<textarea class="cloudsponge-contacts" placeholder="Type email addresses separated by commas or select them from your address book by clicking the link above." style="width:450px;height:82px"></textarea>

<div>
<a href="/">
Back
</a>
</div>
</div>
</body>
</html>
32 changes: 32 additions & 0 deletions hello-world.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<body>

<!--
Any widget integration must do three things:
1) include the widget script,
2) provide a way for the end user to launch the widget and,
3) do something with the user's contacts.
This basic integration does all.
-->

<!--
Include the script anywhere on your page, usually in the head
(don't forget to replace `localhost-only` with your CloudSponge key)
-->
<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>

<!--
#2 provide a way for the end user to launch the widget:
Any link with a class="cloudsponge-launch" will start the import process.
-->
<a class="cloudsponge-launch">Add from Address Book</a>

<!--
#3 do something with the user's contacts:
This textarea will be populated with the contacts returned by CloudSponge.
-->
<textarea class="cloudsponge-contacts"></textarea>

</body>
</html>
26 changes: 26 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<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://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.4.3/showdown.min.js"></script>
</head>
<body>
<div class="container" id="content">
</div>
<script>
$(function(){
var disableCacheMatch = window.location.search.match(/refresh/),
options = {};
if (disableCacheMatch) {
options.cache = false;
}
$.get('README.md', options).then(function(text, content, xhr) {
var converter = new showdown.Converter();
$('#content').html(converter.makeHtml(text));
});
});
</script>
</body>
</html>
4 changes: 4 additions & 0 deletions start.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/bin/bash

python -m SimpleHTTPServer 5001 &
open http://localhost:5001
113 changes: 113 additions & 0 deletions zap-to-sendgrid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!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
// Set skipSourceMenu to true when using deep links for a more consistent UX
skipSourceMenu:true, // suppresses the source menu unless linked to directly
// Delay making the links that launch a popup clickable
// until after the widget has initialized completly. a popup window must
// be opened in an onclick handler, so we don't support queueing these actions
afterInit:function() {
// http://www.cloudsponge.com/developer/#callbacks-afterInit
var i, links = document.getElementsByClassName('delayed');
for (i = 0; i < links.length; i++) {
// Make the links that launch a popup clickable by setting the href property
links[i].href = "#";
}
},
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>

<!-- cloudsponge.launch will start the import process -->
<a class="deep-link delayed" onclick="return cloudsponge.launch('gmail');" data-toggle="tooltip" title="Gmail"><img src='/img/contact-sources/gmail.png'/></a>&nbsp;
<a class="deep-link delayed" onclick="return cloudsponge.launch('yahoo');" data-toggle="tooltip" title="Yahoo"><img src='/img/contact-sources/yahoo.png'/></a>&nbsp;
<a class="deep-link delayed" 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 delayed" onclick="return cloudsponge.launch('icloud');" data-toggle="tooltip" title="iCloud"><img src='/img/contact-sources/icloud.png'/></a>&nbsp;
<a class="deep-link delayed" onclick="return cloudsponge.launch('aol');" data-toggle="tooltip" title="AOL"><img src='/img/contact-sources/aol.png'/></a>&nbsp;

<br/>

<!-- 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>