Skip to content

Instantly share code, notes, and snippets.

View dangerouse's full-sized avatar

Graeme Rouse dangerouse

14 followers · 15 following
View GitHub Profile
@dangerouse
dangerouse / beforeDisplayContacts.html
Last active January 23, 2024 21:22
Cloudsponge Widget Reference - The beforeDisplayContacts callback
<!DOCTYPE html>
<html>
<head>
<!--
Include the script anywhere on your page, usually in the head
(don't forget to replace `localhost-only` with your own CloudSponge Widget Key)
-->
<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
<script>
// variable to hold the complete address book returned from api.cloudsponge.com
@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 / solo-auth-proxy.html
Last active July 24, 2022 18:38
CloudSponge HTML-only Proxy Page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>OAuth Proxy Page</title>
<!-- Including the CloudSponge proxy script here to redirect to the CloudSponge server -->
<script>
// This auth-proxy.js can be placed on any HTML page to turn it into a
// CloudSponge Proxy URL.
// It pulls the proper OAuth parameters out and sends them to CloudSponge
@dangerouse
dangerouse / deep.html
Last active June 1, 2022 18:08
Cloudsponge Widget Reference - Deep Links
<!DOCTYPE html>
<html>
<head>
<!--
Include the script anywhere on your page, usually in the head
(don't forget to replace `localhost-only` with your own CloudSponge Widget Key)
-->
<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
</head>
<body>
@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 / only_emails.html
Last active September 21, 2021 20:13
CloudSponge Widget Reference - Email Addresses Only
<!DOCTYPE html>
<html>
<head>
<!--
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>
<script>
// extra widget configuration goes here
@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 / en-us.json
Last active October 29, 2020 19:20
CloudSponge Widget Reference - Locale Data Structure
{
"POWERED_BY" : "powered by",
"ADDRESS_BOOK" : "Choose Your Address Book",
"AUTHORIZATION" : "Authenticating",
"AUTHORIZATION_FOCUS" : "Click here to authenticate",
"SIGN_IN" : "Sign in",
"LOADING_CONTACTS" : "<span class=\"cloudsponge-icon ${provider}\"></span> ${name}",
"SEARCH_CONTACTS" : "Search ${name}",
"SEARCH_SELECTED" : "Search selected contacts",
"NO_SELECTED_CONTACTS" : "There are no selected contacts",
@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';