diff --git a/assets/js/content-interactions.js b/assets/js/content-interactions.js
index b2a5d4262..aa54f64d3 100644
--- a/assets/js/content-interactions.js
+++ b/assets/js/content-interactions.js
@@ -16,7 +16,8 @@ var elementWhiteList = [
   ".code-tabs p a",
   ".truncate-toggle",
   ".children-links a",
-  ".list-links a"
+  ".list-links a",
+  "a.url-trigger"
 ]
 
 $('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {
diff --git a/assets/js/influxdb-url.js b/assets/js/influxdb-url.js
new file mode 100644
index 000000000..7a14c23f5
--- /dev/null
+++ b/assets/js/influxdb-url.js
@@ -0,0 +1,61 @@
+var defaultUrl = "http://localhost:9999"
+
+function getUrl() {
+  var currentUrl = Cookies.get('influxdb_url')
+  if (typeof currentUrl == 'undefined' ) {
+    return defaultUrl
+  } else {
+    return currentUrl
+  }
+}
+
+function updateUrls(currentUrl, newUrl) {
+  if (typeof currentUrl != newUrl) {
+    $(".article--content pre").each(function() {
+      $(this).html($(this).html().replace(currentUrl,  newUrl));
+    });
+  }
+}
+
+function appendUrlSelector(currentUrl) {
+  $(".article--content pre").each(function() {
+    var code = $(this).html()
+    if (code.includes(currentUrl)) {
+      $(this).after("<div class='select-url'><a class='url-trigger' href='#'>InfluxDB URL</a></div>")
+      $('.select-url').fadeIn(400)
+    }
+  });
+}
+
+function toggleModal() {
+  $(".modal").fadeToggle(200).toggleClass("open")
+}
+
+function setRadioButton(currentUrl) {
+  $('input[name="influxdb-loc"][value="' + currentUrl + '"]').prop("checked", true)
+}
+
+function storeUrl(newUrl) {
+  Cookies.set('influxdb_url', newUrl)
+}
+
+$('input[name="influxdb-loc"]').change(function() {
+  var newUrl = $(this).val()
+  updateUrls(getUrl(), newUrl)
+  storeUrl(newUrl)
+})
+
+// Update URLs on load
+updateUrls(defaultUrl, getUrl())
+
+// Append URL selector buttons to code blocks
+appendUrlSelector(getUrl())
+
+// Set active radio button on page load
+setRadioButton(getUrl())
+
+// Open and close modal window
+$("#modal-close, .modal-overlay, .url-trigger").click(function(e) {
+  e.preventDefault()
+  toggleModal()
+})
diff --git a/assets/js/region-url.js b/assets/js/region-url.js
deleted file mode 100644
index 8fc5589dd..000000000
--- a/assets/js/region-url.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var url = "https://us-west-2-1.aws.cloud2.influxdata.com"
-
-// Create a way for users to select their region
-// store the region url as a cookie
-
-// set a session cookie for the url
-// If the session cookie isn't defined, don't do anything
-
-function updateUrls() {
-  $(".article--content pre").each(function() {
-    $(this).html($(this).html().replace("http://localhost:9999", url));
-  });
-}
-
-updateUrls()
diff --git a/assets/styles/layouts/_modal.scss b/assets/styles/layouts/_modal.scss
new file mode 100644
index 000000000..232867e5f
--- /dev/null
+++ b/assets/styles/layouts/_modal.scss
@@ -0,0 +1,216 @@
+.modal {
+  display: none;
+  padding: 1rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+
+  .modal-overlay {
+    position: absolute;
+    top:0;
+    left:0;
+    width: 100%;
+    height: 100%;
+    @include gradient($grad-miyazakisky);
+    opacity: .85;
+  }
+
+  .modal-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .modal-body {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    max-width: 650px;
+    max-height: 95vh;
+    margin-top: 10vh;
+    padding: .75rem 2rem 1.5rem;
+    border-radius: $radius * 1.5;
+    background: $article-bg;
+    color: $article-text;
+    font-size: 1rem;
+    transition: margin .4s;
+  }
+
+  &.open {
+    .modal-body { margin-top: 0; }
+  }
+
+  #modal-close {
+    position: absolute;
+    padding: .25rem;
+    top: 1rem;
+    right: 1rem;
+    color: rgba($article-text, .5);
+    transition: color .2s;
+    text-decoration: none;
+
+    &:hover {
+      color: $article-text;
+    }
+  }
+
+  .modal-content{
+    overflow: scroll;
+
+    h3 {
+      color: $article-heading;
+      font-weight: $medium;
+      font-size: 1.4rem;
+      margin-bottom: 1rem;
+    }
+
+    h4 {
+      color: $article-heading;
+      font-weight: $medium;
+      margin: 1rem 0 .5rem $radius;
+    }
+
+    h5 {
+      margin: .5rem 0 0;
+      color: $article-bold;
+    }
+
+    p,li {
+      margin: .25rem 0;
+      line-height: 1.5rem;
+      strong {
+        font-weight: $medium;
+        color: $article-bold;
+      }
+      &.note {
+        padding-top: 1.25rem;
+        margin-top: 1.5rem;
+        color: rgba($article-text, .5);
+        border-top: 1px solid rgba($article-text, .25);
+        font-size: .9rem;
+        font-style: italic;
+      }
+    }
+
+    a {
+      color: $article-link;
+      font-weight: $medium;
+      text-decoration: none;
+      transition: color .2s;
+      &:hover {
+        color: $article-link-hover;
+      }
+    }
+  }
+
+  .products {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    justify-content: flex-start;
+  }
+
+  .product {
+    margin-right: .5rem;
+
+    .providers{
+      display: flex;
+      flex-wrap: wrap;
+      padding: .5rem 1rem;
+      background: rgba($article-text, .05);
+      border-radius: $radius;
+
+      .provider {
+        flex-grow: 1;
+        &:not(:last-child) {margin-right: 1rem;}
+      }
+
+      ul {
+        margin: .5rem .5rem .5rem 0;
+        padding: 0;
+        list-style: none;
+      }
+    }
+  }
+
+  .radio {
+    position: relative;
+    display: inline-block;
+    height: 1.15em;
+    width: 1.15em;
+    background: rgba($article-text, .05);
+    margin: 0 .3rem 0 .1rem;
+    vertical-align: text-top;
+    border-radius: $radius;
+    cursor: pointer;
+    border: 1.5px solid rgba($article-text, .2);
+    user-select: none;
+  }
+
+  input[type='radio'] {
+    margin-right: -1.1rem ;
+    padding: 0;
+    vertical-align: top;
+    opacity: 0;
+    cursor: pointer;
+
+    & + .radio:after {
+      content: "";
+      display: block;
+      position: absolute;
+      height: .5rem;
+      width: .5rem;
+      border-radius: 50%;
+      background: $article-link;
+      top: 50%;
+      left: 50%;
+      opacity: 0;
+      transform: scale(2) translate(-20%, -20%);
+      transition: all .2s;
+    }
+
+    &:checked + .radio:after {
+      opacity: 1;
+      transform: scale(1) translate(-50%, -50%);
+    }
+  }
+}
+
+///////////////////////////// InfluxDB URL Triggers ////////////////////////////
+
+.article--content {
+  .select-url {
+    margin: -2.5rem 0 1rem;
+    text-align: right;
+    display: none;
+  }
+
+  .url-trigger {
+    padding: .25rem .5rem;
+    display: inline-block;
+    font-size: .85rem;
+    font-style: italic;
+    color: rgba($article-tab-code-text, .5);
+    background: $article-code-bg;
+    border-radius: 0 0 $radius $radius;
+
+    &:before {
+      content: "\e923";
+      display: inline-block;
+      margin-right: .35rem;
+      font-family: "icomoon";
+      font-style: normal;
+      font-size: .8rem;
+    }
+
+    &:hover {
+     color: $article-tab-code-text;
+    }
+  }
+
+  .code-tab-content {
+    .select-url{margin-top: -3.25rem} 
+  }
+}
diff --git a/assets/styles/layouts/_syntax-highlighting.scss b/assets/styles/layouts/_syntax-highlighting.scss
index 20d3ddcfc..36e605475 100644
--- a/assets/styles/layouts/_syntax-highlighting.scss
+++ b/assets/styles/layouts/_syntax-highlighting.scss
@@ -1,3 +1,5 @@
+pre { line-height: 1.25rem; }
+
 code[class*="language-"],
 pre[class*="language-"] {
 	/*text-shadow: 0 1px #101419;*/
@@ -50,8 +52,6 @@ pre[class*="language-"] {
 
 .highlight  { color: $article-code;
 
-  line-height: 1.25rem;
-
 	// COLORS
 
 	.gh, 		/* Generic.Heading */
diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss
index 156d90a83..68ada4f74 100644
--- a/assets/styles/layouts/_top-nav.scss
+++ b/assets/styles/layouts/_top-nav.scss
@@ -36,18 +36,18 @@
   }
 
   .version-selector {
-    display: inline-block;
-    position: absolute;
-    z-index: 100;
-    right: 3.5rem;
-    color: $g20-white;
-    height: 2rem;
-    @include gradient($version-selector-gradient);
-    font-weight: $medium;
-    border-radius: $radius;
-    overflow: hidden;
-    cursor: pointer;
-    transition: right .2s;
+  display: inline-block;
+  position: absolute;
+  z-index: 100;
+  right: 5.5rem;
+  color: $g20-white;
+  height: 2rem;
+  @include gradient($version-selector-gradient);
+  font-weight: $medium;
+  border-radius: $radius;
+  overflow: hidden;
+  cursor: pointer;
+  transition: right .2s;
 
     .selected {
       padding: 0 1.75rem 0 .75rem;
@@ -65,7 +65,6 @@
 
     &.open {
       height: auto;
-      @include gradient($version-selector-gradient);
       &:after {
         transform: rotate(180deg);
       }
@@ -102,7 +101,7 @@
     }
   }
 
-  .theme-switcher, #search-btn {
+  .theme-switcher, #search-btn, .url-trigger {
     display: inline-block;
     padding: 0;
     font-size: 1.8rem;
@@ -126,6 +125,12 @@
     &#theme-switch-light { display: $theme-switch-light; }
   }
 
+  .url-trigger {
+    font-size: 1.1rem;
+    vertical-align: top;
+    margin: .1rem 0 0 0;
+  }
+
   #search-btn {
     opacity: 0;
   }
diff --git a/assets/styles/layouts/article/_telegraf-plugins.scss b/assets/styles/layouts/article/_telegraf-plugins.scss
index 524047dc3..19b0f6ca8 100644
--- a/assets/styles/layouts/article/_telegraf-plugins.scss
+++ b/assets/styles/layouts/article/_telegraf-plugins.scss
@@ -50,7 +50,6 @@
     opacity: 0.25;
     transition: opacity .2s, background .2s, color .2s;
     background-color: rgba($article-btn, 0);
-    color: $article-bold;
 
     .icon-github {
       font-size: 1.2rem;
@@ -62,7 +61,6 @@
     .github-link {
       opacity: 1;
       background-color: rgba($article-btn, 1);
-      color: $g20-white;
     }
   }
 
@@ -149,6 +147,7 @@
 
   .checkbox {
     display: inline-block;
+    position: relative;
     height: 1.15em;
     width: 1.15em;
     background: rgba($article-text, .05);
@@ -175,16 +174,16 @@
       width: .5rem;
       border-radius: 50%;
       background: $article-link;
-      top: .65rem;
-      left: .35rem;
+      top: 50%;
+      left: 50%;
       opacity: 0;
-      transform: scale(2);
+      transform: scale(2) translate(-20%, -20%);
       transition: all .2s;
     }
 
     &:checked + .checkbox:after {
       opacity: 1;
-      transform: scale(1);
+      transform: scale(1) translate(-50%, -50%);
     }
   }
 }
