📋 Table of Contents

• 📦 Installation
  • 1. Set up authentication
  • 2. Install the package
• ⚡ Quick Start
  • 1. Import the components
  • 2. Use it in your code
• 🚀 Router (mq-router)
  • 1. Import the router
  • 2. Use it in your code
  • 3. Events
• 🔧 TypeScript Configuration
• 🎯 Example
• 📱 Native Implementations

📦 Installation

1. Set up authentication

Create or update your .npmrc file in your project root:

echo "//registry.npmjs.org/:_authToken=YOUR_NPM_TOKEN" >> .npmrc

Replace YOUR_NPM_TOKEN with your npm access token.

2. Install the package

npm install @mediquo/web-components

⚡ Quick Start

This section covers the mq-videocall component. If you need routing, see the Router (mq-router) section.

1. Import the components

import "@mediquo/web-components/mq-videocall";

2. Use it in your code

<mq-videocall
  api-key="your-api-key"
  appointment-id="appointment-123"
  token="your-token"
>
</mq-videocall>

🚀 Router (mq-router)

The mq-router component provides a full routing solution for integrating Mediquo's features into a web application. It handles navigation and renders the appropriate components based on the URL.

1. Import the router

First, import the mq-router component in your application's entry point:

import "@mediquo/web-components/mq-router";

2. Use it in your code

Add the mq-router element to your HTML where you want the Mediquo interface to be rendered.

<mq-router
  base-url="/mediquo"
  api-key="your-api-key"
  token="your-token"
  locale="en_US"
></mq-router>

Note

It's important to configure your application's routing to catch all sub-routes from the base-url and direct them to the mq-router. This ensures that all Mediquo-related navigation is handled correctly. For example, if you set base-url="/mediquo", your router should be configured to handle paths like /mediquo/*.

Properties

• base-url (optional, default: /): The base path for all routes. If your application is served from a sub-directory, set this to the directory name (e.g., /app).
• api-key (required): Your Mediquo API key.
• token (required): A valid authentication token.
• locale (optional, default: es_ES): The language locale for the components. Supported values:
  • es_ES: Spanish (Spain)
  • en_US: English (US)
  • pt_PT: Portuguese (Portugal)
  • de_DE: German (Germany)
  • ca_ES: Catalan (Spain)

Available Routes

The mq-router comes with the following routes pre-configured:

• Home:
  • Path: / (relative to base-url)
  • Description: The default view.
• Video Consultation:
  • Path: /consulta/:appointmentId (relative to base-url)
  • Description: Renders the video consultation component for a specific appointment.
  • Parameters:
    • :appointmentId: The unique identifier for the appointment.

For example, if base-url is set to /mediquo, navigating to /mediquo/consulta/12345 will open the video call for the appointment with ID 12345.

3. Events

The mq-router emits DOM events for host applications to react to certain actions.

Event reference:

| Event | Event properties | Description | | --------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | download-file | - url (string): Base64 data URL of the file- filename (string): File name, including extension (e.g., report.pdf) | Emitted when a file should be downloaded (e.g., from the documentation view). |

Examples:

• Web (Browser)

  const router = document.querySelector("mq-router");
  
  router?.addEventListener("download-file", (event) => {
    const { url, filename } = event;
  
    const link = document.createElement("a");
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    link.remove();
  });

• Capacitor (iOS/Android) with @capacitor/filesystem

  import { Filesystem, Directory } from "@capacitor/filesystem";
  
  const router = document.querySelector("mq-router");
  
  router?.addEventListener("download-file", async (event) => {
    const { url, filename } = event;
  
    // Extract base64 from a data URL if present
    const base64Data = url.includes(",") ? url.split(",")[1] : url;
  
    await Filesystem.writeFile({
      path: filename, // e.g., "report.pdf"
      data: base64Data,
      directory: Directory.Documents,
    });
  
    // Optional: get a URI for further handling (share/open)
    const result = await Filesystem.getUri({
      path: filename,
      directory: Directory.Documents,
    });
    console.log("File saved at:", result.uri);
  });

🔧 TypeScript Configuration (Optional)

If you need to import utilities, types, or other exports from the package beyond the web components (such as i18n functions, types, or helper utilities), you may need to configure your tsconfig.json with modern module resolution settings:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext"
  }
}

Key settings explained:

• moduleResolution: "bundler" - Enables modern bundler-aware module resolution for importing package internals
• module: "ESNext" - Uses the latest ECMAScript module syntax

Note: This configuration is only required if you need to import additional exports from the package. The basic web component imports will work without these settings.

🎯 Example

<!DOCTYPE html>
<html>
  <head>
    <title>Mediquo Application</title>
    <script type="module">
      import "@mediquo/web-components/mq-router";
    </script>
    <style>
      .app-container {
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
      }
      body {
        margin: 0;
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="app-container">
      <mq-router
        base-url="/mediquo"
        api-key="your-api-key"
        token="your-token"
        locale="en_US"
      >
      </mq-router>
    </div>
  </body>
</html>

📱 Native Implementations

When using the web components in native environments (iOS/Android), ensure you have the proper permissions configured:

iOS (Info.plist)

Add the following permissions to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access for video calls</string>

Android (AndroidManifest.xml)

Add the following permissions to your AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.INTERNET" />

Release steps

• npm run changeset on every change (PR, ...)
• npm run version-packages
• add all to staging area
• npm run commit-version -w @mediquo/web-components
• npm run build -w @mediquo/web-components
• npm run release