diff --git a/DevProcfile b/DevProcfile
new file mode 100644
index 0000000..f38e932
--- /dev/null
+++ b/DevProcfile
@@ -0,0 +1 @@
+web: bundle exec puma -C config/puma-dev.rb
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
index 65d0417..6ecb588 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,5 +1,6 @@
 source "http://rubygems.org"
 
+gem "foreman"
 gem "puma"
 gem "sinatra"
 gem "json"
diff --git a/Gemfile.lock b/Gemfile.lock
index 704d389..4f7b35a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -3,6 +3,8 @@ GEM
   specs:
     emk-sinatra-url-for (0.2.1)
       sinatra (>= 0.9.1.1)
+    foreman (0.78.0)
+      thor (~> 0.19.1)
     haml (4.0.5)
       tilt
     hashie (3.2.0)
@@ -16,6 +18,7 @@ GEM
       rack (~> 1.4)
       rack-protection (~> 1.4)
       tilt (~> 1.3, >= 1.3.4)
+    thor (0.19.1)
     tilt (1.4.1)
 
 PLATFORMS
@@ -23,6 +26,7 @@ PLATFORMS
 
 DEPENDENCIES
   emk-sinatra-url-for
+  foreman
   haml
   hashie
   json
diff --git a/Procfile b/Procfile
new file mode 100644
index 0000000..528ca4b
--- /dev/null
+++ b/Procfile
@@ -0,0 +1 @@
+web: bundle exec puma -C config/puma.rb
\ No newline at end of file
diff --git a/config/puma-dev.rb b/config/puma-dev.rb
new file mode 100644
index 0000000..0b25f3f
--- /dev/null
+++ b/config/puma-dev.rb
@@ -0,0 +1,10 @@
+workers 5
+threads 1, 1
+#
+# ssl_bind '127.0.0.1', '9190', { key: "config/ssl/localhost.key", cert: "config/ssl/localhost.crt" }
+
+preload_app!
+
+rackup      DefaultRackup
+port        9190
+environment ENV['RACK_ENV'] || 'development'
diff --git a/config/puma.rb b/config/puma.rb
new file mode 100644
index 0000000..0a77975
--- /dev/null
+++ b/config/puma.rb
@@ -0,0 +1,8 @@
+workers Integer(ENV['PUMA_WORKERS'] || 5)
+threads_count = Integer(ENV['MAX_THREADS'] || 1)
+threads threads_count, threads_count
+preload_app!
+
+rackup      DefaultRackup
+port        ENV['PORT']     || 9190
+environment ENV['RACK_ENV'] || 'development'
diff --git a/me.rb b/me.rb
index cc4053e..08de85f 100644
--- a/me.rb
+++ b/me.rb
@@ -4,15 +4,31 @@
 class CiberchApp < Sinatra::Base
   helpers Sinatra::UrlForHelper
 
+  before do
+    @chat_url = ENV['CHAT_URL'] || "http://jeff-test.crushpath.us/spots/2756/chat"
+    @chat_base_url = ENV['CHAT_BASE_URL'] || "localhost:5001"
+    @appid = ENV['facebook_app_id']
+    @host = ENV['HOST'] || 'localhost:9292'
+  end
+
   get "/" do
+
     @me = YAML.load_file("poco.yml")
     @me = Hashie::Mash.new(@me)
     @full_url = url_for("/", :full)
     @description = "Who is #{@me.preferred_username || @me.display_name} ?"
     @image = url_for(@me.photos.first.value, :full)
     @title = @me.display_name
-    @appid = ENV['facebook_app_id']
+
     haml :index
   end
+
+  get "/chat" do
+    haml :chat
+  end
+
+  get "/microsite" do
+    haml :microsite
+  end
 end
 