diff --git a/assets/styles/sidebar-closed.scss b/assets/styles/sidebar-closed.scss
index 0352adc67..11cf562d0 100644
--- a/assets/styles/sidebar-closed.scss
+++ b/assets/styles/sidebar-closed.scss
@@ -27,7 +27,7 @@
     opacity: 1;
   }
   .version-selector {
-    right: 5.5rem;
+    right: 7.5rem;
   }
 }
 
diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss
index 0773c2d24..5c7723842 100644
--- a/assets/styles/styles-default.scss
+++ b/assets/styles/styles-default.scss
@@ -21,4 +21,5 @@
         "layouts/syntax-highlighting",
         "layouts/algolia-search-overrides",
         "layouts/landing",
-        "layouts/error-page";
+        "layouts/error-page",
+        "layouts/modal";
diff --git a/data/influxdb_urls.yml b/data/influxdb_urls.yml
index 839eb6070..9ecab16c9 100644
--- a/data/influxdb_urls.yml
+++ b/data/influxdb_urls.yml
@@ -1,7 +1,10 @@
 oss:
   product: InfluxDB OSS
-  name: localhost:9999
-  url: http://localhost:9999
+  providers:
+    - name: Default
+      regions:
+        - name: localhost:9999
+          url: http://localhost:9999
 
 cloud:
   product: InfluxDB Cloud
