Skip to main content
Toolisti

Embed Documentation

Everything you need to know about embedding Toolisti tools on your website

Try the Embed Generator →

Table of Contents

Quick Start

Embedding Toolisti tools on your website is incredibly simple. Follow these four easy steps to get started:

  1. 1

    Choose a tool from the embed generator

    Visit our Embed Generator and select from our available tools

  2. 2

    Customize the appearance

    Adjust colors, size, border radius, and theme to match your brand

  3. 3

    Copy the generated iframe code

    Click the copy button to get your customized embed code

  4. 4

    Paste it into your HTML

    Add the code wherever you want the tool to appear on your website

<iframe
  src="https://toolisti.com/embed/temperature-converter"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px;"
  title="Temperature Converter by Toolisti"
></iframe>

Available Tools

All tools are available for embedding. Choose from:

📝

Text & Content

Text manipulation and content creation tools

 🔢

Calculators & Converters

Powerful calculators and unit converters for everyday needs

 🎨

Design & Color

Professional design and color tools

 ⚙️

Developer Tools

Essential utilities for developers

 ⚡

Productivity

Focus timers, decision makers, and workflow tools

Note: Each tool can be embedded at /embed/{'{tool-id}'} (e.g., /embed/temperature-converter)

Customization Options

Customize the appearance of embedded tools using URL parameters:

primaryColor

HEX color without # (e.g., 3b82f6)

Default: 3b82f6 (blue)

accentColor

HEX color without # (e.g., f97316)

Default: f97316 (orange)

size

Controls padding and font size: sm, md, or lg

Default: md

borderRadius

Controls corner rounding: none, sm, md, or lg

Default: md

theme

Controls color scheme: light or dark

Default: light

hidePrivacy

Hides the "Powered by Toolisti" footer: true or false

Default: false

width

Controls the container width and accepts any CSS dimension value. Supported units include px, %, rem, and vw. Examples: 100%, 800px, 40rem, 80vw

Default: 100% (responsive, fills parent container)

height

Controls the container height and accepts any CSS dimension value. Supported units include px, %, rem, and vh. Examples: 600px, 50vh, 30rem

Default: 600px (reasonable default for most tools)

Example URL with parameters:

/embed/temperature-converter?primaryColor=3b82f6&size=lg&theme=dark&width=800px&height=700px

URL Encoding Note: Special characters like % must be URL-encoded when manually editing URLs (e.g., 100% → 100%25). The Embed Generator automatically handles encoding for you.

Quick Reference: Common Parameter Combinations

Copy these parameter strings and append to any embed URL for quick customization:

Responsive & Light

?width=100%&height=600px&theme=light

Fixed & Dark

?width=800px&height=700px&theme=dark

Large & Colorful

?size=lg&primaryColor=8b5cf6&accentColor=ec4899

Viewport-Relative

?width=80vw&height=70vh&size=lg

Tip: Values like 100% must be URL-encoded as 100%25 if manually editing. The Embed Generator handles this automatically.

Complete Parameter Reference

Parameter Type Values Default Description
primaryColor HEX Any hex color without # 3b82f6 Used for buttons, links, and primary interactive elements
accentColor HEX Any hex color without # f97316 Used for highlights, hover states, and secondary elements
size Enum sm, md, lg md Controls overall scale (padding, font size)
theme Enum light, dark light Controls color scheme for better visual integration
borderRadius Enum none, sm, md, lg md Controls corner rounding of elements
hidePrivacy Boolean true, false false Hides "Powered by Toolisti" footer (contact for white-label)
width CSS px, %, rem, vw 100% Controls container width (responsive by default)
height CSS px, %, rem, vh 600px Controls container height

Visual Customization Examples

See how each customization option affects the appearance of embedded tools. These examples show before/after comparisons to help you understand the visual impact.

Primary Color Customization

The primary color affects active toggle buttons, primary action buttons, focus states, and info card backgrounds.

Default Blue (#3b82f6)

Active toggle buttons, Calculate button, and focus rings all use blue. Info cards have light blue background (#eff6ff).

Green (#22c55e)

Same elements now use green, creating a fresh, eco-friendly appearance. Info cards have light green background (#f0fdf4).

Purple (#a855f7)

Purple creates a creative, premium feel. Info cards have light purple background (#faf5ff).

/embed/vat-calculator?primaryColor=22c55e

Visual impact: Notice how the Calculate button, active mode toggle, and focus rings all change color consistently across the interface.

Theme Switching

Theme controls the overall color scheme - background, text, and borders.

Light Theme (default)

White background (#ffffff), dark text (#0f172a), light borders (#e2e8f0). Clean, professional, traditional appearance.

Dark Theme

Dark background (#0f172a), light text (#f8fafc), darker borders (#334155). Modern, sleek, eye-friendly.

/embed/json-formatter?theme=dark

Important: Semantic colors (red errors, green success) remain visible in both themes. Color tools preserve accurate color displays regardless of theme.

Size Scaling

Size controls padding, font size, and overall layout density.

Small (sm)

Compact layout with reduced padding (0.5rem), smaller text (0.875x). Ideal for sidebars and widgets.

Medium (md)

Balanced default layout with standard padding (0.75rem), normal text (1x). Works for most use cases.

Large (lg)

Spacious layout with generous padding (1rem), larger text (1.125x). Ideal for hero sections.

/embed/word-counter?size=lg

Visual impact: All UI elements scale proportionally while maintaining readability. Text, buttons, inputs, and spacing all adjust together.

Border Radius

Border radius controls corner rounding on cards, inputs, buttons, and alerts.

None (0px)

Sharp corners, modern minimalist aesthetic. All UI elements have 90-degree corners.

Small (4px)

Subtle rounding, professional appearance. Barely noticeable but softens the design.

Medium (8px)

Default rounded corners, friendly and approachable. Balanced between sharp and round.

Large (12px)

Prominent rounding, playful and modern. Noticeably rounded corners with friendly feel.

/embed/color-converter?borderRadius=lg

Visual impact: Border radius applies consistently to cards, inputs, buttons, and alerts throughout the interface.

Combined Customization

All customization options work together. Here's an example combining multiple parameters for a bold, modern appearance:

Configuration:

  • Primary Color: Purple (#a855f7)
  • Accent Color: Pink (#ec4899)
  • Theme: Dark
  • Size: Large
  • Border Radius: Large
/embed/gradient-generator?primaryColor=a855f7&accentColor=ec4899&theme=dark&size=lg&borderRadius=lg

Result: This creates a bold, modern appearance perfect for creative brands. The purple/pink color scheme stands out, the dark theme provides contrast, the large size makes it prominent, and the large border radius gives it a friendly, modern feel.

Auto-Adjusting Iframe Height

Embedded tools automatically send height updates to the parent page. You have two options to enable auto-resizing:

Option 1: Use Our Hosted Script (Recommended)

Simply include our minified auto-resize script in your page. This is the easiest method and ensures you always have the latest version: 

<script src="https://toolisti.com/embed-resize.js"></script>

✅ Recommended: This script is lightweight (~500 bytes minified), cached by CDN, and automatically handles all Toolisti embeds on your page.

Option 2: Inline JavaScript

Alternatively, you can include the script inline if you prefer not to load external scripts: 

<script>
  window.addEventListener('message', function(event) {
    // Whitelist of allowed Toolisti origins
    const allowedOrigins = [
      'https://toolisti.com',
      'https://www.toolisti.com'
      // Add preview/staging domains if needed
    ];

    // Verify the message is from an allowed Toolisti origin
    if (!allowedOrigins.includes(event.origin)) return;

    // Check message type
    if (event.data.type === 'toolisti-resize') {
      // Find all Toolisti iframes and update their height
      const iframes = document.querySelectorAll('iframe[src*="toolisti.com/embed"]');
      iframes.forEach(function(iframe) {
        if (iframe.contentWindow === event.source) {
          iframe.style.height = event.data.height + 'px';
        }
      });
    }
  });
</script>

Note: Auto-resize scripts are optional. If not included, you'll need to set a fixed height on the iframe.

Security Tip: The allowedOrigins array supports multiple Toolisti domains. If you're using preview or staging environments, add those domains to the whitelist. You can also dynamically derive the allowed origin from the iframe's src attribute for more flexibility.

Tip: For better UX, set an initial height (e.g., 600px) to prevent layout shift while the tool loads.

Security Best Practices

Follow these security recommendations when embedding Toolisti tools:

Origin Verification

Always verify event.origin in postMessage listeners (as shown in the auto-height example above). This prevents malicious sites from sending fake resize events.

Parameter Sanitization

The width and height parameters are validated and sanitized to accept only safe CSS units (px, %, rem, vw, vh). Invalid values automatically fall back to safe defaults, preventing injection attacks.

CSP Headers

If using Content Security Policy, add frame-src https://toolisti.com to allow embedding.

Sandbox Attribute

Consider using iframe sandbox attribute for additional security (e.g., sandbox="allow-scripts allow-same-origin").

HTTPS Only

Always use HTTPS URLs for embeds (https://toolisti.com/embed/...).

No Sensitive Data

While our tools are privacy-first, avoid embedding on pages with sensitive user data as a general best practice.

Troubleshooting

Common issues and solutions:

Q: The iframe is not displaying

A: Check the following:

  • Verify the URL is correct and starts with https://toolisti.com/embed/
  • Verify your CSP headers allow iframe embedding
  • Check browser console for errors

Q: The tool is cut off / scrollbars appear

A: Solutions:

  • Implement the auto-height JavaScript snippet (see above)
  • Or set a larger fixed height on the iframe (e.g., height="800")

Q: Customization parameters aren't working

A: Verify the following:

  • Parameter names are spelled correctly (case-sensitive)
  • Color values don't include the # symbol
  • Enum values match exactly (e.g., size=md, not size=medium)

Q: The tool looks different than on the main site

A: This is expected:

  • Embed pages use a minimal layout without navigation/footer
  • Customization parameters may override default colors
  • Check that your parent page CSS isn't affecting the iframe

Q: Can I embed multiple tools on one page?

A: Yes! Each tool should be in its own iframe. The auto-height script handles multiple iframes automatically.

Q: The iframe is too wide/narrow for my layout

A: Use the width parameter to control sizing:

  • Use width=100% for responsive width (adapts to container)
  • Use width=800px for fixed width (stays consistent)
  • Use width=80vw for viewport-relative width (scales with browser)
  • Width can be set via URL parameter or iframe attribute
  • Use the embed generator to preview different widths

Q: The tool content is cut off vertically

A: Try these solutions:

  • Increase the height parameter (e.g., height=800px instead of 600px)
  • Use the auto-resize script (see Auto-Adjusting Height section)
  • Use viewport height units for dynamic sizing (e.g., height=80vh)
  • Different tools have different height requirements - test with actual content

Q: Can I make the embed full-screen?

A: Yes, using viewport units:

  • Use width=100vw&height=100vh for true full-screen
  • Use width=100%&height=100vh for full-height but respecting container width
  • Consider mobile UX when using full-screen embeds
  • Add CSS to the parent container for better control

Customization Troubleshooting

Common issues with color, theme, and size customization:

Q: Primary color is not applying to buttons

A: Check the following:

  • Verify the HEX color is valid (3 or 6 characters, no # symbol)
  • Verify the parameter name is primaryColor (case-sensitive)
  • Check browser DevTools → Elements → Computed styles to see if --embed-primary-color CSS variable is set
  • Verify the tool has been updated to use embed-aware components
  • Try a different color to rule out color-specific issues (e.g., ?primaryColor=ff0000)

Q: Theme switching doesn't change the appearance

A: Verify:

  • Parameter is theme=dark or theme=light (case-sensitive)
  • Check browser DevTools → Elements → Computed styles for --embed-bg-color and --embed-text-color variables
  • Some tools preserve semantic colors (red errors, green success) regardless of theme - this is intentional
  • Color tools preserve accurate color displays regardless of theme - this is intentional
  • Clear browser cache and reload if you recently updated the URL

Q: Size scaling is not working

A: Check:

  • Parameter is size=sm, size=md, or size=lg (case-sensitive, lowercase)
  • Verify the tool supports size scaling (all tools should support it)
  • Check browser DevTools for --embed-size-scale and --embed-font-scale CSS variables
  • Some elements (like monospace code) may scale less dramatically to maintain readability
  • Try switching between size=sm and size=lg to see the difference more clearly

Q: Colors in color tools are affected by theme

A: This should NOT happen - it's a bug if color displays change with theme:

  • Color swatches, previews, and native color pickers should always show exact colors
  • Only UI elements (buttons, labels, borders) should respond to theme
  • If color displays are affected, please report this as a bug at hello@toolisti.com
  • Workaround: Use light theme for color tools until fixed

Q: Semantic colors (red/green/yellow) are not visible in dark theme

A: This should NOT happen - semantic colors should remain visible:

  • Error messages should always be red
  • Success indicators should always be green
  • Warning messages should always be yellow/amber
  • Health indicators (profit margin) should show red/yellow/green/blue
  • Security badges (hash generator) should show red/yellow/green
  • If semantic colors are invisible, please report this as a bug at hello@toolisti.com

Q: Monospace fonts are not preserved for code/numbers

A: This should NOT happen - monospace fonts should be preserved:

  • All code displays (JSON, Base64, URLs, hashes, UUIDs) should use monospace
  • All numeric values (currency, calculations) should use monospace
  • If monospace is missing, please report this as a bug at hello@toolisti.com

Q: Border radius is not applying to all elements

A: Verify:

  • Parameter is borderRadius=none, borderRadius=sm, borderRadius=md, or borderRadius=lg (case-sensitive)
  • Check browser DevTools for --embed-border-radius CSS variable
  • Border radius should apply to: cards, inputs, buttons, alerts
  • Some elements (like native color pickers) may not support custom border radius due to browser limitations

Q: Accent color doesn't seem to do anything

A: Accent color is used more subtly than primary color:

  • Accent color applies to: accent buttons, highlights, secondary interactive elements
  • Not all tools use accent color prominently
  • Try a contrasting color (e.g., red or purple) to see the difference more clearly
  • Primary color is used more extensively than accent color

Q: Multiple embeds on one page have different appearances

A: This is expected if they have different customization parameters:

  • Each iframe can have independent customization
  • Verify each iframe URL has the same parameters if you want consistent appearance
  • Use the same primaryColor, theme, size, and borderRadius for consistency
  • Example: All iframes use ?theme=dark&size=md&primaryColor=3b82f6

Q: Customization works in EmbedGenerator preview but not in my website

A: Check:

  • Verify you copied the full embed URL including all parameters
  • Check for typos in parameter names or values
  • Verify your website doesn't have CSS that overrides iframe styles
  • Check browser console for errors
  • Try opening the embed URL directly in a new tab to verify it works standalone

Example Implementations

Basic Embed

Simple iframe with default settings:

<iframe
  src="https://toolisti.com/embed/word-counter"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px;"
  title="Word Counter by Toolisti"
></iframe>

Custom Colors

Iframe with brand colors:

<iframe
  src="https://toolisti.com/embed/json-formatter?primaryColor=8b5cf6&accentColor=ec4899"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px;"
  title="JSON Formatter by Toolisti"
></iframe>

Dark Theme

Iframe with dark theme enabled:

<iframe
  src="https://toolisti.com/embed/color-picker?theme=dark"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #334155; border-radius: 8px;"
  title="Color Picker by Toolisti"
></iframe>

Large Size

Iframe with large size preset:

<iframe
  src="https://toolisti.com/embed/hash-generator?size=lg&borderRadius=lg"
  width="100%"
  height="700"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 12px;"
  title="Hash Generator by Toolisti"
></iframe>

Responsive Width with Fixed Height

Iframe that adapts to container width but maintains consistent height. Perfect for responsive layouts where you want consistent vertical space:

<iframe
  src="https://toolisti.com/embed/json-formatter?width=100%&height=700px"
  width="100%"
  height="700"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px;"
  title="JSON Formatter by Toolisti"
></iframe>

Custom Dimensions with Viewport Units

Iframe sized relative to the browser viewport. Great for full-screen or modal-style embeds that scale with viewport. Works well on mobile devices:

<iframe
  src="https://toolisti.com/embed/gradient-generator?width=80vw&height=60vh"
  style="width: 80vw; height: 60vh; border: 1px solid #e2e8f0; border-radius: 8px;"
  frameborder="0"
  title="Gradient Generator by Toolisti"
></iframe>

The URL parameters (width=80vw&height=60vh) control the tool container inside the iframe, while the iframe's CSS (style="width: 80vw; height: 60vh;") controls the frame itself.

Mobile Tip: Viewport units work well on mobile, but test to ensure the tool remains usable at smaller sizes.

Multiple Tools

HTML showing 2 tools with different dimensions on same page. Each embed can have independent sizing:

<!-- Temperature Converter - Standard responsive dimensions -->
<iframe
  src="https://toolisti.com/embed/temperature-converter?width=100%&height=600px"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 20px;"
  title="Temperature Converter by Toolisti"
></iframe>

<!-- Length Converter - Custom fixed dimensions -->
<iframe
  src="https://toolisti.com/embed/length-converter?width=800px&height=500px"
  width="800"
  height="500"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px;"
  title="Length Converter by Toolisti"
></iframe>

Real-World Use Cases

📝 Blog Post Integration

Embed a tool within blog content to provide interactive value to readers. Use responsive width and moderate height.

Recommended parameters: width=100%, height=600px, theme=light

<iframe
  src="https://toolisti.com/embed/word-counter?width=100%&height=600px&theme=light"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px;"
  title="Word Counter by Toolisti"
></iframe>

Tip: Place the tool near related content for maximum engagement and SEO benefits.

📊 Sidebar Widget

Embed a tool in a sidebar for persistent access. Use fixed narrow width and compact height.

Recommended parameters: width=400px, height=500px, size=sm

<iframe
  src="https://toolisti.com/embed/discount-calculator?width=400px&height=500px&size=sm"
  width="400"
  height="500"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px;"
  title="Discount Calculator by Toolisti"
></iframe>

Tip: Test on mobile to ensure the sidebar doesn't become too cramped.

🚀 Landing Page Hero

Make a tool the main page element for maximum impact. Use large size and prominent placement.

Recommended parameters: width=100%, height=800px, size=lg, borderRadius=lg

<iframe
  src="https://toolisti.com/embed/gradient-generator?width=100%&height=800px&size=lg&borderRadius=lg"
  width="100%"
  height="800"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 12px;"
  title="Gradient Generator by Toolisti"
></iframe>

Tip: Customize colors to match your brand for seamless integration.

📚 Documentation Site

Embed multiple tools in a docs layout with consistent sizing. Use light theme for readability.

Recommended parameters: width=100%, height=650px, theme=light, size=md

<iframe
  src="https://toolisti.com/embed/json-formatter?width=100%&height=650px&theme=light&size=md"
  width="100%"
  height="650"
  frameborder="0"
  style="border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 2rem;"
  title="JSON Formatter by Toolisti"
></iframe>

Tip: Add descriptive text above each tool explaining its purpose in your docs.

Frequently Asked Questions

Is embedding free?

Yes, completely free with no restrictions. Embed as many tools as you want on as many pages as you want.

Do I need an API key?

No, just use the iframe code. No registration, no API keys, no authentication required.

Can I use this on a commercial website?

Yes, absolutely. Use our tools on any website, commercial or personal, with no restrictions.

Will the tools always be available?

Yes, we maintain and host them. They'll always be available and up-to-date with the latest features and bug fixes.

Can I request new features?

Yes, contact us at hello@toolisti.com with your feature requests or suggestions.

What about mobile devices?

All tools are fully responsive and work great on mobile devices, tablets, and desktops.

Can I white-label the tools?

For white-label options (removing Toolisti branding), please contact us at hello@toolisti.com.

Do you track my users?

No. All tools work client-side in the browser, and we don't collect any user data from embedded tools.

Can I control the size of embedded tools?

Yes, using width and height URL parameters. You can use any CSS dimension value including px, %, rem, vw, and vh. The embed generator provides a visual preview of different sizes. See the Customization Options section for full parameter documentation.

What's the best size for embedded tools?

It depends on your use case. For general use, we recommend width=100% and height=600px (responsive and sufficient for most tools). For sidebars, try width=400px and height=500px. For full-width sections, use width=100% and height=700-800px. For modals/overlays, consider width=80vw and height=80vh. The embed generator lets you preview different sizes, and we recommend testing on mobile devices to ensure good UX.

Where can I find detailed documentation?

You're already here! This page contains comprehensive guides on customization options, URL parameters, SEO benefits, security best practices, troubleshooting, and real-world examples. Use the embed generator to create your embed code with visual previews.

Need Help?

If you have questions about embedding Toolisti tools or run into any issues, we're here to help!

Email: hello@toolisti.com

Embed Generator: Generate your embed code

Browse Tools: See all available tools

We'd love to hear how you're using Toolisti tools on your website. Feel free to reach out and share your implementation!

Ready to Embed?

Use our embed generator to create your custom embed code in seconds

Go to Embed Generator →