Mobile Integration - Quicko

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)
Android (Kotlin)
Flutter
React Native

Use WKWebView to load the tool URL:

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))
            }
        }
    }
}

Use WebView to load the tool URL:

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)
    }
}

Use the webview_flutter package to load the tool URL:

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),
    );
  }
}

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

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:

{
  "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

Learn about all available customization options and how they affect the generated theme.

Integration Steps

Get the Tool URL

Find the tool you want to integrate from the Tools Directory and note its URL path.

Create Theme Object

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

Encode as Base64

Convert the theme JSON to a base64 string.

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

Explore all tools available for your mobile app.

Getting Started

Integration

Options

Directory

​Overview

​Quick Start

​URL Structure