A live crypto price ticker on a static site, three ways
A static site owner can display live crypto prices without a backend by fetching data from a public API, routing requests through a serverless function for caching, or embedding a lightweight widget. Each approach has trade‑offs around rate limits, maintenance, and user experience. The article walk…
Running a static site on Netlify is a popular choice for hobby projects and small business pages. One common request from visitors is a scrolling ticker that shows the current price of popular cryptocurrencies. Because the site has no server or build step, the challenge is to pull live data in the browser while keeping the page fast, secure, and easy to maintain. The following guide explores three practical solutions and the pros and cons of each.
1. Fetching a Public API Directly in the Browser
The simplest route is to call a public endpoint from the client side. CoinGecko’s simple/price API is free to use without an API key, which makes it attractive for quick prototypes. A typical request looks like this:
https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana&vs_currencies=usd&include_24hr_change=true
When the response arrives, you parse the JSON and render the numbers in a marquee or a custom component. The code is short—about 40 lines including rendering logic—and requires no server‑side infrastructure.
However, there are several pitfalls:
- Rate limiting. The free tier counts requests per IP address. Because every visitor has a unique IP, the limit is effectively per user. If many users poll the endpoint every five seconds, you’ll hit the ceiling quickly.
- Data freshness. To stay within limits you can throttle polling to once a minute and store the last response in
sessionStorage. A page reload then reuses the cached data, saving a request. - Symbol mapping. The API expects CoinGecko IDs, not ticker symbols. While
solanahappens to match, other coins likeMATICorUNIrequire a lookup table. Maintaining this table can become a maintenance burden if projects rename. - Security. Exposing the API endpoint in the browser may reveal your usage pattern to third parties.
2. Using a Serverless Function as a Proxy
To overcome rate limits and centralize caching, you can deploy a lightweight Netlify function. The function sits between the client and the CoinGecko API, storing the most recent response in memory and serving it to every visitor. A minimal implementation looks like this:
- Define a cache object with a timestamp and body.
- On each request, check if the cached data is older than a threshold (e.g., 60 seconds). If so, fetch fresh data; otherwise, return the cached body.
- Return the JSON to the browser.
Benefits of this approach include:
- Shared cache across all visitors, reducing the number of external API calls.
- Control over failure handling—if the API changes or goes down, you can log the error and serve stale data instead of breaking the UI.
- No need for client‑side API keys.
Drawbacks are minimal but worth noting: you add a small serverless function to your deployment, which may slightly increase cold‑start latency, and you must keep the function code in sync with any changes to the API response structure.
3. Embedding a Free Widget
For projects where the ticker is purely decorative, a pre‑built widget can save time. The Coin Analysis widget is a good example: it’s a 16 KB script that pulls data from its own endpoint, requires no API key, and automatically credits the source.
When integrating a widget, pay attention to:
- Content Security Policy (CSP). The widget’s script, its own API endpoint, and any images it loads must be whitelisted in
script-src,connect-src,style-src, andimg-srcdirectives. - Layout shift. The ticker renders after the script loads, causing content below to jump. Reserve a fixed height with CSS:
#crypto-marquee{min-height:44px;}- Motion preferences. Some users dislike scrolling text. Wrap the ticker in a media query that disables animation when
prefers-reduced-motionis set: @media(prefers-reduced-motion:reduce){#crypto-marquee *{animation:none;}}
Because the widget is third‑party code, you have limited control over its failure modes. If the widget stops working, the entire ticker disappears, which may be acceptable for decorative purposes but not for critical data.
Choosing the Right Approach
When deciding how to implement a live crypto ticker, consider the role of the data on your site:
- Decoration only. Use a free widget for speed and minimal maintenance.
- Business‑critical data. Fetch the data yourself or through a serverless proxy so you can log errors, control caching, and avoid third‑party downtime.
Regardless of method, a useful practice is to display the last known price with a timestamp rather than a loading spinner. A value that is a few minutes old still conveys market direction, whereas a spinner can make the site feel broken.
In summary, a static site can display real‑time cryptocurrency prices with minimal overhead. Direct API calls are quick but fragile; a serverless proxy offers reliability and control; a widget delivers convenience at the cost of dependency. Pick the strategy that aligns with your site’s priorities and your willingness to maintain the code.
Why it matters
Live crypto tickers enhance user engagement and provide real‑time market context, but implementing them on static sites requires careful handling of rate limits, caching, and user experience. Choosing the right method ensures reliability and performance without compromising site speed or security.
Key points
- Direct API fetch is simple but limited by per‑IP rate limits and symbol mapping.
- A serverless function can share a cache, reduce external calls, and centralize error handling.
- Free widgets save time but introduce CSP requirements and limited control over failures.
- Always reserve height for the ticker to avoid layout shift and respect users’ motion preferences.
- Displaying stale data with a timestamp keeps the UI informative even during outages.
- Choose the implementation based on whether the ticker is decorative or business‑critical.
Frequently asked questions
Can I use CoinGecko’s API without an API key?
Yes, the simple price endpoint is publicly accessible without a key, but it is rate‑limited per IP.
How often should I poll the API to stay within limits?
Polling once a minute is a safe default; caching the result in sessionStorage can further reduce requests.
What if the widget stops working?
If the widget fails, the ticker disappears. For critical data, consider a serverless proxy or direct fetch to keep the UI functional.
