Skip to content

Instantly share code, notes, and snippets.

@dangerouse
Last active September 18, 2019 20:05
Show Gist options
  • Save dangerouse/e0dbc012af5e32c3f74ddedd882aebd3 to your computer and use it in GitHub Desktop.
Save dangerouse/e0dbc012af5e32c3f74ddedd882aebd3 to your computer and use it in GitHub Desktop.
Custom HTML to install the CloudSponge Address Book Widget on Bubble.io
<script class="cloudsponge-pre-init-script">
// Here's a video demontrating how to use this script in bubble.io:
// https://drive.google.com/file/d/1B43kI0m_9IetVlB3KhuA4VZC2MOK_reV/view
// This script can be added as a sibling of your launch link
// and your textarea to receive the user's contacts and
// it will add the CloudSponge Address Book Widget to your page.
// Don't forget to:
// 1. replace cloudspongeKey with your own key
// from https://app.cloudsponge.com/
// 2. optionally, initialize the cloudspongeOptions with your
// desired options. You'll find an exhaustive list of options here:
// https://www.cloudsponge.com/developer/address-book-widget/options/
// TODO: replace cloudspongeKey
var cloudspongeKey = 'localhost-only';
// TODO: optionally, set your own options here:
var cloudspongeOptions = {};
// local to capture the number of times we wait to add cloudsponge to the page
// because the fields can be added in any order, they may not yet exist when this script
// runs. So we wait a short time and try again, up to 10 times before we give up and initialize anyway.
var attempts = 0;
var MAX_ATTEMPTS = 2; // try this many times before giving up on the fields
var addCloudSponge = function() {
// using jQuery, find the sibling link and input and associate
// them with the cloudsponge object by adding the appropriate
// classNames to each.
var $links = $('.cloudsponge-pre-init-script').parents('.bubble-r-line').find('a').addClass('cloudsponge-launch');
var $inputs = $('.cloudsponge-pre-init-script').parents('.bubble-r-line').find('input').addClass('cloudsponge-contacts');
// if we couldn't find one or both of the elements, wait a bit and try again
if (!$links.length || !$inputs.length) {
// only retry a few times...
if (++attempts < MAX_ATTEMPTS) {
// try again in a moment so that the rest of the elements have a chance to load
return window.setTimeout(addCloudSponge, 200);
}
}
// add the cloudsponge object to the page, once
if (!window.cloudsponge) {
var src = 'https://api.cloudsponge.com/widget/' + cloudspongeKey + '.js';
var scriptTag = document.createElement('script');
scriptTag.src = src;
scriptTag.onload = function() {
cloudsponge.init(cloudspongeOptions);
};
$('.cloudsponge-pre-init-script')[0].parentElement.appendChild(scriptTag);
} else {
// re-init to be sure that the event handlers get attached to the elements properly
cloudsponge.init(cloudspongeOptions);
}
};
addCloudSponge();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment