Skip to main content
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: 
<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. Each tool has a unique URL endpoint.
2

Configure Theme

Customize the tool’s appearance by passing theme 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: 
const theme = {
  mode: "dark",
  seed: "#006AD4"
};

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

<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

"theme": {
  "mode": "light",
  "seed": "#006AD4"
}
PropertyDescriptionValues
theme.modeTheme modelight, dark
theme.seedSeed color (hex with #)e.g., #006AD4

View All Options

Learn about all available customization options.

​
Responsive Embedding

For responsive designs, wrap the iframe in a container with appropriate CSS: 
<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

Explore all tools available for embedding on your website.