diff --git a/assets/js/featureToggle.js b/assets/js/featureToggle.js
new file mode 100644
index 00000000000..1e10e500f1c
--- /dev/null
+++ b/assets/js/featureToggle.js
@@ -0,0 +1,84 @@
+const unleash = function(){
+  
+  const toggleRepository = {
+    features: null,
+    get: async (name) => {
+      if (toggleRepository.features === null) {
+        try {
+          const features = await fetch('https://www.section.io/featuretoggle')
+            .then(response => response.json())
+            .then(data => {
+              return data.features
+            })
+            toggleRepository.features = features;
+        } catch (e) {
+          toggleRepository.features = []
+        }
+      }
+
+      return toggleRepository.features.find(feat => feat.name === name);
+    }
+  }
+
+  const cookieStrategy = {
+    isEnabled: (parameters, context) => {
+      const checkIfCookieExists = (value) => {
+        if (document.cookie.split(';').some((item) => item.trim().startsWith(`${value}=`))) {
+          return true;
+        } 
+        return false;
+      }
+      const enableHyvorIfCookieExists = () => {
+        // Capture toggle value/strategy.
+        const hyvorToggleCookieName = parameters.cookieName
+        
+        // Determine whether user has the correct cookie
+        return checkIfCookieExists(hyvorToggleCookieName);
+      }
+    
+      return enableHyvorIfCookieExists();
+    }
+  }
+
+  const strategyImplRepository = {
+    get: (name) => {
+      switch (name) {
+        case 'activeWithCookieName':
+          return cookieStrategy
+          break;
+        default:
+          return {
+            isEnabled: (parameters, context) => {
+              return true
+            }
+          }
+      }
+
+    }
+  }
+
+  const isEnabled = async (name, unleashContext = {}, defaultValue = false) => {
+    const toggle = await toggleRepository.get(name);
+
+    if (!toggle) {
+      return defaultValue;
+    } else if (!toggle.enabled) {
+      return false;
+    } else {
+      for (let i = 0; i < toggle.strategies.length; i++) {
+        let strategyDef = toggle.strategies[i];
+        let strategyImpl = strategyImplRepository.get(strategyDef.name);
+        if (strategyImpl.isEnabled(strategyDef.parameters, unleashContext)) {
+          return true;
+        }
+      }
+      return false;
+    }
+  }
+
+  return {
+    isEnabled: isEnabled
+  }
+}();
+
+
diff --git a/assets/scss/components/_all.scss b/assets/scss/components/_all.scss
index 92f42048ae9..4fa843f01a3 100644
--- a/assets/scss/components/_all.scss
+++ b/assets/scss/components/_all.scss
@@ -9,6 +9,7 @@
 @import "hero-color";
 @import "hero-blocks";
 @import "hero-blocks-redux";
+@import "hyvor-comments";
 @import "nav";
 @import "pagination";
 @import "rich-text";
diff --git a/assets/scss/components/_hyvor-comments.scss b/assets/scss/components/_hyvor-comments.scss
new file mode 100644
index 00000000000..6fdd0ce13a2
--- /dev/null
+++ b/assets/scss/components/_hyvor-comments.scss
@@ -0,0 +1,9 @@
+.comments-wrapper {
+  #hyvor-talk-view {
+    display: none;
+  }
+
+  #hyvor-talk-view.visible {
+    display: block;
+  }
+}
diff --git a/layouts/articles/single.html b/layouts/articles/single.html
index b4686acd9b5..605ce8988d7 100644
--- a/layouts/articles/single.html
+++ b/layouts/articles/single.html
@@ -1,4 +1,4 @@
- {{ define "main" }}
+{{ define "main" }}
 <article> 
 
   <section class='hero-blocks xs-pt-50 xs-pb-50 sm-pt-100 sm-pb-100 -blue-blocks'>
@@ -150,4 +150,40 @@ <h3 class="title-3 xs-mb-20">{{ .Site.Data.globals.enged_cta.title }}</h3>
   </div>
 </section>
 
+<div class="comments-wrapper">
+  <div id="hyvor-talk-view"></div>
+</div>
+
+{{ if eq (getenv "HUGO_ENV") "production" | or (eq $.Site.Params.env "production") }}
+  <script type="text/javascript">
+    var HYVOR_TALK_WEBSITE = 5716;
+    var HYVOR_TALK_CONFIG = {
+        url: false,
+        id: 5716
+    };
+  </script>
+{{ else }}
+  <script type="text/javascript">
+    var HYVOR_TALK_WEBSITE = 5728;
+    var HYVOR_TALK_CONFIG = {
+        url: false,
+        id: 5728
+    };
+  </script>
+{{ end }}
+<script async type="text/javascript" src="//talk.hyvor.com/web-api/embed.js"></script>
+
+{{ $featureToggle := resources.Get "js/featureToggle.js" }}
+<script defer language="javascript" type="text/javascript" src="{{ $featureToggle.Permalink }}"></script>
+
+<script type="text/javascript">
+  document.addEventListener("DOMContentLoaded", async function() {
+
+    if (await unleash.isEnabled("section.io.hyvorTalk", {}, false)) {
+      const commentsBox = document.getElementById('hyvor-talk-view');
+      commentsBox.classList.add('visible');
+    }
+  });
+</script>
+
 {{ end }}
diff --git a/layouts/partials/engineering-education/articles-header.html b/layouts/partials/engineering-education/articles-header.html
index e4ca26f1ae9..c6af61ecdd1 100644
--- a/layouts/partials/engineering-education/articles-header.html
+++ b/layouts/partials/engineering-education/articles-header.html
@@ -94,4 +94,4 @@ <h3 class="title-6">{{.Title}}</h3>
       </ul>
     </div>
   </section>
-</article>
\ No newline at end of file
+</article>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f0c3b2e72a6..3a69e42273e 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -43,6 +43,7 @@
       })
     },300);
 </script>
+
 {{- if eq (getenv "HUGO_ENV") "production" | or (eq $.Site.Params.env "production") -}}
 {{ partial "head-scripts" }}
-{{- end -}}
\ No newline at end of file
+{{- end -}}