diff --git a/website/assets/app.js b/website/assets/app.js
index 1443662fd32f..6093c2a7c0ca 100644
--- a/website/assets/app.js
+++ b/website/assets/app.js
@@ -2,13 +2,56 @@ const cssStandards = require('spike-css-standards')
 const jsStandards = require('spike-js-standards')
 const preactPreset = require('babel-preset-preact')
 const extendRule = require('postcss-extend-rule')
+const webpack = require('webpack')
+
+/* eslint-disable-next-line */
+console.log(`Building assets for environment *${process.env.NODE_ENV}*`)
+
+const isProd =
+  process.env.NODE_ENV === 'production' ||
+  process.env.NODE_ENV === 'tmp-production'
+
+let utilServerUrl
+if (isProd) {
+  utilServerUrl = 'https://util.hashicorp.com'
+} else {
+  utilServerUrl = 'https://hashicorp-web-util-staging.herokuapp.com'
+}
+
+if (process.env.UTIL_SERVER) {
+  utilServerUrl = process.env.UTIL_SERVER
+
+  // remove trailing slash
+  utilServerUrl = utilServerUrl.replace(/\/$/, '')
+
+  /* eslint-disable-next-line */
+  console.log(`utilServerUrl=${utilServerUrl}`)
+}
+
+let segmentWriteKey
+if (isProd) {
+  segmentWriteKey = 'OdSFDq9PfujQpmkZf03dFpcUlywme4sC'
+} else {
+  segmentWriteKey = '0EXTgkNx0Ydje2PGXVbRhpKKoe5wtzcE'
+}
 
 module.exports = {
   ignore: ['yarn.lock', '**/_*'],
-  entry: { 'js/main': './js/index.js', 'js/analytics.js': './js/analytics.js' },
+  entry: {
+    'js/main': './js/index.js',
+    'js/analytics.js': './js/analytics.js',
+    'js/consent-manager': './js/consent-manager.js'
+  },
   postcss: cssStandards({
     appendPlugins: [extendRule()]
   }),
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      utilityServerRoot: JSON.stringify(utilServerUrl),
+      segmentWriteKey: JSON.stringify(segmentWriteKey)
+    })
+  ],
   babel: jsStandards({ appendPresets: [preactPreset] }),
   server: { open: false }
 }
diff --git a/website/assets/css/index.css b/website/assets/css/index.css
index 2d14c411e86c..255ea8fdf0c1 100644
--- a/website/assets/css/index.css
+++ b/website/assets/css/index.css
@@ -19,6 +19,8 @@
 @import '@hashicorp/hashi-split-cta/dist/style.css';
 @import '@hashicorp/hashi-linked-text-summary-list/dist/style.css';
 @import '@hashicorp/hashi-docs-sitemap/dist/style.css';
+@import '@hashicorp/hashi-consent-manager/dist/style.css';
+@import '@hashicorp/hashi-toggle/dist/style.css';
 
 /* to be removed pending new components */
 @import '_inner';
