Article applies to: Native iOS and Android apps integrating QuoteMedia QMod widgets via WebView


TABLE OF CONTENTS

Overview

QMod is QuoteMedia's library of prebuilt market data widgets. While QMod is built on web technologies (HTML, CSS, JavaScript), it can be integrated into native mobile applications using a WebView — a component available in both iOS and Android that renders web content within a native app shell.


This article covers everything you need to know to implement QMod in a mobile application, including integration model options, session management, domain requirements, and code examples.

WebView vs. iFrame

For native mobile apps, WebView is the correct and recommended approach. iFrames are a web-only mechanism and are not suited for native mobile development. WebView offers deeper control, direct interaction with native device APIs, and is the industry standard for embedding web content in iOS and Android applications.

Integration Models

There are two ways to deliver QMod in a mobile context:


1. QM-Hosted WebView (Recommended) QuoteMedia hosts the page containing the QMod widgets. Your native app loads a QM-hosted URL inside its WebView. This model reduces your maintenance burden — QuoteMedia manages the content and updates centrally while your app controls the native shell and authentication handoff.


2. Client-Hosted WebView You host the HTML page containing the QMod loader and widgets on your own domain. Your WebView loads that page. This model gives you more control over the page structure and branding but requires your domain to be whitelisted by QuoteMedia (see Domain Whitelisting below).

Contact your QuoteMedia representative to determine which model is right for your implementation.

Prerequisites

Before beginning, ensure the following are in place:

  • Your Webmaster ID (WMID) has been provisioned by QuoteMedia
  • The QMod products you intend to use have been entitled to your WMID
  • Your domain (or QM-hosted domain) has been whitelisted for CORS by QuoteMedia
  • Your implementation uses HTTPS — QMod requires a secure connection
  • You have access to the UMS Account Service APIs for user and session management (see User Management section below)

Domain Whitelisting

QMod enforces CORS (Cross-Origin Resource Sharing) restrictions. Every request is validated against a pre-approved list of domains associated with your WMID. Requests from unlisted domains are automatically blocked.

For mobile WebView implementations:

  • If using a QM-hosted page, QuoteMedia manages the whitelisted domain on your behalf
  • If using a client-hosted page, provide your domain to your QuoteMedia representative to have it added to your WMID's allowlist before going live

If you encounter CORS errors during testing, contact QuoteMedia support to verify your domain configuration.

QMod Loader

The QMod loader is a JavaScript tag that must be included once per page, placed after all widget <div> elements.


<script
  id="qmod"
  type="application/javascript"
  src="//qmod.quotemedia.com/js/qmodLoader.js"
  data-qmod-wmid="YOUR_WMID"
  data-qmod-env="app"
  data-qmod-sid="USER_SESSION_ID"
  async>
</script>


AttributeDescription
data-qmod-wmidYour Webmaster ID (WMID)
data-qmod-envapp for production, uat for testing
data-qmod-sidThe authenticated user's Session ID (required for entitlement-based tools and real-time data)

There should only ever be one loader instance per page.

Widget Placement

Each QMod widget is placed as a <div> with a data-qmod-tool attribute specifying the widget name. The loader must appear after all widget divs on the page.


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

<!-- Loader goes here, after all widget divs -->
<script
  id="qmod"
  src="//qmod.quotemedia.com/js/qmodLoader.js"
  data-qmod-wmid="YOUR_WMID"
  data-qmod-env="app"
  data-qmod-sid="USER_SESSION_ID"
  async>
</script>


Viewport Configuration

For proper rendering in a mobile WebView, always include the following viewport meta tag in your page <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Without this, QMod widgets may render at desktop scale within your mobile WebView.

React Native Example

The following is a minimal working example of a QMod widget rendered in a React Native WebView:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  const qmodHtmlContent = `
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      </head>
      <body>
        <div
          data-qmod-tool="detailedquotetabchart"
          data-qmod-params='{"symbol":"GOOGL"}'
          class="qtool">
        </div>

        <script
          id="qmod"
          type="application/javascript"
          src="//qmod.quotemedia.com/js/qmodLoader.js"
          data-qmod-wmid="YOUR_WMID"
          data-qmod-env="app"
          data-qmod-sid="USER_SESSION_ID"
          async>
        </script>
      </body>
    </html>
  `;

  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={{ html: qmodHtmlContent }}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  webview: { flex: 1 },
});

export default App;

User Management and Sessions

QMod tools that require real-time data or user-specific features (Watchlist, Portfolio, Alerts, Level 2) require a valid Session ID (SID) obtained via the UMS authentication service.

Authenticating a Mobile User

Make a POST request to the authenticate endpoint, including &application=mobile to generate a session.


POST https://app.quotemedia.com/auth/p/authenticate/v0/
Content-Type: application/json

{
  "enterpriseToken": "YOUR_ENTERPRISE_TOKEN",
  "username": "user123",
  "wmId": YOUR_WMID,
  "application": "mobile"
}


Session Lifecycle

StepAction
User logs inCall authenticate → store the SID
Load QMod pagePass SID via data-qmod-sid on the loader
Keep session aliveCall session periodically — SID expires after 30 minutes of inactivity
User logs outCall unauthenticate to terminate the session


Key UMS API Calls

CallPurpose
createUserCreate a new user account
authenticateCreate a session and retrieve SID
sessionVerify and refresh an active SID
unauthenticateTerminate a session on logout
updateUserProductsEntitle a user to products
getUserEntitledExchangesCheck exchange agreement status
cancelAccountCancel a user account


Full UMS documentation and sample code are available in the QuoteMedia Developer Knowledge Base:

Compliance — Exchange Agreements

On every login, call getUserEntitledExchanges to verify the user's compliance status before loading QMod. Handle the following states:

  • Active + Signed — Real-time data will display normally
  • Active + Not Signed — Direct the user to your exchange agreements page before loading QMod
  • Active + Annual Verification Due — Direct the user to re-complete exchange agreement verification
  • Cancelled — Notify the user their account is inactive and provide next steps
  • Blocked by Compliance — Notify the user and provide contact information; only delayed data will display until resolved

UAT Testing


Use the UAT environment during development to avoid affecting production users.


ServiceUAT Endpoint
UMS Account APIshttps://uat.quotemedia.com/ums
Authenticatehttps://uat.quotemedia.com/auth/p/authenticate/v0/
QMod LoaderSet data-qmod-env="uat"


UAT maintains a separate user database from production. Any accounts, portfolios, or watchlists created in UAT will not carry over to production. Before go-live, ensure all code and configuration is updated to point to production endpoints.

Data Attribution

QuoteMedia is required by the exchanges to be identified as the data provider. Include the following attribution footer on any page displaying QMod widgets:


https://client.quotemedia.com/qmc/footer/?product=qmod

Additional Resources

For implementation assistance, contact your QuoteMedia representative or submit a support ticket at https://quotemediasupport.freshdesk.com.