Free Embeddable Web Component

Add Today's Gold Prices to Your Website

Customize your live gold price table below—choose the default currency, theme palette, and header options—then copy and paste the lightweight embed snippet into any website, blog, or online jewelry store.

1. Currency & Interactive Mode

2. Theme & Appearance

3. Header Bar Settings

Embed Code Snippet

Paste this snippet anywhere inside your page HTML or CMS Custom HTML block:

Gold Price Today Widget: Integration & User Guide

Display live daily gold prices directly on your website. The Gold Price Today Widget provides an instant breakdown of spot gold rates per troy ounce and per gram across major karats (24K, 22K, 21K, 18K, and 14K) in 150 world currencies with zero maintenance.

1. Quick Start: Embedding the Widget

Embedding the live gold price table is straightforward. Insert the script and the custom HTML tag into the body of your web page where you want the widget to display:

<!-- Load Widget Engine -->
<script src="https://www.forexinvestors.com/widgets/gold-price-today/widget.js"></script>

<!-- Gold Price Today Element -->
<gold-price-widget 
  lang="en" 
  currency="USD" 
  change-currency="on" 
  show-header="on" 
  header-text="Gold Price Today" 
  theme="default" 
  border-radius="5">
</gold-price-widget>

Performance Tip: The JavaScript loader file only needs to be imported once per page, even when embedding multiple gold price widgets for different currencies on the same layout.

2. Customization Attributes

Configure the initial currency, currency switcher, header bar, and visual styling by modifying the attributes on the <gold-price-widget> element:

Attribute Type Default Description
lang String en Sets the interface language for unit/karat labels, country names, and date formatting (en, ar, fr, es, ru).
currency String USD Initial currency code displayed on load (ISO 4217, e.g., USD, EUR, GBP, SAR, AED, EGP, INR).
change-currency String on Controls whether visitors can switch currencies via the dropdown selector (on or off). Set to off to lock the widget to a single currency.
show-header String on Controls the visibility of the widget header title bar (on or off).
header-text String Gold Price Today Custom title text rendered in the header bar when show-header="on" (defaults to the localized title for the selected lang).
header-link String http://www.goldpricedata.com/ Optional destination URL (http or https) for the header title link.
theme String default Selects the color palette: default, blue, green, yellow, red, ocean, purple, teal, dark, rose, or custom.
border-radius Number 0 Corner radius in pixels for the widget container (integer from 0 to 20 in the configurator, up to 50 supported, e.g., 0, 5, 12).
native-dropdown String off Set to on to use a native browser <select> menu instead of the enhanced searchable flag dropdown when change-currency="on".

Custom Theme Color Attributes

When theme="custom" is set, you can customize individual widget colors using 6-digit hexadecimal values (without the # prefix):

Attribute Default Description
bg-color F6F6F6 Background color for the widget container and odd-numbered price rows.
border-color BCBCBC Border color for the widget container, country header divider, and currency selector.
text-color 222222 Primary text color across karat labels, gold prices, and timestamps.
input-bg-color FFFFFF Background color for even-numbered price rows and the currency dropdown menu.
bg-color-button 535353 Background color for footer action buttons (FI and +).
button-border-color 2E2E2E Border color for footer action buttons.
button-hover-color 8A8A8A Hover highlight color for table rows and footer action buttons.

3. End-User Features

Visitors viewing the Gold Price Today widget on your site benefit from the following built-in capabilities:

  • Complete Gold Price Breakdown: Displays live gold prices in a clean 6-row table covering Ounce (troy ounce) and per-gram prices for Karat 24, Karat 22, Karat 21, Karat 18, and Karat 14.
  • Country & Currency Header Bar: Highlights the active currency's flag, country name (linked to its detailed local gold price page), ISO currency code, and native currency symbol.
  • Interactive or Fixed Currency Mode: Allow visitors to switch between 150 currencies using a searchable flag dropdown (change-currency="on") with lightweight AJAX updates, or lock the table to one local currency (change-currency="off").
  • Shadow DOM Encapsulation & Auto-Contrast: Rendered inside an isolated Shadow DOM so your website's CSS never conflicts with the price table, with automatic button text contrast calculation.
  • Timestamped Market Quotes: Displays the date and time of the latest market rate sync in the footer alongside quick links to the source data (FI) and widget configurator (+).

4. CMS Integration Instructions

WordPress / Gutenberg & Elementor

  1. Add a Custom HTML block to your post, page, or widgetized sidebar.
  2. Paste the script loader and the <gold-price-widget> element code generated above.
  3. Update/Publish your page.

Webflow, Wix & Shopify

  1. Insert an Embed / Custom Code element into the layout canvas.
  2. Paste the widget embed code snippet.
  3. Ensure parent wrappers maintain a minimum container width of 240px to 340px for optimal table alignment.

5. Frequently Asked Questions (FAQ)

How often are gold prices updated in the widget?

Gold spot rates and currency conversions are refreshed every 5 minutes from live market feeds. The timestamp displayed at the bottom of the widget indicates the time of the latest update.

Can I lock the widget to a single currency so visitors cannot change it?

Yes. Set change-currency="off" on the <gold-price-widget> element (or select "No" under "Ability to change Currency" in the configurator above). This hides the currency dropdown and omits the currency list from the network payload.

Can I place multiple gold price widgets on the same page?

Yes. You can add multiple <gold-price-widget> elements with different currencies, languages, or themes on the same page. The external <script> tag only needs to be included once.

Is the widget mobile-friendly?

Yes. The widget automatically scales to the width of its parent container, fitting smartphones, tablets, and desktop sidebars cleanly.

Does the widget require an API key or data-endpoint attribute?

No API key is required, and you do not need to specify a data-endpoint attribute—the widget automatically derives its data endpoint from the widget.js script URL.

Widgets