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

# Web Integration

> Embed Quicko Tools into your website using iframes for a seamless, no-dependency integration.

Quicko Tools can be embedded directly into your website using a simple iframe. This approach requires no SDK installation and works across all modern browsers.

## Quick Start

Embedding a Quicko Tool is as simple as adding an iframe to your HTML:

```html theme={null}
<iframe
  src="https://tools.quicko.com/hra-calculator"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>
```

## Integration Steps

**1. Choose a Tool**

Select the tool you want to embed from our [directory](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/directory/index.md). Each tool has a unique URL endpoint.

**2. Configure Theme**

Customize the tool's appearance by passing [theme](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/options/index.md) as a JSON object for mode and seed color.

**3. Add the iframe**

Insert the iframe code into your webpage at the desired location.

**4. Test & Deploy**

Verify the tool displays correctly across different screen sizes and browsers, then deploy.

## Passing Theme

You can customize the tool's appearance by passing an `theme` JSON object as a URL-encoded query parameter:

```javascript theme={null}
const theme = {
  mode: "dark",
  seed: "#006AD4"
};

const encodedOptions = encodeURIComponent(JSON.stringify(theme));
const iframeSrc = `https://tools.quicko.com/hra-calculator?theme=${encodedOptions}`;
```

```html theme={null}
<iframe
  id="quicko-tool"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

<script>
  const theme = {
    mode: "dark",
    seed: "#006AD4"
  };
  
  const encodedOptions = encodeURIComponent(JSON.stringify(theme));
  document.getElementById('quicko-tool').src = 
    `https://tools.quicko.com/hra-calculator?theme=${encodedOptions}`;
</script>
```

### Theme Object Structure

```json theme={null}
"theme": {
  "mode": "light",
  "seed": "#006AD4"
}
```

| Property | Description | Values |
| - | - | - |
| `theme.mode` | Theme mode | `light`, `dark` |
| `theme.seed` | Seed color (hex with #) | e.g., `#006AD4` |

> **[View All Options](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/options/index.md)**
>
> Learn about all available customization options.

## Responsive Embedding

For responsive designs, wrap the iframe in a container with appropriate CSS:

```html theme={null}
<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://tools.quicko.com/hra-calculator"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allow="clipboard-write"
  ></iframe>
</div>
```

## Best Practices

> **Set Appropriate Height**
>
> Ensure the iframe has enough height to display the tool without internal scrolling.

> **Allow Clipboard Access**
>
> Include `allow="clipboard-write"` for tools that let users copy results.

> **Match Your Theme**
>
> Use the seed color option to match the tool's accent color with your website's branding.

> **Test on Mobile**
>
> Verify the embedded tool works well on mobile viewports.

***

## Next Steps

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


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