Gold Calculator Widget: Integration & User Guide
Deliver accurate, interactive precious metal calculations to your website visitors. The Gold Calculator Widget enables instant valuation for both gold and silver across multiple purities, weight units, and 150 international currencies with zero maintenance.
1. Quick Start: Embedding the Widget
Embedding the calculator 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-calculator/widget.js"></script>
<!-- Gold Calculator Element -->
<gold-calculator-widget
lang="en"
currency="USD"
show-header="on"
header-text="Gold Calculator"
theme="default"
border-radius="5">
</gold-calculator-widget>Performance Tip: The JavaScript loader file only needs to be imported once per page, even when embedding multiple calculator instances on the same layout.
2. Customization Attributes
Configure the initial look and default state by modifying the attributes on the <gold-calculator-widget> element:
| Attribute | Type | Default | Description |
|---|---|---|---|
lang |
String | en |
Sets the interface language and number formatting (en, ar, fr, es, ru). Automatically enables RTL layout for right-to-left languages such as Arabic (ar). |
currency |
String | USD |
Initial default currency code (ISO 4217, e.g., USD, EUR, GBP, SAR, AED, EGP, INR). |
show-header |
String | on |
Controls the visibility of the widget header bar (on or off). |
header-text |
String | Gold Calculator |
Custom title text rendered in the header bar when show-header="on" (defaults to the localized title for the selected lang). |
header-link |
String | https://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 | 5 |
Corner radius in pixels for the widget container and inputs (integer from 0 to 20 in the configurator, up to 50 supported, e.g., 0, 5, 12). |
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 |
Widget container background color. |
border-color |
BCBCBC |
Border color for the widget container and form controls. |
text-color |
222222 |
Primary text color across labels, inputs, and timestamps. |
input-bg-color |
FFFFFF |
Background color for inputs, dropdown menus, and the result display. |
bg-color-button |
535353 |
Background color for footer action buttons. |
button-border-color |
2E2E2E |
Border color for footer action buttons. |
button-hover-color |
8A8A8A |
Hover highlight color for footer buttons and currency dropdown options. |
3. End-User Features
Visitors interacting with the widget on your site benefit from the following built-in capabilities:
- Gold & Silver Support: Switch seamlessly between Gold and Silver, with purity options updating automatically for the chosen metal.
- Complete Purity & Fineness Selection:
- Gold Karats:
24K(.999),23K(.965),22K(.916),21K(.875),18K(.750),14K(.585),12K(.500),10K(.417),9K(.375), and8K(.333). - Silver Fineness:
999(Pure Silver),958(Britannia),925(Sterling Silver),900(Coin Silver), and800(Jewelry Silver).
- Gold Karats:
- Weight & Unit Flexibility: Enter any custom weight and toggle between standard precious metal units: Ounce (troy ounce), Gram, and Tola.
- Searchable Currency Selector with Flags: Browse 150 world currencies organized into Favorites (
USD,EUR,GBP,CAD,AUD,JPY,CHF,INR,AED,SAR) and All Currencies, featuring country flags, instant search filtering, and keyboard navigation. - Shadow DOM Encapsulation: Rendered inside an isolated Shadow DOM so your website's stylesheets will not conflict with the calculator's layout.
- Timestamped Quotes: Displays the date and time of the latest market rate sync in the footer alongside quick links to the source data and widget configurator (
+).
4. CMS Integration Instructions
WordPress / Gutenberg & Elementor
- Add a Custom HTML block to your post, page, or widgetized sidebar.
- Paste the script loader and the
<gold-calculator-widget>element code generated above. - Update/Publish your page.
Webflow, Wix & Shopify
- Insert an Embed / Custom Code element into the layout canvas.
- Paste the widget embed code snippet.
- Ensure parent wrappers maintain a minimum container width of
280pxto360pxfor optimal two-column control alignment.
5. Frequently Asked Questions (FAQ)
How often are gold and silver prices updated in the widget?
Market rates are refreshed every 5 minutes from live precious metal and foreign exchange feeds. The timestamp displayed at the bottom of the widget indicates the time of the latest rate update.
Will this widget slow down my website's loading speed?
No. The Web Component script is lightweight, fetches rate data asynchronously, and renders inside an isolated Shadow DOM without blocking your page layout.
Can I place multiple widgets on the same page?
Yes. You can add multiple <gold-calculator-widget> elements with different languages, default currencies, or themes. The external <script> tag only needs to be included once per page.
Is the widget mobile-friendly and RTL-compatible?
Yes. The widget uses a responsive flex layout that adapts to its parent container width on phones, tablets, and desktop sidebars, and automatically switches to right-to-left (RTL) alignment when lang="ar" is selected.
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.