diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 04fda026bf3..4b9514750a9 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -207,4 +207,12 @@ module ApplicationHelper
   def broadcast_message
     BroadcastMessage.current
   end
+
+  def highlight_js(&block)
+    string = capture(&block)
+
+    content_tag :div, class: user_color_scheme_class do
+      Pygments::Lexer[:js].highlight(string).html_safe
+    end
+  end
 end
diff --git a/app/views/help/web_hooks.html.haml b/app/views/help/web_hooks.html.haml
index 4435648be49..66ab7b75bda 100644
--- a/app/views/help/web_hooks.html.haml
+++ b/app/views/help/web_hooks.html.haml
@@ -4,21 +4,68 @@
     Project web hooks allow you to trigger url if new code is pushed or new issue is created
   %hr
 
-  %p
+  %p.slead
     You can configure web hook to listen for specific events like pushes, issues, merge requests.
     %br
     GitLab will send POST request with data to web hook url.
     %br
     Web Hooks can be used to update an external issue tracker, trigger CI builds, update a backup mirror, or even deploy to your production server.
-
+  %hr
 
   %h4 Push events
-  = render "projects/hooks/data_ex"
+  %p.light
+    Triggered when you push to the repository except pushing tags.
+    %br
+    Request body:
+  = highlight_js do
+    :erb
+      {
+        "before": "95790bf891e76fee5e1747ab589903a6a1f80f22",
+        "after": "da1560886d4f094c3e6c9ef40349f7d38b5d27d7",
+        "ref": "refs/heads/master",
+        "user_id": 4,
+        "user_name": "John Smith",
+        "project_id": 15,
+        "repository": {
+          "name": "Diaspora",
+          "url": "git@localhost:diaspora.git",
+          "description": "",
+          "homepage": "http://localhost/diaspora",
+        },
+        "commits": [
+          {
+            "id": "b6568db1bc1dcd7f8b4d5a946b0b91f9dacd7327",
+            "message": "Update Catalan translation to e38cb41.",
+            "timestamp": "2011-12-12T14:27:31+02:00",
+            "url": "http://localhost/diaspora/commits/b6568db1bc1dcd7f8b4d5a946b0b91f9dacd7327",
+            "author": {
+              "name": "Jordi Mallach",
+              "email": "jordi@softcatala.org",
+            }
+          },
+          // ...
+          {
+            "id": "da1560886d4f094c3e6c9ef40349f7d38b5d27d7",
+            "message": "fixed readme",
+            "timestamp": "2012-01-03T23:36:29+02:00",
+            "url": "http://localhost/diaspora/commits/da1560886d4f094c3e6c9ef40349f7d38b5d27d7",
+            "author": {
+              "name": "GitLab dev user",
+              "email": "gitlabdev@dv6700.(none)",
+            },
+          },
+        ],
+        "total_commits_count": 4,
+      };
 
 
-  %h4 Issues events
-  %pre
-    :preserve
+  %h4.prepend-top-20 Issues events
+  %p.light
+    Triggered when new issue created or existing issue was closed.
+    %br
+    Request body:
+  = highlight_js do
+    :erb
       {
         "object_kind":"issue",
         "object_attributes":{
@@ -37,9 +84,13 @@
           "iid":23
         }
       }
-  %h4 Merge request events
-  %pre
-    :preserve
+  %h4.prepend-top-20 Merge request events
+  %p.light
+    Triggered when new merge request created or existing merge request was merged/closed.
+    %br
+    Request body:
+  = highlight_js do
+    :erb
       {
         "object_kind":"merge_request",
         "object_attributes":{
diff --git a/app/views/projects/hooks/_data_ex.html.erb b/app/views/projects/hooks/_data_ex.html.erb
deleted file mode 100644
index 5092aaf6750..00000000000
--- a/app/views/projects/hooks/_data_ex.html.erb
+++ /dev/null
@@ -1,44 +0,0 @@
-<% data_ex_str = <<eos
-{
-  "before": "95790bf891e76fee5e1747ab589903a6a1f80f22",
-  "after": "da1560886d4f094c3e6c9ef40349f7d38b5d27d7",
-  "ref": "refs/heads/master",
-  "user_id": 4,
-  "user_name": "John Smith",
-  "project_id": 15,
-  "repository": {
-    "name": "Diaspora",
-    "url": "git@localhost:diaspora.git",
-    "description": "",
-    "homepage": "http://localhost/diaspora",
-  },
-  "commits": [
-    {
-      "id": "b6568db1bc1dcd7f8b4d5a946b0b91f9dacd7327",
-      "message": "Update Catalan translation to e38cb41.",
-      "timestamp": "2011-12-12T14:27:31+02:00",
-      "url": "http://localhost/diaspora/commits/b6568db1bc1dcd7f8b4d5a946b0b91f9dacd7327",
-      "author": {
-        "name": "Jordi Mallach",
-        "email": "jordi@softcatala.org",
-      }
-    },
-    // ...
-    {
-      "id": "da1560886d4f094c3e6c9ef40349f7d38b5d27d7",
-      "message": "fixed readme",
-      "timestamp": "2012-01-03T23:36:29+02:00",
-      "url": "http://localhost/diaspora/commits/da1560886d4f094c3e6c9ef40349f7d38b5d27d7",
-      "author": {
-        "name": "GitLab dev user",
-        "email": "gitlabdev@dv6700.(none)",
-      },
-    },
-  ],
-  "total_commits_count": 4,
-};
-eos
-%>
-<div class="<%= user_color_scheme_class%>">
-  <%= raw Pygments::Lexer[:js].highlight(data_ex_str) %>
-</div>