How to add live quotes to your website

Three ways to put quotes on a page

The choice depends on how much control you need and who will maintain it. Most media sites and landing pages start with an embedded widget. Brokers and platforms that want quotes in their own design move to a native build. Teams with front-end developers sometimes build everything themselves on top of a feed.

The third path needs a server: feed keys must never sit in browser code, so your backend connects to the stream and passes prices to the page. The WebSocket vs REST guide and the documentation explain how that works.

Step by step with the free builder

The FinaQuotes builder runs in the browser and needs no account. Everything you set is shown in a live preview, which is the real widget, not a picture of it.

• Pick a widget on the widgets page: market watch, ticker tape, symbol card, market overview or mini chart.
• Add instruments. Search by symbol or name and set the order. A widget takes up to 30 instruments; a symbol card and a mini chart show one.
• Choose the theme: dark, light or transparent. Set the background and the accent color so the widget matches your page, and pick the widget language.
• Set the size. With container size on, the widget fills the width it is given and reports its own height. Otherwise enter width and height in pixels.
• Copy the embed code. It is a single script tag that mounts the widget in an iframe.
• Paste it into your page where the widget should appear and publish.

Where to paste the code

The snippet works anywhere you can add HTML. On the most common platforms:

• Plain HTML or a site template: paste it inside the container where the widget should sit, for example the markets section or the footer.
• WordPress: in the block editor add a Custom HTML block to the page or post and paste the snippet. In a classic theme, use a Custom HTML widget in a sidebar or footer area.
• Tilda: add a T123 HTML block and paste the code. The widget appears on the published page.
• Webflow: drag an Embed element into the section and paste the snippet. The Designer canvas shows a placeholder; the widget runs on the published site.

Each widget builder has platform notes for that widget, for example where a ticker tape fits in a reusable header.

What to show on which page

Match the widget to the page, not the other way round. A short guide:

• Ticker tape: one line in the header or footer across the whole site. It keeps the market in view without taking space from your content.
• Quote table (market watch): a markets section, a broker landing page or an investor page that follows a basket of instruments.
• Symbol card: inside an article about one instrument, next to the paragraph that discusses it.
• Mini chart: a sidebar or an instrument page where the shape of the move matters more than exact figures.
• Market overview: a home page or a markets hub, with several asset classes on tabs.

A longer comparison is in ticker tape vs quote table vs chart.

Real time and delay on the free tier

Free widgets show crypto, forex and metals in real time. Exchange-traded instruments, meaning stocks, indices, commodities and bonds, are shown with a 15-minute delay, and a delayed price is shown as a single price. The widget marks delayed instruments, so readers know what they are looking at.

Free widgets redraw about every 15 seconds, Pro widgets about every 5 seconds. That is how often the interface refreshes, not how old the data is: a free widget can show real-time forex next to a stock price that is 15 minutes old. See real-time vs delayed market data.

The by FinaQuotes line

Free widgets carry a small by FinaQuotes line at the bottom. It is the condition of the free tier and stays in place. If the widget has to look entirely like part of your product, the white-label Pro version has no attribution.

Performance and SEO

An iframe widget is isolated from your page. Its styles cannot break your layout, and your CSS or framework cannot break the widget. The cost is one more frame to load, so keep the number of widgets on a page reasonable, and reserve space for the widget in your layout so the content below does not jump when it appears.

For search, the content of an iframe is generally not counted as content of your page. Prices in a free widget will not help or hurt your rankings; your own text around them does that work. A native Pro widget is rendered inside your markup, so its contents are part of your page.

If quotes support an article, write the context in your own words: what moved, why it matters to your reader. The widget shows the numbers; the text gives the page its value.

Check the widget after publishing

A few minutes of checking saves a support ticket from a reader:

• Open the published page on a phone. A table with many columns may need fewer columns or a narrower instrument set on small screens.
• Check the theme against your background in both light and dark sections of the site. The transparent theme takes the background of the page under it.
• If your site sends a Content-Security-Policy header, allow widgets.finaquotes.com for scripts and frames, otherwise the browser blocks the widget silently.
• Look for the delay mark on stock and index rows, so the page does not present 15-minute-old prices as live.

When to move to Pro

The free tier is enough for most editorial and marketing pages. Consider Widgets Pro when:

• Stock, index, commodity or bond prices have to be real time on your site.
• The widget must follow your design system: palette, fonts and radii, without a frame and without attribution.
• You need more instruments than the builder allows, or a layout the builder does not offer.
• You want the widget installed and supported by our team rather than maintained in-house.

Pro pricing is by request; see pricing. For a white-label platform beyond widgets, see white-label market data.

Frequently asked questions