Skip to content

Instantly share code, notes, and snippets.

@dangerouse
dangerouse / host.html
Created July 20, 2023 20:56
Hosted CloudSponge Proxy Script
<html>
<head>
<meta charset="utf-8">
<!-- other meta tags... -->
<!--
Insert the following script tag to turn any page into a Proxy URL.
It does the proxy function only if the user just completed the OAuth flow.
-->
<script src="https://api.cloudsponge.com/assets/proxy.js"></script>
@dangerouse
dangerouse / picker-inject.js
Created April 16, 2022 17:01
Inject the Contact Picker via console
(function(key, opts, s) {
s = document.createElement('script');
s.type = 'text/javascript';
s.async = 1;
// assign the src attribute
s.src = "https://api.cloudsponge.com/widget/"+key+".js";
// set the script to invoke a callback after it loads
s.onload = function() {
window.cloudsponge && cloudsponge.init(opts);
}
@dangerouse
dangerouse / ContactPicker.js
Last active September 22, 2021 18:37
CloudSponge Contact Picker in React 16.8+
// The ContactPicker component handles the stuff you don't want to think about
// when adding the CloudSponge Contact Picker to your React app or PWA.
// Usage:
// <ContactPicker cloudspongeKey="my-key-from-cloudsponge" options={{
// selectionLimit: 5,
// selectionLimitMessage: "That's too many contacts."
// }}>
// <button value="Add from Address Book" className="btn"></button>
// </ContactPicker>
// OR to launch the ContactPicker in response to an external setting/action:
@dangerouse
dangerouse / cloudsponge-contact-picker.component.ts
Last active April 30, 2020 22:58
CloudSponge Angular component
// Add the CloudSponge contact picker to your page and initialize it using this component.
// options are passed as a property to the component.
// You will still need to add a launch link to the page and a place to receive the selected contacts.
// For example:
// <cs-contact-picker [key]="MY-CLOUDSPONGE-KEY" [options]="{}">
// <label for="to">To: <a class="cloudsponge-launch">Pick from my contacts</a></label>
// <textarea id="to" class="cloudsponge-contacts"></textarea>
// </cs-contact-picker>
// Alternately, you may specify the options in your parent component:
// import { CsContactPickerComponent } from './cs-contact-picker/cs-contact-picker.component';
@dangerouse
dangerouse / body.html
Created October 7, 2019 19:32
CloudSponge Proxy URL for Instapage
<p>Thank you for completing the OAuth flow.</p>
<p>Click <a class="cs-force">here to verify that your Proxy URL is set up correctly</a>.</p>
@dangerouse
dangerouse / bubble-address-book-connector.html
Last active September 18, 2019 20:05
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
@dangerouse
dangerouse / selectize-after-choose.html
Created May 22, 2019 16:57
Adds the selected contacts from the CloudSponge widget to a selectize component
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>CloudSponge Selectize Example</title>
<!-- Selectize styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" type="text/css">
<style>
/**
* Extra styles required to format emails nicely inside the selectize input
@dangerouse
dangerouse / CloudSpongeWidget.jsx
Last active September 21, 2021 19:29
CloudSponge - Example React Component
import React from 'react'
// Simple React Component that manages adding the cloudsponge object to the page
// and initializing it with the options that were passed through.
// props:
// * cloudspongeKey (required): your widget key from your CloudSponge account https://app.cloudsponge.com/app
// * options (optional): any javascript options you wish to pass to configure the cloudpsonge object
//
// For example, you can use the component like so:
// import CloudSpongeWidget from './CloudSpongeWidget'
@dangerouse
dangerouse / 100_contacts.csv
Last active April 18, 2018 16:51
100 Sample contacts for testing
We can make this file beautiful and searchable if this error is corrected: Unclosed quoted field in line 1.
"Title","First Name","Middle Name","Last Name","Suffix","Company","Department","Job Title","Business Street","Business Street 2","Business Street 3","Business City","Business State","Business Postal Code","Business Country/Region","Home Street","Home Street 2","Home Street 3","Home City","Home State","Home Postal Code","Home Country/Region","Other Street","Other Street 2","Other Street 3","Other City","Other State","Other Postal Code","Other Country/Region","Assistant's Phone","Business Fax","Business Phone","Business Phone 2","Callback","Car Phone","Company Main Phone","Home Fax","Home Phone","Home Phone 2","ISDN","Mobile Phone","Other Fax","Other Phone","Pager","Primary Phone","Radio Phone","TTY/TDD Phone","Telex","Account","Anniversary","Assistant's Name","Billing Information","Birthday","Business Address PO Box","Categories","Children","Directory Server","E-mail Address","E-mail Type","E-mail Display Name","E-mail 2 Address","E-mail 2 Type","E-mail 2 Display Name","E-mail 3 Address","E-mail 3 Type","E-mai
@dangerouse
dangerouse / unresponsive-desktop.html
Created September 29, 2017 20:53
CloudSponge Widget Sample - Theme: unresponsive-desktop
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
<title>Unresponsive Desktop Example</title>
<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="//api.cloudsponge.com/widget/localhost-only.js"></script>