dingdong 🛎

A simple feedback popup (client-side only). Give it a try here!

Quick Start

1. Include files (and jQuery)

<!-- (1) Include dingdong.css -->
<link type="text/css" rel="stylesheet" href="dingdong.css" />
	
<!-- (2) Include jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	
<!-- (3) Include dingdong.js -->
<script type="text/javascript" src="dingdong.js"></script>

2. Initialize dingdong

<script type="text/javascript">		
  $.dingdong();
</script>

Usage

// initialize with default handler (POST to /dingdong)
$.dingdong();

// initialize with custom endpoint
$.dingdong("/my-dingdong");

// initialize with custom handler
$.dingdong(function (data, callback) {
	alert(JSON.stringify(data));
	callback();
});

$.dingdong(function (data, callback) {
	// note: return a non-null value if an error occurred
	callback("error!!!");
})

// default options:
$.dingdong({
	header: null
	fade: true,
	openFadeDuration: 100,
	cancelFadeDuration: 100,
	submitFadeDuration: 1000,
	buttonText: "Feedback",
	emailPlaceholder: "Your email address",
	messagePlaceholder: "Send us your feedback or report an issue",
	submitButtonText: "Send message",
	submittedText: "Thanks!",
	subscribeButtonText: "Subscribe",
	fnamePlaceholder: "First name",
	lnamePlaceholder: "Last name",
	subscribeLabel: "Subscribe to newsletter",
	messageRows: 7,
	escapeToCancel: true,
	endpoint: "/dingdong",
	handler: null
});

// initialize with custom options
$.dingdong({
	header: "<b>Yoooooooooo!</b>", 
	fade: true,
	openFadeDuration: 1000,
	cancelFadeDuration: 200,
	submitFadeDuration: 1000,
	buttonText: "Heeeeelp!",
	emailPlaceholder: "foo@bar.com",
	messagePlaceholder: "What do you want?",
	submitButtonText: "Goooo!",
	submittedText: "Danke!",
	messageRows: 2,
	disableEscapeToCancel: false,
	endpoint: "/yo-mama",
	handler: function (data, callback) {
		// note: handler takes precedence over endpoint
		console.log(data);
		callback();
	}
});

Methods

You can open an already initalized dingdong:

$.dingdongShow();

Or open it with a different mode:

$.dingdongShow("subscribeOnly"); /* hides message field */
$.dingdongShow("messageOnly"); /* hides subscribe row */

You can also hide it:

$.dingdongCancel();

Custom Handler

For example, you could perform a custom POST like this:

$.dingdong(function (data, callback) {
  $.ajax({
    type: "POST",
    url: "/my-dingdong-handler",
    data: JSON.stringify(data),
    dataType: "json"
  }).done(function () {
    callback();
  })
  .fail(function () {
    alert("Something went wrong :/");
    callback(true);
  });
});

Note that you should pass true to the callback if an error occurred.

pqvst / dingdong