webdevpuneet.com

Related Snippets

30 in Footers category
1–6 of 30

Region & Currency Availability Footer

Minimal Single-Page App Footer

Careers Teaser Footer

SaaS Plan & Pricing Quick Links Footer

Changelog & Status Footer

Newsletter Footer with Animated Confirmation

Region & Currency Availability Footer — Free Snippet

Region & Currency Availability Footer · Footers · Plain HTML, CSS & JS · Live preview

CategoryFooters
TagsCSS AnimationLanding PageCSS Grid

Copy & paste

Source Code

<div class="frc-page">
  <main class="frc-content"><p>&#8593; Page content above the footer</p></main>
  <footer class="frc">
    <div class="frc-inner">
      <div class="frc-notice" id="frcNotice">
        <div class="frc-notice-text">
          <b>Prices shown in <span id="frcCurrentCurrency">USD</span></b>
          <p id="frcRegionText">Detecting your region&hellip;</p>
        </div>
        <button class="frc-change" id="frcChangeBtn">Change region</button>
      </div>

      <div class="frc-picker" id="frcPicker" hidden>
        <p class="frc-picker-label">Select your region</p>
        <div class="frc-options" id="frcOptions"></div>
      </div>

      <div class="frc-bottom">
        <div class="frc-col">
          <p class="frc-brand">Northline</p>
          <p class="frc-copy">&copy; 2026 Northline Inc.</p>
        </div>
        <ul class="frc-links">
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Docs</a></li>
          <li><a href="#">Privacy</a></li>
        </ul>
      </div>
    </div>
  </footer>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Notice states the assumed region and currency explicitly rather than guessing silently
One regions array drives both the notice text and the picker grid, always in sync
Visible flag-and-currency picker grid instead of a plain currency-code dropdown
Selecting a region updates the notice, re-highlights the picker, and closes it in one step
Simulated geo-detection delay avoids flashing a wrong default before detection completes
Responsive picker grid collapses to a single column on narrow screens
Clear separation between the detected region and an explicit user override, ready to persist
Zero dependencies, vanilla JavaScript only

About this UI Snippet

Region & Currency Footer Notice — Detected Region with a Working Picker

Screenshot of the Region & Currency Availability Footer snippet rendered live

Showing a price without stating the currency or region it applies to leaves an international visitor guessing whether $49 means US dollars, and whether the product is even available where they are. This snippet adds a small footer notice stating the currently detected region and currency plainly, with a "Change region" control that opens a real picker grid rather than a static disclaimer sentence.

A notice that states its assumption out loud

#frcNotice reads "Prices shown in USD" with a sub-line naming the specific region and flagging that availability and tax may vary. Stating the assumption explicitly — rather than silently showing region-specific pricing with no label — is what actually earns trust from a visitor browsing from outside the assumed region, since a wrong silent guess reads as a bug while a wrong stated guess is just one click away from being corrected.

One array driving both the notice and the picker

The regions array holds { code, name, currency, flag } objects. applyRegion(code) looks the region up with findRegion() and updates the notice's currency and region text directly from that one object — no separate currency-to-region mapping to keep synchronized elsewhere in the code.

A picker grid, not a plain dropdown

Clicking "Change region" toggles #frcPicker, revealing a responsive grid of .frc-option buttons built by renderOptions(), each showing a flag emoji, region name, and currency code. A native <select> would work, but a visible grid lets a visitor confirm both the region name and its currency together at a glance before picking, rather than reading a flat list of currency codes alone.

Selecting closes the picker and updates state in one step

Clicking any .frc-option calls applyRegion() with that option's data-code, which updates currentCode, re-renders the notice text, re-renders the options grid (so the newly selected region gets the .selected highlight), and hides the picker — all from one function, so the notice and the picker's own selected-state marker can never disagree about which region is active.

Simulated geo-detection

The notice starts with "Detecting your region…" and calls applyRegion('US') after a setTimeout, standing in for a real IP-based geolocation lookup. This avoids the notice flashing a wrong default region before detection completes, and gives an obvious place to plug in a real geo-IP service.

Wiring it to real detection and persistence

Replace the setTimeout stand-in with a real call to an IP-geolocation API (or a server-set header your frontend reads) to pick the initial currentCode, and persist an explicit user override in localStorage or a cookie so a visitor who manually picks a different region does not get reset to the detected one on their next visit.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe notice shows "Detecting your region…" then settles on United States / USD after a short simulated delay.
  2. 2
    Click "Change region"A grid of region options with flags, names, and currency codes drops open below the notice.
  3. 3
    Click a different regionThe notice text, currency label, and the picker's selected highlight all update together, and the picker closes.
  4. 4
    Add a new regionAdd a { code, name, currency, flag } object to the regions array in the JS panel.
  5. 5
    Wire it to real geolocationReplace the setTimeout stand-in with a real IP-geolocation API call to set the initial detected region.
  6. 6
    Persist a manual overrideSave the user's chosen currentCode to localStorage so it survives their next visit instead of resetting to the detected region.

Real-world uses

Common Use Cases

International SaaS pricing pages
State the assumed currency plainly next to any price shown, so a visitor never has to guess whether $49 means US or Australian dollars.
E-commerce and marketplace sites
Pair with a Locale Switcher Footer so both language and currency assumptions are correctable from the same footer region.
Global subscription and billing pages
Set the correct expectation for tax and availability differences before a visitor reaches checkout and encounters a surprise.
Teaching one-array-drives-multiple-views patterns
A compact example of a single data array powering both a summary notice and an interactive picker without duplicated state.
Related: SaaS Plan & Pricing Quick Links Footer
See the SaaS Plan & Pricing Quick Links Footer for a related pricing-focused footer pattern worth pairing with this one.
Related: Trust Badges Row Footer
See the Trust Badges Row Footer for a related trust-building footer pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

In this demo, applyRegion('US') is called after a simulated delay via setTimeout, standing in for a real IP-based geolocation lookup. Replace that call with a real geo-IP API result (or a server-set region header your frontend reads) to detect the visitor's actual region.

Both are re-rendered from the same currentCode variable inside applyRegion(): the notice text is set directly from the matched region object, and renderOptions() re-builds the picker grid, adding the selected class only to the option whose code matches currentCode.

Not in this demo by itself — it updates the notice's currency label and region text. Wire real price values (or a currency-conversion call) to update alongside currentCode wherever prices are rendered on the page.

Add or remove a { code, name, currency, flag } object in the regions array in the JS panel. Both the notice and the picker grid read from this array, so no other markup needs to change.

Not in this demo — it resets to the detected default on reload. Persist currentCode to localStorage or a cookie when applyRegion() is called from a user click (versus the initial detection call) to remember an explicit override.

Yes. Keep regions as a constant array, track currentCode in state, derive the notice text and each option's selected styling from a comparison against that state, and call your real geolocation API inside an effect on mount to set the initial value.