Custom HTML to install the CloudSponge Address Book Widget on Bubble.io

bubble-address-book-connector.html

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