> ## Documentation Index
> Fetch the complete documentation index at: https://developer.quicko.com/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.

<AccordionGroup>
  <Accordion title="No SDK Required" icon="feather" defaultOpen>
    Simply use your platform's native WebView component—no additional dependencies needed.
  </Accordion>

  <Accordion title="Consistent Experience" icon="smartphone" defaultOpen>
    Tools render exactly as they would on web, ensuring feature parity across platforms.
  </Accordion>

  <Accordion title="Easy Theming" icon="palette">
    Customize appearance using URL parameters, just like web integration.
  </Accordion>
</AccordionGroup>

## Quick Start

<Tabs>
  <Tab title="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))
                }
            }
        }
    }
    ```
  </Tab>

  <Tab title="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)
        }
    }
    ```
  </Tab>

  <Tab title="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),
        );
      }
    }
    ```
  </Tab>

  <Tab title="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;
    ```
  </Tab>
</Tabs>

## 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 |

<Card title="View All Options" icon="settings" href="/projects/tools/options/index" horizontal>
  Learn about all available customization options and how they affect the generated theme.
</Card>

## Integration Steps

<Steps>
  <Step title="Get the Tool URL">
    Find the tool you want to integrate from the [Tools Directory](/projects/tools/directory/index) and note its URL path.
  </Step>

  <Step title="Create Theme Object">
    Define a theme object with `mode` (light/dark) and `seed` (hex color) properties.
  </Step>

  <Step title="Encode as Base64">
    Convert the theme JSON to a base64 string.
  </Step>

  <Step title="Load in WebView">
    Append the base64 theme to the URL and load it in your platform's WebView component.
  </Step>
</Steps>

## Best Practices

<Columns cols={2}>
  <Card title="Match App Theme" icon="palette">
    Use your app's primary color as the seed color for consistent branding.
  </Card>

  <Card title="Respect System Theme" icon="sun-moon">
    Detect the user's system theme preference and set the mode accordingly.
  </Card>

  <Card title="Handle Navigation" icon="arrow-left">
    Consider implementing back button handling for WebView navigation.
  </Card>

  <Card title="Loading States" icon="loader">
    Show a loading indicator while the WebView content loads.
  </Card>
</Columns>

***

## Next Steps

<Card title="Browse Available Tools" icon="layout-grid" href="/projects/tools/directory/index">
  Explore all tools available for your mobile app.
</Card>