diff --git a/docs/demo.html b/docs/demo.html
index a4c9ac9..8b9147f 100644
--- a/docs/demo.html
+++ b/docs/demo.html
@@ -104,6 +104,7 @@
         <div id="side-by-side" style="margin: 0 auto;">
         </div>
 
+
     </div>
 
     <footer class="footer clearfix">
diff --git a/docs/index.html b/docs/index.html
index bbe31ed..5841247 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -94,7 +94,8 @@
                         </span>
             <h1 class="hero-header">Diff parser and pretty html generator</h1>
             <h4 class="text-muted">Better diffs, unmatched reviews.</h4>
-            <a class="btn btn-lg" href="demo.html">Demo</a>
+            <!-- <a class="btn btn-lg" href="demo.html">Demo</a> -->
+            <h2><a class="btn btn-lg" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Try the Online Diff Prettifier</a></h2>
 
             <div class="screenshots screenshots-fan clearfix">
 
diff --git a/docs/main.css b/docs/main.css
index 4af13e3..d75ae66 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -536,3 +536,21 @@ a:hover, a:focus {
   -ms-user-select: none;
   user-select: none;
 }
+
+.diff-url-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+.diff-url-input {
+  display: inline-block;
+  margin-left: 10px;
+  flex-grow: 1;
+  height: 31px;
+}
+
+.diff-url-btn {
+  display: inline-block;
+  float: left;
+  width: 48px;
+}
diff --git a/docs/url.html b/docs/url.html
new file mode 100644
index 0000000..8f51e1a
--- /dev/null
+++ b/docs/url.html
@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang="en" class="js">
+<head>
+    <meta charset="utf-8">
+    <!--[if IE]>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
+    <![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta name="description" content="Diff parser and pretty html generator">
+    <meta name="keywords" content="diff2html,git,diff,unified,pretty,html,css,javaccript">
+    <meta name="author" content="Rodrigo Fernandes (rtfpessoa)">
+
+    <title>diff2html</title>
+
+    <!-- search engine -->
+    <link rel="canonical" href="https://diff2html.xyz">
+
+    <!-- open graph -->
+    <meta property="og:title" content="diff2html">
+    <meta property="og:type" content="website">
+
+    <meta property="og:description"
+          content="Diff parser and pretty html generator.">
+
+    <meta property="og:url" content="https://diff2html.xyz">
+    <meta property="og:site_name" content="diff2html">
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
+          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+    <!-- Custom styles for this template -->
+    <link href="main.css" rel="stylesheet">
+
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
+
+    <!-- diff2html -->
+    <link rel="stylesheet" type="text/css" href="assets/diff2html.css">
+    <!-- -->
+
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-78351861-2', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+</head>
+<body class="swag-line template-index">
+<div class="container-overflow-wrap">
+
+    <div class="container">
+        <nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#global-nav">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="index.html">diff2html</a>
+            </div>
+
+            <div class="collapse navbar-collapse" id="global-nav">
+                <div class="navbar-right">
+                    <ul class="nav navbar-nav">
+
+                        <li>
+                            <a href="index.html#install">Getting Started</a>
+                        </li>
+
+                        <li>
+                            <a href="index.html#cli">CLI</a>
+                        </li>
+
+                        <li>
+                            <a href="demo.html">Demo</a>
+                        </li>
+
+                        <li>
+                            <a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">Docs</a>
+                        </li>
+
+                        <li>
+                            <a href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank">Support</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <h1>Diff Prettifier <a href="#help">?</a></h1>
+        <p>GitHub, Bitbucket and GitLab commit and pull request compatible</p>
+        <p>Just paste the GitHub, Bitbucket or GitLab commit, pull request or merge request url
+          or any other git or unified compatible diff and we will render a pretty html representation of it
+          with code syntax highlight and line similarity matching for better code reviews.
+        </p>
+        <br>
+        <div class="diff-url-wrapper">
+          <a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
+          <input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
+        </div>
+        <br>
+        <h2>Line by Line</h2>
+
+        <div id="line-by-line" style="margin: 0 auto;">
+        </div>
+        <br>
+        <h3 id="help">Help:</h3>
+        <ul>
+          <li>
+            <b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
+            <p>Code Syntax Highlight</p>
+            <p>Line similarity match (similar lines are together)</p>
+            <p>Line by Line and Side by Side (SOON) diffs</p>
+            <p>Supports any git and unified compatible diffs</p>
+            <p>Easy code selection</p>
+          </li>
+          <li>
+            <b>What urls are supported?</b>
+            <p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
+            <p>Any Git or Unified Raw Diff or Patch urls.</p>
+          </li>
+          <li>
+            <b>Can I send a custom url for a friend, colleague or co-worker?</b>
+            <p>Just add a url parameter called diff to current url using as value your Commit, Pull Request, Merge Request, Diff or Patch url.</p>
+            <p>ex: <a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/url?diff=https://github.com/rtfpessoa/diff2html/pull/106</a></p>
+            <p>You can also use an hashtag (# or #! or #!/) in the end of the url.
+              This will be overridden if you click any href id and for that reason not advised.</p>
+          </li>
+          <li>
+            <b>Why can't I paste a diff?</b>
+            <p><a href="https://diffy.org/">diffy.org</a> is an amazing tool created by <a href="https://github.com/pbu88">pbu88</a>
+              to share your diffs and uses diff2html under the hood.</p>
+            <p>Also, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></p>
+          </li>
+        </ul>
+        <br>
+        <h3>Thank you</h3>
+        <p>I want to thank <a href="https://github.com/kevinsimper">kevinsimper</a> for this great idea,
+          providing better diff support for existing online services.
+        </p>
+
+
+    </div>
+
+    <footer class="footer clearfix">
+        <p class="col-xs-10 col-xs-offset-1">
+            Website originally designed and built by
+            <a href="https://twitter.com/mdo" target="_blank">@mdo</a>,
+            <a href="https://twitter.com/fat" target="_blank">@fat</a>, and
+            <a href="https://twitter.com/dhg" target="_blank">@dhg</a>,
+            adapted with <span class="hero-red">❤</span> by
+            <a href="https://twitter.com/rtfpessoa" target="_blank">@rtfpessoa</a>.
+        </p>
+        <ul class="footer-list col-xs-10 col-xs-offset-1">
+
+            <li class="footer-list-item">
+                <a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use"
+                   target="_blank">FAQ</a>
+            </li>
+
+            <li class="footer-list-item">
+                <a class="footer-list-link" href="https://diff2html.xyz">diff2html</a>
+            </li>
+
+        </ul>
+    </footer>
+
+</div>
+
+<!-- General JavaScript -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
+        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
+        crossorigin="anonymous"></script>
+
+<script type="application/ld+json">
+{
+  "@context": "http://schema.org/",
+  "@type": "SoftwareSourceCode",
+  "name": "diff2html",
+  "author": "Rodrigo Fernandes",
+  "image": "https://diff2html.xyz/img/snapshot-3.png",
+  "description": "Diff parser and pretty html generator.",
+  "codeRepository": "https://github.com/rtfpessoa/diff2html",
+  "programmingLanguage": "JavaScript",
+  "runtimePlatform": "Node >= 0.12",
+  "mainEntityOfPage": "https://diff2html.xyz/"
+}
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>
+
+<!-- diff2html -->
+<script type="text/javascript" src="assets/diff2html.js"></script>
+<script type="text/javascript" src="assets/diff2html-ui.js"></script>
+<!-- -->
+
+<script>
+  /*
+   * Example URLs:
+   *
+   * github/rtfpessoa/diff2html/7d02e67f3b3386ac5d804f974d025cd7a1165839
+   * https://github.com/rtfpessoa/diff2html/commit/7d02e67f3b3386ac5d804f974d025cd7a1165839
+   * https://github.com/rtfpessoa/diff2html/pull/106
+   *
+   * gitlab/gitlab-org/gitlab-ce/4e963fed42ad518caa7353d361a38a1250c99c41
+   * https://gitlab.com/gitlab-org/gitlab-ce/commit/4e963fed42ad518caa7353d361a38a1250c99c41
+   * https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6763
+   *
+   * bitbucket/atlassian/amps/52c38116f12475f75af4a147b7a7685478b83eca
+   * https://bitbucket.org/atlassian/amps/commits/52c38116f12475f75af4a147b7a7685478b83eca
+   * https://bitbucket.org/atlassian/amps/pull-requests/236
+   */
+
+  $(document).ready(function() {
+    var hash = window.location.hash
+      .replace(/^(#!?\/?)/, "");
+
+    var search = window.location.search;
+
+    if (hash) {
+      $("#url").val(hash);
+      draw(prepareUrl(hash));
+    } else if (search) {
+      try {
+        var url = search
+          .split("?")[1]
+          .split("diff=")[1]
+          .split("&")[0];
+        $("#url").val(url);
+        draw(prepareUrl(url));
+      } catch (_ignore) {
+      }
+    }
+
+    bind(prepareUrl);
+
+    function bind() {
+      $("#url-btn").click(function(e) {
+        e.preventDefault();
+        var url = $("#url").val();
+        var preparedUrl = prepareUrl(url);
+        draw(preparedUrl);
+      });
+    }
+
+    function prepareUrl(url) {
+      var githubPath = /^github\/(.*?)\/(.*?)\/(.*?)$/;
+      var githubCommitUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+      var githubPrUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/pull\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+
+      var gitlabPath = /^gitlab\/(.*?)\/(.*?)\/(.*?)$/;
+      var gitlabCommitUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+      var gitlabPrUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/merge_requests\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+
+      var bitbucketPath = /^bitbucket\/(.*?)\/(.*?)\/(.*?)$/;
+      var bitbucketCommitUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/commits\/(.*?)(?:\/raw)?(?:\/.*)?$/;
+      var bitbucketPrUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/pull-requests\/(.*?)(?:\/.*)?$/;
+
+      function genericUrlGen(provider, userName, projectName, type, value) {
+        return "https://" + provider + ".com/" + userName + "/" + projectName + "/" + type + "/" + value + ".diff";
+      }
+
+      function bitbucketUrlGen(userName, projectName, type, value) {
+        var baseUrl = "https://bitbucket.org/api/2.0/repositories/";
+
+        if (type == "pullrequests") {
+          return baseUrl + userName + "/" + projectName + "/pullrequests/" + value + "/diff";
+        }
+
+        return baseUrl + userName + "/" + projectName + "/diff/" + value;
+      }
+
+      var values;
+      var finalUrl;
+      if ((values = githubPath.exec(url))) {
+        finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
+      } else if ((values = githubCommitUrl.exec(url))) {
+        finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
+      } else if ((values = githubPrUrl.exec(url))) {
+        finalUrl = genericUrlGen("github", values[1], values[2], "pull", values[3]);
+
+      } else if ((values = gitlabPath.exec(url))) {
+        finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
+      } else if ((values = gitlabCommitUrl.exec(url))) {
+        finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
+      } else if ((values = gitlabPrUrl.exec(url))) {
+        finalUrl = genericUrlGen("gitlab", values[1], values[2], "merge_requests", values[3]);
+
+      } else if ((values = bitbucketPath.exec(url))) {
+        finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
+      } else if ((values = bitbucketCommitUrl.exec(url))) {
+        finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
+      } else if ((values = bitbucketPrUrl.exec(url))) {
+        finalUrl = bitbucketUrlGen(values[1], values[2], "pullrequests", values[3]);
+      } else {
+        console.info("Could not parse url, using the provided url.");
+        finalUrl = url;
+      }
+
+      return finalUrl;
+    }
+
+    function draw(url) {
+      var fullUrl = 'https://crossorigin.me/' + url;
+      fetch(fullUrl)
+        .then((res) => res.text())
+        .then((data) => {
+          var diff2htmlUi = new Diff2HtmlUI({diff: data});
+          diff2htmlUi.draw('#line-by-line', {
+            showFiles: true,
+            matching: 'lines'
+          });
+          diff2htmlUi.fileListCloseable('#line-by-line', false);
+          diff2htmlUi.highlightCode('#line-by-line');
+        });
+    }
+  });
+</script>
+
+
+</body>
+</html>
diff --git a/website/templates/pages/demo/demo.partial.html b/website/templates/pages/demo/demo.partial.html
index 43cc93e..2e137e8 100644
--- a/website/templates/pages/demo/demo.partial.html
+++ b/website/templates/pages/demo/demo.partial.html
@@ -6,4 +6,4 @@
         <h1>Side by Side</h1>
 
         <div id="side-by-side" style="margin: 0 auto;">
-        </div>
\ No newline at end of file
+        </div>
diff --git a/website/templates/pages/index/index.partial.html b/website/templates/pages/index/index.partial.html
index e407b94..cf3ca1a 100644
--- a/website/templates/pages/index/index.partial.html
+++ b/website/templates/pages/index/index.partial.html
@@ -5,7 +5,8 @@
                         </span>
             <h1 class="hero-header">Diff parser and pretty html generator</h1>
             <h4 class="text-muted">Better diffs, unmatched reviews.</h4>
-            <a class="btn btn-lg" href="demo.html">Demo</a>
+            <!-- <a class="btn btn-lg" href="demo.html">Demo</a> -->
+            <h2><a class="btn btn-lg" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Try the Online Diff Prettifier</a></h2>
 
             <div class="screenshots screenshots-fan clearfix">
 
diff --git a/website/templates/pages/url/url-assets.partial.html b/website/templates/pages/url/url-assets.partial.html
new file mode 100644
index 0000000..60e4d9f
--- /dev/null
+++ b/website/templates/pages/url/url-assets.partial.html
@@ -0,0 +1,5 @@
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
+
+    <!-- diff2html -->
+    <link rel="stylesheet" type="text/css" href="assets/diff2html.css">
+    <!-- -->
diff --git a/website/templates/pages/url/url-scripts.partial.html b/website/templates/pages/url/url-scripts.partial.html
new file mode 100644
index 0000000..3da4285
--- /dev/null
+++ b/website/templates/pages/url/url-scripts.partial.html
@@ -0,0 +1,130 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>
+
+<!-- diff2html -->
+<script type="text/javascript" src="assets/diff2html.js"></script>
+<script type="text/javascript" src="assets/diff2html-ui.js"></script>
+<!-- -->
+
+<script>
+  /*
+   * Example URLs:
+   *
+   * github/rtfpessoa/diff2html/7d02e67f3b3386ac5d804f974d025cd7a1165839
+   * https://github.com/rtfpessoa/diff2html/commit/7d02e67f3b3386ac5d804f974d025cd7a1165839
+   * https://github.com/rtfpessoa/diff2html/pull/106
+   *
+   * gitlab/gitlab-org/gitlab-ce/4e963fed42ad518caa7353d361a38a1250c99c41
+   * https://gitlab.com/gitlab-org/gitlab-ce/commit/4e963fed42ad518caa7353d361a38a1250c99c41
+   * https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6763
+   *
+   * bitbucket/atlassian/amps/52c38116f12475f75af4a147b7a7685478b83eca
+   * https://bitbucket.org/atlassian/amps/commits/52c38116f12475f75af4a147b7a7685478b83eca
+   * https://bitbucket.org/atlassian/amps/pull-requests/236
+   */
+
+  $(document).ready(function() {
+    var hash = window.location.hash
+      .replace(/^(#!?\/?)/, "");
+
+    var search = window.location.search;
+
+    if (hash) {
+      $("#url").val(hash);
+      draw(prepareUrl(hash));
+    } else if (search) {
+      try {
+        var url = search
+          .split("?")[1]
+          .split("diff=")[1]
+          .split("&")[0];
+        $("#url").val(url);
+        draw(prepareUrl(url));
+      } catch (_ignore) {
+      }
+    }
+
+    bind(prepareUrl);
+
+    function bind() {
+      $("#url-btn").click(function(e) {
+        e.preventDefault();
+        var url = $("#url").val();
+        var preparedUrl = prepareUrl(url);
+        draw(preparedUrl);
+      });
+    }
+
+    function prepareUrl(url) {
+      var githubPath = /^github\/(.*?)\/(.*?)\/(.*?)$/;
+      var githubCommitUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+      var githubPrUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/pull\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+
+      var gitlabPath = /^gitlab\/(.*?)\/(.*?)\/(.*?)$/;
+      var gitlabCommitUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+      var gitlabPrUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/merge_requests\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+
+      var bitbucketPath = /^bitbucket\/(.*?)\/(.*?)\/(.*?)$/;
+      var bitbucketCommitUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/commits\/(.*?)(?:\/raw)?(?:\/.*)?$/;
+      var bitbucketPrUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/pull-requests\/(.*?)(?:\/.*)?$/;
+
+      function genericUrlGen(provider, userName, projectName, type, value) {
+        return "https://" + provider + ".com/" + userName + "/" + projectName + "/" + type + "/" + value + ".diff";
+      }
+
+      function bitbucketUrlGen(userName, projectName, type, value) {
+        var baseUrl = "https://bitbucket.org/api/2.0/repositories/";
+
+        if (type == "pullrequests") {
+          return baseUrl + userName + "/" + projectName + "/pullrequests/" + value + "/diff";
+        }
+
+        return baseUrl + userName + "/" + projectName + "/diff/" + value;
+      }
+
+      var values;
+      var finalUrl;
+      if ((values = githubPath.exec(url))) {
+        finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
+      } else if ((values = githubCommitUrl.exec(url))) {
+        finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
+      } else if ((values = githubPrUrl.exec(url))) {
+        finalUrl = genericUrlGen("github", values[1], values[2], "pull", values[3]);
+
+      } else if ((values = gitlabPath.exec(url))) {
+        finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
+      } else if ((values = gitlabCommitUrl.exec(url))) {
+        finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
+      } else if ((values = gitlabPrUrl.exec(url))) {
+        finalUrl = genericUrlGen("gitlab", values[1], values[2], "merge_requests", values[3]);
+
+      } else if ((values = bitbucketPath.exec(url))) {
+        finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
+      } else if ((values = bitbucketCommitUrl.exec(url))) {
+        finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
+      } else if ((values = bitbucketPrUrl.exec(url))) {
+        finalUrl = bitbucketUrlGen(values[1], values[2], "pullrequests", values[3]);
+      } else {
+        console.info("Could not parse url, using the provided url.");
+        finalUrl = url;
+      }
+
+      return finalUrl;
+    }
+
+    function draw(url) {
+      var fullUrl = 'https://crossorigin.me/' + url;
+      fetch(fullUrl)
+        .then((res) => res.text())
+        .then((data) => {
+          var diff2htmlUi = new Diff2HtmlUI({diff: data});
+          diff2htmlUi.draw('#line-by-line', {
+            showFiles: true,
+            matching: 'lines'
+          });
+          diff2htmlUi.fileListCloseable('#line-by-line', false);
+          diff2htmlUi.highlightCode('#line-by-line');
+        });
+    }
+  });
+</script>
diff --git a/website/templates/pages/url/url.partial.html b/website/templates/pages/url/url.partial.html
new file mode 100644
index 0000000..b2192f3
--- /dev/null
+++ b/website/templates/pages/url/url.partial.html
@@ -0,0 +1,51 @@
+        <h1>Diff Prettifier <a href="#help">?</a></h1>
+        <p>GitHub, Bitbucket and GitLab commit and pull request compatible</p>
+        <p>Just paste the GitHub, Bitbucket or GitLab commit, pull request or merge request url
+          or any other git or unified compatible diff and we will render a pretty html representation of it
+          with code syntax highlight and line similarity matching for better code reviews.
+        </p>
+        <br>
+        <div class="diff-url-wrapper">
+          <a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
+          <input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
+        </div>
+        <br>
+        <h2>Line by Line</h2>
+
+        <div id="line-by-line" style="margin: 0 auto;">
+        </div>
+        <br>
+        <h3 id="help">Help:</h3>
+        <ul>
+          <li>
+            <b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
+            <p>Code Syntax Highlight</p>
+            <p>Line similarity match (similar lines are together)</p>
+            <p>Line by Line and Side by Side (SOON) diffs</p>
+            <p>Supports any git and unified compatible diffs</p>
+            <p>Easy code selection</p>
+          </li>
+          <li>
+            <b>What urls are supported?</b>
+            <p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
+            <p>Any Git or Unified Raw Diff or Patch urls.</p>
+          </li>
+          <li>
+            <b>Can I send a custom url for a friend, colleague or co-worker?</b>
+            <p>Just add a url parameter called diff to current url using as value your Commit, Pull Request, Merge Request, Diff or Patch url.</p>
+            <p>ex: <a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/url?diff=https://github.com/rtfpessoa/diff2html/pull/106</a></p>
+            <p>You can also use an hashtag (# or #! or #!/) in the end of the url.
+              This will be overridden if you click any href id and for that reason not advised.</p>
+          </li>
+          <li>
+            <b>Why can't I paste a diff?</b>
+            <p><a href="https://diffy.org/">diffy.org</a> is an amazing tool created by <a href="https://github.com/pbu88">pbu88</a>
+              to share your diffs and uses diff2html under the hood.</p>
+            <p>Also, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></p>
+          </li>
+        </ul>
+        <br>
+        <h3>Thank you</h3>
+        <p>I want to thank <a href="https://github.com/kevinsimper">kevinsimper</a> for this great idea,
+          providing better diff support for existing online services.
+        </p>
