What is QMod?

QMod is QuoteMedia’s component framework for embedding financial market data into websites and applications. For developers, QMod provides a library of pre‑built components (“widgets”) that display market data and related content, while still giving you full control over the user interface.

Each component’s UI template can be customized—from markup and classes/styling to full restructuring of the layout. The goal is to let you integrate QuoteMedia’s data seamlessly into your site’s existing design and UX.

At a high level:

  • QMod components are powered by QuoteMedia JSON APIs.

  • Data is loaded asynchronously using modern JavaScript patterns so that your site remains responsive and non‑blocking.

  • If a QMod component encounters an error or if a data service is unavailable, your page continues to render normally; QMod is designed to fail gracefully rather than block your site.

QMod is packaged to minimize conflicts with your existing code:

  • Components are built as self‑contained modules.

  • No additional jQuery or global objects are injected into the global scope.

  • QMod is designed to avoid collisions with already‑loaded libraries and frameworks.

For layout and styling, QMod uses a responsive grid system and CSS that you can override to align with your own design system.

How does it work?

Once you’ve selected a QMod component, integration follows a simple pattern:

  1. You receive:

    • A Webmaster ID (WMID).

    • A tool name (the component identifier).

    • The list of parameters supported by that component.

  2. On your page, you:

    • Add a QMod component <div> with:

      • data-qmod-tool set to the tool name.

      • data-qmod-params containing a JSON object of parameters.

      • class="qtool" (required by QMod).

    • Include the QMod loader <script> with your WMID.

Component <div> example


<div
  data-qmod-tool="detailedquotetabchartnews"
  data-qmod-params='{ "symbol": "GOOGL" }'
  class="qtool">
</div>

This tells QMod:

  • Which tool to load (detailedquotetabchartnews).

  • Which parameters to use (symbol: "GOOGL" in this example).

To add additional parameters, extend the JSON object in data-qmod-params:

<div
  data-qmod-tool="detailedquotetabchartnews"
  data-qmod-params='{ "symbol": "T", "chfill": "aaaaaa", "chfill2": "111111" }'
  class="qtool">
</div>

Note: data-qmod-params must contain valid JSON. Ensure property names and string values are quoted properly and that characters are correctly escaped.

Loader script

<script
  id="qmod"
  type="application/javascript"
  src="https://qmod.quotemedia.com/js/qmodLoader.js"
  data-qmod-wmid="XXXXX">
</script>

  • src points to the QMod loader.

  • data-qmod-wmid is your assigned Webmaster ID.

  • You typically place this script tag near the end of your <body> so it runs after the DOM has loaded, although it can also be loaded earlier as long as QMod’s initialization runs after your component <div>s are present.

Once the loader runs, it will:

  1. Scan the page for elements with class="qtool".

  2. Read the data-qmod-tool and data-qmod-params attributes.

  3. Request the appropriate data from QuoteMedia.

  4. Render the requested component into the target <div> using the default or custom template.

Components and Parameters

For a complete list of available QMod components and their parameters, please see:

The Developer Utility lets you:

  • Browse available tools.

  • Inspect parameters and defaults.

  • Test configurations and see how they render before integrating them into your site.


QMod Integration Best Practices

The QMod Integration Best Practices complements the QMod Developer Document and focuses on practical best practices for integrating QMod components into your site.