diff --git a/website/assets/js/consent-manager.js b/website/assets/js/consent-manager.js
new file mode 100644
index 000000000000..7b1934645254
--- /dev/null
+++ b/website/assets/js/consent-manager.js
@@ -0,0 +1,65 @@
+import { open, init } from '@hashicorp/hashi-consent-manager'
+
+window.openConsentManager = () => open()
+
+init({
+  version: 1,
+  container: '#consent-manager',
+  companyName: 'HashiCorp',
+  privacyPolicyLink: '/privacy',
+  segmentWriteKey: segmentWriteKey,
+  utilServerRoot: utilityServerRoot,
+  segmentServices: [
+    {
+      key: 'googleanalytics',
+      name: 'Google Analytics',
+      description:
+        'Google Analytics is a popular service for tracking web traffic. We use this data to determine what content our users find important so that we can dedicate more resources toward it.',
+      category: 'Analytics'
+    },
+    {
+      name: 'Marketo V2',
+      description:
+        'Marketo is a marketing automation tool that allows us to segment users into different categories based off of their behaviors.  We use this information to provide tailored information to users in our email campaigns.',
+      category: 'Email Marketing'
+    },
+    {
+      name: 'Hull',
+      description:
+        'Hull is a tool that we use to clean up analytics data and send it between different services. It does not add any javascript tracking code to this site.',
+      category: 'Analytics'
+    },
+    {
+      name: 'Hotjar',
+      description:
+        'Hotjar is a service that generates heatmaps of where users click on our sites. We use this information to ensure that our site is not confusing, and simple to use and navigate.',
+      category: 'Analytics'
+    }
+  ],
+  categories: [
+    {
+      name: 'Functional',
+      description:
+        'Functional services provide a utility to the website, such as the ability to log in, or to get live support. Disabling any of these scripts will cause that utility to be missing from the site.'
+    },
+    {
+      name: 'Analytics',
+      description:
+        'Analytics services keep track of page traffic and user behavior while browsing the site. We use this data internally to improve the usability and performance of the site. Disabling any of these scripts makes it more difficult for us to understand how our site is being used, and slower to improve it.'
+    },
+    {
+      name: 'Email Marketing',
+      description:
+        'Email Marketing services track user behavior while browsing the site. We use this data internally in our marketing efforts to provide users contextually relevant information based off of their behaviors. Disabling any of these scripts makes it more difficult for us to provide you contextually relevant information.'
+    }
+  ],
+  additionalServices: [
+    {
+      name: 'OptinMonster',
+      description:
+        "OptinMonster is a service that we use to show a prompt to sign up for our newsletter if it's perceived that you are interested in our content.",
+      category: 'Functional',
+      body: `var om597a24292a958,om597a24292a958_poll=function(){var e=0;return function(t,a){clearInterval(e),e=setInterval(t,a)}}();!function(e,t,a){if(e.getElementById(a))om597a24292a958_poll(function(){if(window.om_loaded&&!om597a24292a958)return(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0})},25);else{var n=!1,o=e.createElement("script");o.id=a,o.src="//a.optnmstr.com/app/js/api.min.js",o.async=!0,o.onload=o.onreadystatechange=function(){if(!(n||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState))try{n=om_loaded=!0,(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0}),o.onload=o.onreadystatechange=null}catch(e){}},(document.getElementsByTagName("head")[0]||document.documentElement).appendChild(o)}}(document,0,"omapi-script");analytics.page()`
+    }
+  ]
+})
diff --git a/website/assets/js/index.js b/website/assets/js/index.js
index 749b5918355c..49a9a04017b0 100644
--- a/website/assets/js/index.js
+++ b/website/assets/js/index.js
@@ -9,6 +9,7 @@ import megaNav from '@hashicorp/hashi-mega-nav'
 import productDownloader from '@hashicorp/hashi-product-downloader'
 import hero from '@hashicorp/hashi-hero'
 import docsSidenav from '@hashicorp/hashi-docs-sidenav'