diff --git a/public/stylesheets/alt_snippetchat.css b/public/stylesheets/alt_snippetchat.css
new file mode 100644
index 0000000..630d2a2
--- /dev/null
+++ b/public/stylesheets/alt_snippetchat.css
@@ -0,0 +1,153 @@
+.hidden {
+    display: none;
+}
+
+.cp-chat-button {
+    display:none;
+    /*color: #fff;*/
+    /*cursor: pointer;*/
+    /*background-color: #F26C33;*/
+    /*border-top-right-radius: 5px;*/
+    /*border-top-left-radius: 5px;*/
+    /*margin: 2px 0px 0 0;*/
+    /*padding: 6px 40px 6px 12px;*/
+    /*text-decoration: none;*/
+    /*display: block;*/
+}
+
+.cp-chat-button:hover {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:link {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:visited {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:active {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:focus {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-icon-angle {
+    font-family: monospace;
+    position: absolute;
+    right: 8px;
+    font-size: 25px;
+    padding-top: 0px;
+}
+
+.cp-icon-angle-down {
+    margin-top: -11px;
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.cp-chat-wrapper {
+    width: 300px;
+    height: 400px;
+    border-top: 1px solid #e7e7e7;
+    border-left: 1px solid #e7e7e7;
+    border-right: 1px solid #e7e7e7;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background-color: #f7f8fa;
+}
+
+.cp-chat-iframe {
+    height: 400px;
+}
+
+.cp-app {
+    position: fixed;
+    bottom: 0;
+    right: 30px;
+    font-size: 14px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+@-webkit-keyframes bouncedelay {
+    0% {
+        -webkit-transform: scale(0.0);
+    }
+    40% {
+        -webkit-transform: scale(1.0);
+    }
+    80% {
+        -webkit-transform: scale(0.0);
+    }
+    100% {
+        -webkit-transform: scale(0.0);
+    }
+}
+
+@keyframes bouncedelay {
+    0% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+    }
+    40% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+    80% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+    100% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+}
+
+.ui-loading {
+    padding-top: 180px;
+    text-align: center;
+}
+
+.ui-loading-text {
+    display: inline-block;
+    padding: 20px 0;
+    color: #626367;
+}
+
+
+.spinner {
+    margin: 0 auto 0;
+    width: 70px;
+    text-align: center;
+}
+
+.spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: #CDCED0;
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+    animation: bouncedelay 1.4s infinite ease-in-out;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.spinner .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+}
diff --git a/views/chat.haml b/views/chat.haml
new file mode 100644
index 0000000..67529b6
--- /dev/null
+++ b/views/chat.haml
@@ -0,0 +1,10 @@
+.row
+  .span6
+    %h1 User ChatTest
+%br/
+%br/
+
+.row
+  .span6
+    %iframe{:src => "https://#{@chat_base_url}/users/~/chat?skipRedirect=1", :height => "454px", :width => "277px"}
+
diff --git a/views/index.haml b/views/index.haml
index d1f25a1..446623b 100644
--- a/views/index.haml
+++ b/views/index.haml
@@ -1,3 +1,14 @@
+%a{:href=>"https://github.com/ciberch/sinatra-cloudfoundry-basic-website"}
+  %img{:style=>"position: absolute; top: 0; right: 0; border: 0;",  :src=>"https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67", :alt=>"Fork you on GitHub"}
+  .row
+    .hero-unit.blue.first-hero
+      .row
+        .span1
+          %img.small.avatar{:src => @image}
+        .span7
+          %h2="#{@title} - @#{@me.preferred_username}"
+          %p=@me.tagline
+  .clear
 .row
   .span12
     %p=@me.about
diff --git a/views/layout.haml b/views/layout.haml
index 9ea275c..ca0010a 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -10,27 +10,20 @@
     %meta{:prefix=>"fb:http://ogp.me/ns/fb#", :property => "fb:app_id", :content=> @appid}
     %link{:rel=>'stylesheet', :href=>'/stylesheets/bootstrap.min.css', :type => "text/css"}
     %link{:rel=>'stylesheet', :href=>'/stylesheets/style.css', :type => "text/css"}
+    %style
+      a.cp-chat-button { display: 'none'}
   %body
-    #fb-root
-    :javascript
-      (function(d, s, id) {
-       var js, fjs = d.getElementsByTagName(s)[0];
-       if (d.getElementById(id)) return;
-       js = d.createElement(s); js.id = id;
-       js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=#{@appid}";
-       fjs.parentNode.insertBefore(js, fjs);
-       }(document, 'script', 'facebook-jssdk'));
+    - if @do_fb
+      #fb-root
+      :javascript
+        (function(d, s, id) {
+         var js, fjs = d.getElementsByTagName(s)[0];
+         if (d.getElementById(id)) return;
+         js = d.createElement(s); js.id = id;
+         js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=#{@appid}";
+         fjs.parentNode.insertBefore(js, fjs);
+         }(document, 'script', 'facebook-jssdk'));
     .content.container
-      %a{:href=>"https://github.com/ciberch/sinatra-cloudfoundry-basic-website"}
-        %img{:style=>"position: absolute; top: 0; right: 0; border: 0;",  :src=>"https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67", :alt=>"Fork you on GitHub"}
-      .row
-        .hero-unit.blue.first-hero
-          .row
-            .span1
-              %img.small.avatar{:src => @image}
-            .span7
-              %h2="#{@title} - @#{@me.preferred_username}"
-              %p=@me.tagline
-      .clear
       =yield
-      .fb-like{"data-href" =>@full_url, "data-send" => "true", "data-show-faces" => "true", "data-width" => "450"}
\ No newline at end of file
+      - if @do_fb
+        .fb-like{"data-href" =>@full_url, "data-send" => "true", "data-show-faces" => "true", "data-width" => "450"}
\ No newline at end of file
diff --git a/views/microsite.haml b/views/microsite.haml
new file mode 100644
index 0000000..e0e9cce
--- /dev/null
+++ b/views/microsite.haml
@@ -0,0 +1,48 @@
+
+- if @chat_url &&  @chat_base_url
+  :javascript
+      var customCSS = "#{@host}/stylesheets/alt_snippetchat.css";
+      var CPChat = CPChat || {spotURL: "#{@chat_url}", bundleURL: "#{@chat_base_url}" + '/javascripts/snippet/bundle.js', styleURL: customCSS};
+      (function() {
+        var cp = document.createElement('script'); cp.type = 'text/javascript'; cp.async = true;
+        cp.src = "//"+CPChat.bundleURL;
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cp, s);
+      })();
+
+      function openChat(){
+        document.getElementsByClassName("cp-chat-button")[0].click();
+      }
+
+
+.row
+  .span6
+    %h1 Microsite ChatTest
+
+%br/
+%br/
+.row
+  .span6 Element partitioned digital proxy record network boolean, software transistorized supporting recognition controller.
+  %br/
+%br/
+.row
+  .span6 Proxy logarithmic in backbone controller gigabyte. Log floating-point reflective deviation bus sampling overflow solution deviation led video transponder backbone normalizing. Generator development for for bus cable, bypass, reducer feedback phase. Metafile supporting video application procedural development data, reducer prompt, processor infrared, normalizing harmonic metafile. Feedback phase network, disk logistically element bus bypass distributed scan. Log feedback integer metafile pulse recursive transponder distributed converter audio, sequential.
+  %br/
+  %br/
+.row
+  .span6 Computer pulse partitioned, dithering deviation, silicon. Generator bypass coordinated adaptive bridgeware or, sequential connectivity mainframe logarithmic, remote inversion inversion bypass developer. Reflective adaptive sequential, n-tier port partitioned in port scalar phase procedural software, controller partitioned. Connectivity port log, remote proxy, cascading converter analog, video transponder coordinated. Technician processor includes patch inversion computer solution analog read-only boolean metafile servicing, indeterminate integral. Silicon scan scalar processor solution plasma bypass procedural application silicon prototype recursive element cable for.
+  %br/
+  %br/
+
+.row
+  .span6 Procedural hyperlinked patch disk, fragmentation, transponder pulse femtosecond computer scan, transponder. Infrared reflective arrray boolean broadband servicing high resistor. Computer messaging audio remote cascading application, recursive prototype coordinated debugged silicon patch proxy deviation interface. Element device remote scan frequency kilohertz. Adaptive includes broadband computer frequency system developer proxy application system ethernet pc hyperlinked transponder. Log bridgeware pulse sequential converter proxy. Plasma, transistorized echo solution, read-only digital logistically read-only logarithmic bridgeware silicon network element patch boolean. Mainframe port feedback partitioned inversion element plasma broadband led.
+  %br/
+  %br/
+
+  %br/
+
+.row
+  .span2
+    %h3
+      %a{:href=> "javascript: openChat()", :id => "custom_chat_button"} Open Chat
+    %br/
+    %br/
\ No newline at end of file