My Journey with CloudSponge

CloudSponge Address Book Importing Software

3rd Party Tools and Their Worth:

Over the past 15 years that I’ve been doing web development I saw a lot of third party tools, and after a quick glance, many times I’d just end up with a single question “Why?” Why would I want to incorporate a third party tool for something I can build in ten or fifteen minutes. There are some exceptions of course, one of them being Cloudsponge.

CloudSponge is by far the best tool for importing address books into your database. Yes, you could probably try to do it yourself, but with all the upkeep and maintenance of all the external code, unless you have eternity to do so, I wouldn’t recommend it… and so I hopped over to their site and started a free trial.


How to quickly convert your visitors into brand ambassadors.

How easy is it to implement CloudSponge to your site? I think they knew you might ask that question, because as soon as you log in, you will get a popup with 3 easy steps for adding it to your site. Well, it’s actually 5 steps, but step 4 is “test it” and step 5 is “enjoy”, which in my opinion is a single step as I enjoyed testing it. :)

For those of you who know me, you’re probably saying “but you probably aren’t satisfied with the out-of-the-box settings, right?” Right-you-are, but with custom CSS and multiple options for the JavaScript init, I got the whole thing set up and custom-tweaked in about an hour. That includes the time when I sent them a support question, and got an answer back 3 minutes later! What? My guess is that their entire support team was just staring at the screen when my request came in, then they spent 30 seconds playing rock/paper/scissors/lizard/spock to see who gets to answer it and the winner spent entire 2 minutes on writing out the response. That’s what I call a five-star support. Bravo!


CloudSponge Implementation…

Anywho, enough kissing up to them, here’s how I custom tweaked it:

<script>

//show sweetalert confirmation after submit
function afterSubmitContacts(contacts, source, owner){

//get info
var numOfInvites = contacts.length;
var text = 'invitation';
var first = owner.first_name;
if(numOfInvites > 1){ text = 'invitations'; }

//show notification
swal("Thanks "+first+"!", "You have sent "+numOfInvites+" "+text+".", "success");
}
//initialize cloudsponge
cloudsponge.init({

//custom list of phonebook
sources: ["gmail", "yahoo", "windowslive", "aol"],

//custom css
css: "https://www.iadb.com/api/cloudsponge/cloudsponge.css",

//load after initiation
lazyLoad:true,

//modify text
localeData: {
GET_CONTACTS: 'Send ${0} invites'
},

//process after submission
afterSubmitContacts: afterSubmitContacts,
webhooks: {
afterSubmitContacts: 'https://www.iadb.com/api/cloudsponge/process-invites.php'
}
});
</script>

And of course the webhook that submits info back to PHP gets JSON, so you process it as such:

$data = json_decode(file_get_contents('php://input'), true);
var_dump($data);

And I got the custom CSS with just a few tries:

#cloudsponge-address-book {
height:174px;
max-width:396px;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
}
.active-tab-loading #cloudsponge-address-book {
height:260px;
}
.active-tab-contacts #cloudsponge-address-book {
height:80%;
max-width:760px;
}
#cloudsponge-address-book .cloudsponge-providers-list {
margin:32px auto 0;
width:374px;
}
#cloudsponge-address-book .cloudsponge-topbar {
background-color:#f58e1f;
}
#cloudsponge-address-book .cloudsponge-providers-list em {
float:left
}
#cloudsponge-address-book .cloudsponge-providers-list a {
text-indent:-9999px;
height:55px;
}
#cloudsponge-address-book .cloudsponge-providers-list li {
width:66px;
}
#cloudsponge-address-book .cloudsponge-header {
padding:8px;
}
@media (max-width: 960px){
#cloudsponge-address-book .cloudsponge-providers-list {
margin: 25px auto 0;
width: 264px;
}
#cloudsponge-address-book {
max-width:100% !important;
height:100% !important;
}
}

And with that, here’s my transformation:

Before (Blue) & After (Orange)

If you’re looking for a way for your visitors to spread the word about your website, CloudSponge is the way to go.

Lastly, if you happen to know any actors who might need a website, visit IADB.COM and click “tell a friend” to see how we’re using this feature.