diff --git a/history.html b/history.html
index 5dfd0aa..f419055 100644
--- a/history.html
+++ b/history.html
@@ -27,12 +27,12 @@ <h2>Doodle with strangers on InterWeb!</h2>
 		<canvas id="drawCanvas" width="300" height="300">Canvas is not supported on this browser!</canvas>
 
 		<section id="colorSwatch">
-			<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label> 
-			<input type="radio" name="color" id="color02" data-color="darkorange">	<label for="color02"></label>  
-			<input type="radio" name="color" id="color03" data-color="navy">		<label for="color03"></label>  
-			<input type="radio" name="color" id="color04" data-color="yellowgreen">	<label for="color04"></label>  
-			<input type="radio" name="color" id="color05" data-color="firebrick">	<label for="color05"></label>  
-			<input type="radio" name="color" id="color06" data-color="powderblue">	<label for="color06"></label> 
+			<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
+			<input type="radio" name="color" id="color02" data-color="darkorange">	<label for="color02"></label>
+			<input type="radio" name="color" id="color03" data-color="navy">		<label for="color03"></label>
+			<input type="radio" name="color" id="color04" data-color="yellowgreen">	<label for="color04"></label>
+			<input type="radio" name="color" id="color05" data-color="firebrick">	<label for="color05"></label>
+			<input type="radio" name="color" id="color06" data-color="powderblue">	<label for="color06"></label>
 		</section>
 	</section>
 
@@ -42,13 +42,13 @@ <h2>Doodle with strangers on InterWeb!</h2>
 	</footer>
 
 	<a href="https://github.com/pubnub/codoodler" target="_blank"><img class="github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
-	
+
 	<script>
 		var drawHistory = true;
 	</script>
 
-	<script src="//cdn.pubnub.com/pubnub-3.14.1.min.js"></script>
-	<script src="js/app.min.js"></script>
+	<script src="//cdn.pubnub.com/sdk/javascript/pubnub.4.20.0.min.js"></script>
+	<script src="js/app.js"></script>
 <!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PZWSZ2"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
@@ -57,6 +57,6 @@ <h2>Doodle with strangers on InterWeb!</h2>
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','GTM-PZWSZ2');</script>
-<!-- End Google Tag Manager -->	
+<!-- End Google Tag Manager -->
 </body>
 </html>
diff --git a/history2.html b/history2.html
index 9af115f..9d37828 100644
--- a/history2.html
+++ b/history2.html
@@ -23,12 +23,12 @@
 		<canvas id="drawCanvas" width="300" height="300"></canvas>
 
 		<section id="colorSwatch">
-			<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label> 
-			<input type="radio" name="color" id="color02" data-color="darkorange">	<label for="color02"></label>  
-			<input type="radio" name="color" id="color03" data-color="navy">		<label for="color03"></label>  
-			<input type="radio" name="color" id="color04" data-color="yellowgreen">	<label for="color04"></label>  
-			<input type="radio" name="color" id="color05" data-color="firebrick">	<label for="color05"></label>  
-			<input type="radio" name="color" id="color06" data-color="powderblue">	<label for="color06"></label> 
+			<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
+			<input type="radio" name="color" id="color02" data-color="darkorange">	<label for="color02"></label>
+			<input type="radio" name="color" id="color03" data-color="navy">		<label for="color03"></label>
+			<input type="radio" name="color" id="color04" data-color="yellowgreen">	<label for="color04"></label>
+			<input type="radio" name="color" id="color05" data-color="firebrick">	<label for="color05"></label>
+			<input type="radio" name="color" id="color06" data-color="powderblue">	<label for="color06"></label>
 		</section>
 	</section>
 
@@ -36,8 +36,8 @@
 		var drawHistory = true;
 	</script>
 
-	<script src="//cdn.pubnub.com/pubnub-3.14.1.min.js"></script>
-	<script src="js/app.min.js"></script>
-	
+	<script src="//cdn.pubnub.com/sdk/javascript/pubnub.4.20.0.min.js"></script>
+	<script src="js/app.js"></script>
+
 </body>
 </html>
diff --git a/index.html b/index.html
index 54ad228..94a5080 100644
--- a/index.html
+++ b/index.html
@@ -27,12 +27,12 @@ <h2>Doodle with strangers on InterWeb!</h2>
 		<canvas id="drawCanvas" width="300" height="300">Canvas is not supported on this browser!</canvas>
 
 		<section id="colorSwatch">
-			<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label> 
-			<input type="radio" name="color" id="color02" data-color="darkorange">	<label for="color02"></label>  
-			<input type="radio" name="color" id="color03" data-color="navy">		<label for="color03"></label>  
-			<input type="radio" name="color" id="color04" data-color="yellowgreen">	<label for="color04"></label>  
-			<input type="radio" name="color" id="color05" data-color="firebrick">	<label for="color05"></label>  
-			<input type="radio" name="color" id="color06" data-color="powderblue">	<label for="color06"></label> 
+			<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
+			<input type="radio" name="color" id="color02" data-color="darkorange">	<label for="color02"></label>
+			<input type="radio" name="color" id="color03" data-color="navy">		<label for="color03"></label>
+			<input type="radio" name="color" id="color04" data-color="yellowgreen">	<label for="color04"></label>
+			<input type="radio" name="color" id="color05" data-color="firebrick">	<label for="color05"></label>
+			<input type="radio" name="color" id="color06" data-color="powderblue">	<label for="color06"></label>
 		</section>
 	</section>
 
