Embeddable IP Widget
Add a small card to your own site that shows each visitor their own public address and country, with one script tag or an iframe.
Preview
The preview uses your own connection, which is exactly what a visitor to your site would see for theirs.
Paste this
<script async src="https://whatsmyip.fyi/widget/embed.js"
data-theme="auto"
data-fields="ip,country"></script>Script embed
<div id="whatsmyip-widget"></div>
<script async src="https://whatsmyip.fyi/widget/embed.js"
data-target="whatsmyip-widget"
data-theme="auto"
data-fields="ip,country"></script>
data-theme takes light, dark, or auto. data-fields takes a comma-separated list from ip, country, city, isp, and asn.
iframe embed
<iframe src="https://whatsmyip.fyi/widget/frame?theme=auto&fields=ip,country"
width="360" height="114" loading="lazy"
style="border:0;max-width:100%"
title="Your public IP address"></iframe>
Use this where a content security policy forbids third-party scripts. It gives stronger isolation and a fixed size, and CSS variable theming does not cross the frame boundary.
Theming
The script embed reads CSS custom properties from the host element:
#whatsmyip-widget {
--wmi-accent: #2563eb;
--wmi-radius: 8px;
--wmi-font: system-ui, sans-serif;
}
Anything not set falls back to a neutral default that reads acceptably on both light and dark backgrounds.
What it will not do
It will not fingerprint your visitors, it will not set an identifier, and it will not report their addresses to you. The card shows a visitor their own address; it is not an analytics product, and building one into a widget people embed without reading would be a bad thing to do quietly.
It also labels location as approximate in the card. A widget that states a city as fact teaches every visitor something false, and that is not worth the extra line of copy it saves.
About this tool
A small card you add to your own site that shows each visitor their own public address and country. It renders in a shadow root, so your styles and its styles cannot collide, and it sets no cookies, stores nothing, and loads nothing from a third party. Theme, accent colour, and the optional city, ISP, and ASN fields are configurable. The free version carries an attribution link back to this site.
How to read the result
- Script tag embed
- Paste one line where you want the card, and a small script renders it into that element inside a shadow root, so page styles and widget styles cannot leak in either direction. The data comes from the same endpoints as /json, so the address is the visitor's own.
- iframe embed
- Stronger isolation, at the cost of a fixed size and no CSS variable theming. Use it where a content security policy forbids third-party scripts, which is the usual reason to prefer it.
- Theme options
- light, dark, or auto, which follows the visitor's prefers-color-scheme setting. Accent colour and border radius are set through CSS custom properties on the host element, and those are inherited into the shadow root deliberately.
- Fields shown
- Address and country by default, with city, ISP, and ASN as options. The card labels the location approximate itself, so a visitor is never told that a database guess is a fact.
- Attribution link
- The free version includes a link back to this site. It is the price of the widget, it is stated up front, and hiding it with CSS breaks the licence.
- Privacy behaviour
- No cookies, no localStorage, no analytics, and no fingerprinting. The request from the visitor's browser reveals their address, which is unavoidable because that address is what the card displays, and nothing is stored against it.
Questions people ask
- Does the widget slow down my page?
- The script is small, loads asynchronously, and renders in a shadow root, so it neither blocks rendering nor forces a layout recalculation of your page. The address request is a single fetch to an edge endpoint. It should not appear in your Core Web Vitals.
- Do I need to declare it in a cookie banner?
- It sets no cookies and stores nothing on the device, so it needs no consent under the ePrivacy cookie rules. It does process an IP address, which is personal data under the GDPR, so name it in your privacy policy as a third-party recipient with the purpose stated. Our own retention and processing are described in our privacy policy.
- Can I remove the attribution link?
- Not in the free version, and hiding it with CSS breaks the licence. A paid tier without attribution is planned. If you need it now, ask.
- Will it work behind a content security policy?
- The script embed needs your CSP to allow https://whatsmyip.fyi in script-src and connect-src. If your policy forbids third-party scripts entirely, use the iframe embed and allow https://whatsmyip.fyi in frame-src instead. That route sets frame-ancestors * and no X-Frame-Options, so it frames anywhere.
- Does it show the visitor's address or mine?
- The visitor's. The request goes from their browser to our edge, so each visitor sees their own address. That is why it works as a widget at all, and it is also why every visitor consumes a little of your quota if you use a key.
Related
Last reviewed 2026-09-05.