Pledge for Coinbase

Pledge is a jQuery plugin dedicated to making media people create:

  1. Simple to Embed
  2. Simple for Others To Support

Made for BitHack 2014

In layman's terms, pledge allows you to turn a single div tag into an embeded widget to display media and generate a Coinbase donation box attached to it in a visual pleasing and easy to use format.

Features

  • Uses Coinbase to allow easy and secure donations to a Coinbase account
  • Uses Embed.ly to display almost any kind of media (Over 250+ As Of Now) without having to figure out how to embed it
  • Works off of jQuery and PHP; no need for fancy server libraries
  • Uses Responsive Design to adapt to whatever screen it is on
  • Usable on Tablet and Mobile Devices (Note: Media May Be Unavailable If Media Provider Does Not Support Mobile)
  • Customizable to suit your needs

Demo

Demo can be found here.

Requirements

Pledge uses the following:

Compatibility

Pledge has been tested and has shown to work on the following browsers:

  • Internet Explorer 11
  • Firefox
  • Google Chrome
  • Opera
  • Safari
  • Mobile Safari For iOS (Note: Flash Embeded Media Will Not Show)

Usage

To use Pledge, first put the following into the header of your HTML file:

<!-- Loading jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Loading Embed.ly -->
<script src="http://cdn.embed.ly/jquery.embedly-3.1.1.min.js"></script>
<!-- Loading Pledge -->
<script src="lib/pledge.min.js"></script>
<!-- Loading Pledge CSS Sheet -->
<link rel="stylesheet" type="text/css" href="lib/pledge.css"  />
<!-- Loading Bootstrap -->
<link href="lib/flatUI/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="lib/flatUI/css/flat-ui.css" rel="stylesheet">

In the body, Pledge only requires a div tag with a name jQuery can use:

<div id="pledge"></div>

Then, place the following into your $(document).ready:

$(document).ready(function () {
        $("#pledge").pledge( { sourceAddress: "urlOfContent",
                                coinbaseKey: "CoibaseKeyGoesHere",
                                coinbaseSecret: "CoinbaseSecretGoesHere",
                                embedlyKey: "EmbedlyKeyGoesHere" } );
        });

And the user will get something like this: They can then type in a BTC amount and click "Submit" to reach a Coinbase interface to send a donation:

Customization

Pledge can be customized with additional parameters to suit the widget to your needs

Example

$("#pledge").pledge( { sourceAddress: "http://vimeo.com/86739131",
                       coinbaseKey: "keyHere",
                       coinbaseSecret: "secretHere",
                       embedlyKey: "keyHere",
                       backgroundColor: "#DC143C",
                       textColor: "black",
                       bottomText: "We Need Money To Buy New Cameras!",
                       topText: "HEY!!!",
                       currencyType: "USD",
                       marginPercentage: 0} );

Parameters

sourceAddress; Type: String (Optional) Default: null

sourceAddress contains the address of the URL which needs to be displayed as an embeded object. If no URL is given, the plugin will just create a pledge box with no content.

coinbaseKey; Type: String (Required) Default: null

coinbaseKey contains the API key from the Coinbase Account that is receiving the donations. An API Key can be generated here, and only needs "Buttons" access.
NOTE! Giving API access other than "Buttons" access is dangerous and not recommended and should be avoided at ALL COSTS. Giving other access to more powerful API features could give others access to your Coinbase wallet. BE SMART ABOUT YOUR API ACCESS!

coinbaseSecret; Type: String (Required) Default: null

coinbaseSecret contains the API Secret from the Coinbase Account that is receiving the donations. An API Secret can be generated here, and only needs "Buttons" access.
NOTE! Giving API access other than "Buttons" access is dangerous and not recommended and should be avoided at ALL COSTS. Giving other access to more powerful API features could give others access to your Coinbase wallet. BE SMART ABOUT YOUR API ACCESS!

embedlyKey; Type: String (Required) Default: null

embedlyKey contains the API key from Embed.ly. An API Key can be generated here.

backgroundColor; Type: String (CSS Color Code) (Optional) Default: "#348EDA"

backgroundColor specifies the color of the mat around the embeded content.

textColor; Type: String (CSS Color Code) (Optional) Default: "white"

textColor specifies the color of the text in the widget.

bottomText; Type: String (Optional) Default: "Like This? Contribute A Donation With Coinbase!"

bottomText specifies the content that is written below the embeded content and above the box where donation amounts are entered.

topText; Type: String (Optional) Default: null

topText specifies text written above the embeded content.

currencyType; Type: String (ISO 4217 Currency Code) (Required) Default: "BTC"

currenctType specifies what type of currency donations are asked for in the donation box. Any ISO 4217 Currency Code accepted by Coinbase can be used. If BTC is not used, then the donation button will convert the monetary value to the proper BTC amount to let the user know how much to send.

marginPercentage; Type: Integer (CSS Valid Number) (Optional) Default: 15

marginPercentage represents the percentage of whitespace used as a margin on each side of the widget.

update; Type: Boolean (Optional) Default: false

If set to true, .pledge() call will attempt to update an existing widget rather than create a new one. Instead of using default values for parameters, the widget will attempt to use any newely entered parameters, and then use the previously used ones to reconstruct the widget.

$("#pledge").pledge( { update: true, backgroundColor: "#DC143C" } );

HTML5 Data Tags

All parameters can be set by the use of HTML5 Data Tags instead of setting them in the jQuery call. Note that if the same parameter is passed both ways, Data tags will override the JavaScript parameters.

HTML

<div id="pledge" data-embedlyKey="keyHere" data-sourceAddress="urlHere" data-coinbaseKey="keyHere" data-coinbaseSecret="secretHere"></div>

JavaScript

$("#pledge").pledge();

Commands

Pledge has commands that can be run by sending a string rather than an array of parameters as input.

Clear

Clear converts the widget back to an empty div tag.

$('#pledge').pledge("clear");

Destroy

Destroy removes the widget and the div tag that it was created from the DOM.

$('#pledge').pledge("destroy");

About

Plugin developed by Zac Lovoy @zwlovoy.
Made for BitHack 2014

Bitcoin Address: 19d72ob2bgyERMctmdtSzDkfijES12uxwh

Built With

Share this project:

Updates