@@ -9,7 +12,7 @@ cloud:
     - name: Amazon Web Services
       short_name: AWS
       regions:
-        - name: US West (Orgeon)
+        - name: US West (Oregon)
           url: https://us-west-2-1.aws.cloud2.influxdata.com
         - name: EU Frankfort
           url: https://eu-central-1-1.aws.cloud2.influxdata.com
diff --git a/data/telegraf_plugins.yml b/data/telegraf_plugins.yml
index de3e609b4..9b3aafe5a 100644
--- a/data/telegraf_plugins.yml
+++ b/data/telegraf_plugins.yml
@@ -585,7 +585,7 @@ input:
   - name: InfiniBand
     id: infiniband
     description: |
-      The InfiniBand input plugin gathers statistics for all InfiniBand devices and ports on the system. 
+      The InfiniBand input plugin gathers statistics for all InfiniBand devices and ports on the system.
       Counters are stored in `/sys/class/infiniband/<dev>/port/<port>/counters/`.
     introduced: 1.14.0
     tags: [linux, systems]
@@ -919,8 +919,8 @@ input:
   - name: Monit
     id: monit
     description: |
-      The Monit input plugin gathers metrics and status information about local processes, remote hosts, files, 
-      file systems, directories, and network interfaces managed and watched by Monit. To use this plugin, 
+      The Monit input plugin gathers metrics and status information about local processes, remote hosts, files,
+      file systems, directories, and network interfaces managed and watched by Monit. To use this plugin,
       enable the [HTTPD TCP port](https://mmonit.com/monit/documentation/monit.html#TCP-PORT) in Monit.
     introduced: 1.14.0
     tags: [linux, macos, windows, systems, networking]
@@ -2160,7 +2160,7 @@ processor:
     id: s2geo
     description: |
       The S2 Geo processor plugin adds tags with an S2 cell ID token of a specified [cell level](https://s2geometry.io/resources/s2cell_statistics.html).
-      Tags are used in Flux `experimental/geo` functions. 
+      Tags are used in Flux `experimental/geo` functions.
       Specify `lat` and `lon` field values with WGS-84 coordinates in decimal degrees.
     introduced: 1.14.0
     tags: [linux, macos, windows]
@@ -2204,7 +2204,7 @@ processor:
   - name: Template
     id: template
     description: |
-      The Template processor plugin applies a Go template to metrics to generate a new tag. 
+      The Template processor plugin applies a Go template to metrics to generate a new tag.
       Primarily used to create a tag for dynamic routing to multiple output plugins
       or to an output specific routing option. The template has access to each metric's measurement name,
       tags, fields, and timestamp using the interface in [template_metric.go](https://github.com/influxdata/telegraf/blob/release-1.14/plugins/processors/template/template_metric.go).
diff --git a/layouts/partials/footer/influxdb-url-modal.html b/layouts/partials/footer/influxdb-url-modal.html
index cdf463c88..c17d1be0b 100644
--- a/layouts/partials/footer/influxdb-url-modal.html
+++ b/layouts/partials/footer/influxdb-url-modal.html
@@ -1,18 +1,39 @@
-<div class="url-selector" style="background: #fff; padding: 1rem;">
-{{ range sort .Site.Data.influxdb_urls "product" "desc" }}
-  <h4>{{ .product }}</h4>
-  {{ if .name }}
-    <ul><li data-url="{{ .url }}">{{ .name }}</li></ul>
-  {{ end }}
-  {{ if .providers }}
-    {{ range .providers }}
-      <strong>{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}</strong>
-      <ul>
-        {{ range .regions }}
-          <li data-url="{{ .url }}">{{ .name }}</li>
-        {{ end }}
-      </ul>
-    {{ end }}
-  {{ end }}
-{{ end }}
+{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) .RelPermalink }}
+<div class="modal">
+  <div class="modal-overlay"></div>
+  <div class="modal-wrapper">
+    <div id="influxdb-url-list" class="modal-body">
+      <a id="modal-close"href="#"><span class="icon-ui-remove"></span></a>
+      <div class="modal-content">
+        <h3>Where are you running InfluxDB?</h3>
+        <p>Select where you're using InfluxDB and we'll customize code examples with your <strong>InfluxDB URL</strong>.</p>
+        <div class="products">
+          {{ range sort .Site.Data.influxdb_urls "product" "desc" }}
+            <div class="product">
+              <h4>{{ .product }}</h4>
+              <div class="providers">
+                {{ range .providers }}
+                  <div class="provider">
+                    <h5>{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}</h5>
+                    <ul>
+                    {{ range .regions }}
+                      <li>
+                        <label for="{{ anchorize .name }}">
+                          <input type="radio" name="influxdb-loc" id="{{ anchorize .name }}" value="{{ .url }}" checked>
+                          <span class="radio"></span>
+                          {{ .name }}
+                        </label>
+                      </li>
+                    {{ end }}
+                    </ul>
+                  </div>
+                {{ end }}
+              </div>
+            </div>
+          {{ end }}
+        </div>
+        <p class="note">For more information, see <a href='{{ print "/" $currentVersion "/cloud/urls/"}}'>InfluxDB URLs</a>.</p>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html
index ad753575d..558fc8e7b 100644
--- a/layouts/partials/footer/javascript.html
+++ b/layouts/partials/footer/javascript.html
@@ -2,7 +2,7 @@
 {{ $contentInteractions := resources.Get "js/content-interactions.js" }}
 {{ $searchInteractions := resources.Get "js/search-interactions.js" }}
 {{ $telegrafFilters := resources.Get "js/telegraf-filters.js" }}
-{{ $regionURLs := resources.Get "js/region-url.js" }}
-{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $regionURLs | resources.Concat "js/footer.bundle.js" }}
+{{ $influxdbURLs := resources.Get "js/influxdb-url.js" }}
+{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" }}
 
 <script type="text/javascript" src="{{ $footerjs.RelPermalink }}" ></script>
diff --git a/layouts/partials/topnav.html b/layouts/partials/topnav.html
index 03219819d..46046ad91 100644
--- a/layouts/partials/topnav.html
+++ b/layouts/partials/topnav.html
@@ -22,6 +22,7 @@
       </ul>
     </div>
     <button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
+    <button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
     <button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
     <button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
   </div>