+import consentManager from '@hashicorp/hashi-consent-manager'
 
 const components = initializeComponents({
   nav,
@@ -18,5 +19,6 @@ const components = initializeComponents({
   megaNav,
   productDownloader,
   hero,
-  docsSidenav
+  docsSidenav,
+  consentManager
 })
diff --git a/website/assets/package.json b/website/assets/package.json
index 6c9392f04029..3ce6af08a5a7 100644
--- a/website/assets/package.json
+++ b/website/assets/package.json
@@ -11,6 +11,7 @@
     "@hashicorp/hashi-button": "1.0.5",
     "@hashicorp/hashi-callouts": "^2.0.5",
     "@hashicorp/hashi-content": "^0.1.0",
+    "@hashicorp/hashi-consent-manager": "^1.0.5",
     "@hashicorp/hashi-docs-sidenav": "^0.3.0",
     "@hashicorp/hashi-docs-sitemap": "^0.1.4",
     "@hashicorp/hashi-footer": "1.1.2",
@@ -26,9 +27,12 @@
     "@hashicorp/hashi-product-subnav": "^0.5.3",
     "@hashicorp/hashi-section-header": "^4.0.0",
     "@hashicorp/hashi-split-cta": "^0.1.4",
+    "@hashicorp/hashi-toggle": "^0.2.2",
     "@hashicorp/hashi-vertical-text-block-list": "^0.1.1",
     "@hashicorp/js-utils": "^1.0.0",
     "@hashicorp/localstorage-polyfill": "^1.0.3",
+    "@segment/in-eu": "^0.2.1",
+    "@segment/top-domain": "^3.0.0",
     "color-contrast": "^0.0.1",
     "js-cookie": "^2.2.0",
     "marked": "^0.5.1",
diff --git a/website/assets/reshape.js b/website/assets/reshape.js
index c4f419e465b7..854fb4edd0cd 100644
--- a/website/assets/reshape.js
+++ b/website/assets/reshape.js
@@ -13,6 +13,7 @@ const callouts = require('@hashicorp/hashi-callouts')
 const splitCta = require('@hashicorp/hashi-split-cta')
 const linkedTextSummaryList = require('@hashicorp/hashi-linked-text-summary-list')
 const docsSitemap = require('@hashicorp/hashi-docs-sitemap')
+const consentManager = require('@hashicorp/hashi-consent-manager')
 
 module.exports = {
   'hashi-footer': footer,
@@ -29,5 +30,6 @@ module.exports = {
   'hashi-callouts': callouts,
   'hashi-split-cta': splitCta,
   'hashi-linked-text-summary-list': linkedTextSummaryList,
-  'hashi-docs-sitemap': docsSitemap
+  'hashi-docs-sitemap': docsSitemap,
+  'hashi-consent-manager': consentManager
 }
diff --git a/website/config.rb b/website/config.rb
index af9ffa20d6c8..acffc1c2f0b0 100644
--- a/website/config.rb
+++ b/website/config.rb
@@ -17,15 +17,6 @@
 proxy '_redirects', 'netlify-redirects', ignore: true
 
 helpers do
-  # get correct analytics id
-  def segmentId()
-    if (ENV['ENV'] == 'tmp-production')
-      'OdSFDq9PfujQpmkZf03dFpcUlywme4sC'
-    else
-      '0EXTgkNx0Ydje2PGXVbRhpKKoe5wtzcE'
-    end
-  end
-
   # Formats and filters a category of docs for the sidebar component
   def get_sidebar_data(category)
     sitemap.resources.select { |resource|
diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb
index 905d7801c272..bda806c1be6c 100644
--- a/website/source/layouts/layout.erb
+++ b/website/source/layouts/layout.erb
@@ -33,9 +33,19 @@
 
     <link rel='stylesheet' href='/css/index.css' />
 
-    <!-- Analytics scrpts -->
-    <script defer>
-      !function(){var e=window.analytics=window.analytics||[];if(!e.initialize)if(e.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{e.invoked=!0,e.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"],e.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),e.push(a),e}};for(var t=0;t<e.methods.length;t++){var a=e.methods[t];e[a]=e.factory(a)}e.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+e+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(t,a)},e.SNIPPET_VERSION="4.0.0",e.load("<%= segmentId %>")}}();var om597a24292a958,om597a24292a958_poll=function(){var e=0;return function(t,a){clearInterval(e),e=setInterval(t,a)}}();!function(e,t,a){if(e.getElementById(a))om597a24292a958_poll(function(){if(window.om_loaded&&!om597a24292a958)return(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0})},25);else{var n=!1,o=e.createElement("script");o.id=a,o.src="//a.optnmstr.com/app/js/api.min.js",o.async=!0,o.onload=o.onreadystatechange=function(){if(!(n||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState))try{n=om_loaded=!0,(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0}),o.onload=o.onreadystatechange=null}catch(e){}},(document.getElementsByTagName("head")[0]||document.documentElement).appendChild(o)}}(document,0,"omapi-script");analytics.page()
+    <script>
+      // segment analytics
+      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
+      analytics.page({
+        properties: {
+          url: window.location.href,
+          path: window.location.pathname,
+          search: window.location.search,
+          title: document.title,
+          referrer: document.referrer
+        }
+      });
+      }}();
     </script>
 
     <%= yield_content :head %>
@@ -43,10 +53,12 @@
 
   <body id="<%= body_id_for(current_page) %>" class="<%= body_classes_for(current_page) %>">
     <hashi-mega-nav title="<%= defined?(@meganav_title).nil? ? '' : @meganav_title %>" _data="<%= encode(dato.mega_nav) %>"></hashi-mega-nav>
+    <div id="consent-manager"></div>
     <main><%= yield %></main>
     <hashi-footer _data="<%= encode(dato.global_footer) %>"></hashi-footer>
 
     <%= yield_content :scripts %>
+    <script src='/js/consent-manager.js'></script>
     <script src='/js/main.js'></script>
 
     <script type="application/ld+json">