@@ -42,14 +42,14 @@ <h2>Doodle with strangers on InterWeb!</h2>
 	</footer>
 
 	<a href="https://github.com/pubnub/codoodler" target="_blank"><img class="github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
-	
+
 	<script>
 		// For history() demo, please view history.html.
 		var drawHistory = false;
 	</script>
 
-	<script src="//cdn.pubnub.com/pubnub-3.14.1.min.js"></script>
-	<script src="js/app.min.js"></script>
+	<script src="//cdn.pubnub.com/sdk/javascript/pubnub.4.20.0.min.js"></script>
+	<script src="js/app.js"></script>
 <!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PZWSZ2"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
diff --git a/js/app.js b/js/app.js
index 36a917e..384fba0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -7,25 +7,25 @@
 
 	canvas.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300);
 	canvas.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300);
-	 
+
 	ctx.strokeStyle = color;
 	ctx.lineWidth = '3';
 	ctx.lineCap = ctx.lineJoin = 'round';
 
 	/* Mouse and touch events */
-	
+
 	document.getElementById('colorSwatch').addEventListener('click', function() {
 		color = document.querySelector(':checked').getAttribute('data-color');
 	}, false);
-	
+
 	var isTouchSupported = 'ontouchstart' in window;
 	var isPointerSupported = navigator.pointerEnabled;
 	var isMSPointerSupported =  navigator.msPointerEnabled;
-	
+
 	var downEvent = isTouchSupported ? 'touchstart' : (isPointerSupported ? 'pointerdown' : (isMSPointerSupported ? 'MSPointerDown' : 'mousedown'));
 	var moveEvent = isTouchSupported ? 'touchmove' : (isPointerSupported ? 'pointermove' : (isMSPointerSupported ? 'MSPointerMove' : 'mousemove'));
 	var upEvent = isTouchSupported ? 'touchend' : (isPointerSupported ? 'pointerup' : (isMSPointerSupported ? 'MSPointerUp' : 'mouseup'));
-	 	  
+
 	canvas.addEventListener(downEvent, startDraw, false);
 	canvas.addEventListener(moveEvent, draw, false);
 	canvas.addEventListener(upEvent, endDraw, false);
@@ -34,25 +34,38 @@
 
 	var channel = 'draw';
 
-	var pubnub = PUBNUB.init({
-		publish_key     : 'pub-c-156a6d5f-22bd-4a13-848d-b5b4d4b36695',
-		subscribe_key   : 'sub-c-f762fb78-2724-11e4-a4df-02ee2ddab7fe',
-		leave_on_unload : true,
+	var pubnub = new PubNub({
+		publishKey     : 'pub-c-156a6d5f-22bd-4a13-848d-b5b4d4b36695',
+		subscribeKey   : 'sub-c-f762fb78-2724-11e4-a4df-02ee2ddab7fe',
 		ssl		: document.location.protocol === "https:"
 	});
 
-	pubnub.subscribe({
-		channel: channel,
-		callback: drawFromStream,
-		presence: function(m){
-			if(m.occupancy > 1){
+	pubnub.addListener({
+	    message: function(m) {
+	        // handle message
+	        drawFromStream(m.message);
+	    },
+
+	    presence: function(p) {
+	        // handle presence
+			if (p.occupancy > 1) {
 				document.getElementById('unit').textContent = 'doodlers';
 			}
-   			document.getElementById('occupancy').textContent = m.occupancy;
-   			var p = document.getElementById('occupancy').parentNode;
-   			p.classList.add('anim');
-   			p.addEventListener('transitionend', function(){p.classList.remove('anim');}, false);
-   		}
+
+			document.getElementById('occupancy').textContent = p.occupancy;
+			var p = document.getElementById('occupancy').parentNode;
+			p.classList.add('anim');
+			p.addEventListener('transitionend', function(){p.classList.remove('anim');}, false);
+	    },
+
+	    status: function(s) {
+	        // handle status
+	    }
+	});
+
+	pubnub.subscribe({
+		channels: [channel],
+		withPresence: true
 	});
 
 	function publish(data) {
@@ -79,16 +92,22 @@
 		if(!message || message.plots.length < 1) return;
 		drawOnCanvas(message.color, message.plots);
     }
-    
+
     // Get Older and Past Drawings!
-    if(drawHistory) {
-	    pubnub.history({
-	    	channel  : channel,
-	    	count    : 50,
-	    	callback : function(messages) {
-	    		pubnub.each( messages[0], drawFromStream );
-	    	}
-	    });
+    if (drawHistory) {
+	    pubnub.history(
+		    {
+		        channel: channel,
+		        count: 50,
+		    },
+		    function (status, response) {
+		        // pubnub.each(response.messages, drawFromStream);
+				for (m in response.messages) {
+				    drawFromStream(response.messages[m].entry);
+				}
+
+		    }
+		);
 	}
     var isActive = false;
     var plots = [];
@@ -104,16 +123,16 @@
 
     	drawOnCanvas(color, plots);
 	}
-	
+
 	function startDraw(e) {
 	  	e.preventDefault();
 	  	isActive = true;
 	}
-	
+
 	function endDraw(e) {
 	  	e.preventDefault();
 	  	isActive = false;
-	  
+
 	  	publish({
 	  		color: color,
 	  		plots: plots