added link to slack, patreon

example/example.css

@@ -44,6 +44,14 @@ h3 div {
 .tagline {
   margin-top: 0;
 }
+.tagline-text {
+  vertical-align: middle;
+}
+.slackin-frame {
+  float: right;
+  margin-left: 10px;
+  vertical-align: middle;
+}
 
 .promo {
   margin-bottom: 0;

index.html

@@ -5,10 +5,11 @@
 <link href='example/example.css' rel='stylesheet' type='text/css' />
 <title>dragula</title>
 <h1><a href='https://github.com/bevacqua/dragula'><img src='resources/logo.svg' onerror='this.src="resources/logo.png"' alt='dragula'/></a></h1>
-<h3 class='tagline'>Drag and drop so simple it hurts</h3>
+<h3 class='tagline'><span class='tagline-text'>Drag and drop so simple it hurts</span><iframe class='slackin-frame' frameborder='0' src='https://dragula-slackin.herokuapp.com/iframe' width='90' height='20'></iframe></h3>
 <a href='https://github.com/bevacqua/dragula'>
   <img class='gh-fork' src='https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png' />
 </a>
+
 <div class='examples'>
   <div class='parent'>
     <label for='hy'>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label>

readme.markdown

@@ -1,6 +1,6 @@
 [![logo.png][3]][2]
 
-[![Travis CI][5]][4] [![Flattr][6]][7]
+[![Travis CI][5]][4] [![Slack Status][17]][18] [![Flattr][6]][7] [![Patreon][19]][20]
 
 > Drag and drop so simple it hurts
 
@@ -296,3 +296,7 @@ MIT
 [14]: https://github.com/bevacqua/dragula/blob/master/contributing.markdown
 [15]: https://github.com/bevacqua/dragula/blob/master/dist
 [16]: #css
+[17]: https://dragula-slackin.herokuapp.com/badge.svg
+[18]: https://dragula-slackin.herokuapp.com/
+[19]: https://rawgit.com/bevacqua/dragula/master/resources/patreon.svg
+[20]: https://patreon.com/bevacqua