> ## Documentation Index
> Fetch the complete documentation index at: https://quickoinfosoftprivatelimited.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile Integration

> Integrate Quicko Tools into your iOS or Android app using WebView.

Quicko Tools can be easily integrated into your mobile app by loading the tool URL in a WebView. This approach is identical to using an iframe on web—simply load the tool URL and it renders seamlessly within your app.

## Overview

The mobile integration uses a WebView to display Quicko Tools, providing a consistent experience across platforms with minimal setup.

> **No SDK Required**
>
> Simply use your platform's native WebView component—no additional dependencies needed.

> **Consistent Experience**
>
> Tools render exactly as they would on web, ensuring feature parity across platforms.

> **Easy Theming**
>
> Customize appearance using URL parameters, just like web integration.

## Quick Start

**iOS (Swift)**

Use `WKWebView` to load the tool URL:

```swift theme={null}
import WebKit
import Foundation

class ToolViewController: UIViewController {
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView = WKWebView(frame: view.bounds)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(webView)
        
        // Define theme configuration
        let theme: [String: Any] = [
            "mode": "dark",
            "seed": "#2962FF"
        ]
        
        // Convert theme to base64
        if let jsonData = try? JSONSerialization.data(withJSONObject: theme),
           let base64Theme = jsonData.base64EncodedString()
                .addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
            
            // Construct the tool URL with base64 encoded theme
            let toolUrl = "https://tools.quicko.com/calculators/hra?theme=\(base64Theme)"
            
            if let url = URL(string: toolUrl) {
                webView.load(URLRequest(url: url))
            }
        }
    }
}
```

**Android (Kotlin)**

Use `WebView` to load the tool URL:

```kotlin theme={null}
import android.os.Bundle
import android.util.Base64
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
import org.json.JSONObject

class ToolActivity : AppCompatActivity() {
    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        webView = WebView(this).apply {
            settings.javaScriptEnabled = true
            webViewClient = WebViewClient()
        }
        setContentView(webView)
        
        // Define theme configuration
        val theme = JSONObject().apply {
            put("mode", "dark")
            put("seed", "#2962FF")
        }
        
        // Convert theme to base64
        val base64Theme = Base64.encodeToString(
            theme.toString().toByteArray(Charsets.UTF_8),
            Base64.NO_WRAP
        )
        
        // Construct the tool URL with base64 encoded theme
        val toolUrl = "https://tools.quicko.com/calculators/hra?theme=$base64Theme"
        webView.loadUrl(toolUrl)
    }
}
```

**Flutter**

Use the `webview_flutter` package to load the tool URL:

```dart theme={null}
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class ToolPage extends StatefulWidget {
  @override
  State<ToolPage> createState() => _ToolPageState();
}

class _ToolPageState extends State<ToolPage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    
    // Define theme configuration
    final theme = {
      'mode': 'dark',
      'seed': '#2962FF',
    };
    
    // Convert theme to base64
    final base64Theme = base64Encode(utf8.encode(jsonEncode(theme)));
    
    // Construct the tool URL with base64 encoded theme
    final toolUrl = 'https://tools.quicko.com/calculators/hra?theme=$base64Theme';
    
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(toolUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('HRA Calculator')),
      body: WebViewWidget(controller: controller),
    );
  }
}
```

**React Native**

Use the `react-native-webview` package to load the tool URL:

```jsx theme={null}
import React, { useMemo } from 'react';
import { WebView } from 'react-native-webview';
import { Buffer } from 'buffer';

const ToolScreen = () => {
  const toolUrl = useMemo(() => {
    // Define theme configuration
    const theme = {
      mode: 'dark',
      seed: '#2962FF',
    };
    
    // Convert theme to base64
    const base64Theme = Buffer.from(JSON.stringify(theme)).toString('base64');
    
    // Construct the tool URL with base64 encoded theme
    return `https://tools.quicko.com/calculators/hra?theme=${base64Theme}`;
  }, []);

  return (
    <WebView
      source={{ uri: toolUrl }}
      javaScriptEnabled={true}
      style={{ flex: 1 }}
    />
  );
};

export default ToolScreen;
```

## URL Structure

The tool URL follows this pattern:

```
https://tools.quicko.com/{tool-path}?theme={base64-encoded-theme}
```

The `theme` parameter is a base64-encoded JSON object:

```json theme={null}
{
  "mode": "dark",
  "seed": "#2962FF"
}
```

| Property | Type | Description |
| - | - | - |
| `mode` | `String` | Theme mode: `light` or `dark` |
| `seed` | `String` | Seed color (hex with #) for theme generation |

> **[View All Options](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/options/index.md)**
>
> Learn about all available customization options and how they affect the generated theme.

## Integration Steps

**1. Get the Tool URL**

Find the tool you want to integrate from the [Tools Directory](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/directory/index.md) and note its URL path.

**2. Create Theme Object**

Define a theme object with `mode` (light/dark) and `seed` (hex color) properties.

**3. Encode as Base64**

Convert the theme JSON to a base64 string.

**4. Load in WebView**

Append the base64 theme to the URL and load it in your platform's WebView component.

## Best Practices

> **Match App Theme**
>
> Use your app's primary color as the seed color for consistent branding.

> **Respect System Theme**
>
> Detect the user's system theme preference and set the mode accordingly.

> **Handle Navigation**
>
> Consider implementing back button handling for WebView navigation.

> **Loading States**
>
> Show a loading indicator while the WebView content loads.

***

## Next Steps

> **[Browse Available Tools](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/directory/index.md)**
>
> Explore all tools available for your mobile app.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.