How do I embed PixCloak tools in my website?

Copy the iframe code from our embed page and paste it into your HTML. No API keys or registration required. The widget will work immediately.

Is there a cost to embed PixCloak widgets?

No, embedding PixCloak widgets is completely free. There are no usage limits or hidden costs.

Do embedded widgets work on mobile devices?

Yes, all PixCloak widgets are fully responsive and work on mobile, tablet, and desktop devices.

Can I customize the appearance of embedded widgets?

Yes, you can customize the iframe styling with CSS, including border radius, shadows, and hover effects.

Do embedded widgets require JavaScript?

The basic iframe embed works without JavaScript. The JavaScript version provides better integration and customization options.

Embed PixCloak Tools

Add our image compression tools directly to your website, blog, or documentation. All processing happens locally in the user's browser - no uploads, no API keys required.

Available Widgets

Basic Compressor

Simple image compression with quality slider Process images offline in your browser. 100% free, no uploads, privacy guaranteed.

Preview:

Widget Preview - Basic Compressor

Actual widget will be interactive

HTML iframe Code:

<iframe src="https://pixcloak.com/embed/compress" width="100%" height="600" frameborder="0" style="border-radius: 8px;"></iframe>

JavaScript Embed Code:

<!-- PixCloak Image Compressor Widget -->
<div id="pixcloak-compress-widget"></div>
<script>
  (function() {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://pixcloak.com/embed/compress';
    iframe.width = '100%';
    iframe.height = '600';
    iframe.frameBorder = '0';
    iframe.style.borderRadius = '8px';
    document.getElementById('pixcloak-compress-widget').appendChild(iframe);
  })();
</script>

LinkedIn Profile Preset

Pre-configured for LinkedIn profile pictures (400x400px, 200KB) Process images offline in your browser. 100% free, no uploads, privacy guaranteed.

Preview:

Widget Preview - LinkedIn Profile Preset

Actual widget will be interactive

HTML iframe Code:

<iframe src="https://pixcloak.com/embed/compress?preset=linkedin" width="100%" height="500" frameborder="0" style="border-radius: 8px;"></iframe>

JavaScript Embed Code:

<!-- PixCloak LinkedIn Profile Compressor -->
<div id="pixcloak-linkedin-widget"></div>
<script>
  (function() {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://pixcloak.com/embed/compress?preset=linkedin';
    iframe.width = '100%';
    iframe.height = '500';
    iframe.frameBorder = '0';
    iframe.style.borderRadius = '8px';
    document.getElementById('pixcloak-linkedin-widget').appendChild(iframe);
  })();
</script>

Instagram Post Preset

Pre-configured for Instagram posts (1080x1080px, 500KB) Process images offline in your browser. 100% free, no uploads, privacy guaranteed.

Preview:

Widget Preview - Instagram Post Preset

Actual widget will be interactive

HTML iframe Code:

<iframe src="https://pixcloak.com/embed/compress?preset=instagram" width="100%" height="500" frameborder="0" style="border-radius: 8px;"></iframe>

JavaScript Embed Code:

<!-- PixCloak Instagram Post Compressor -->
<div id="pixcloak-instagram-widget"></div>
<script>
  (function() {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://pixcloak.com/embed/compress?preset=instagram';
    iframe.width = '100%';
    iframe.height = '500';
    iframe.frameBorder = '0';
    iframe.style.borderRadius = '8px';
    document.getElementById('pixcloak-instagram-widget').appendChild(iframe);
  })();
</script>

Custom Preset Generator

Generate your own preset with custom parameters Process images offline in your browser. 100% free, no uploads, privacy guaranteed.

Preview:

Widget Preview - Custom Preset Generator

Actual widget will be interactive

HTML iframe Code:

<iframe src="https://pixcloak.com/embed/compress?kb=300&size=800x600&format=webp" width="100%" height="500" frameborder="0" style="border-radius: 8px;"></iframe>

JavaScript Embed Code:

<!-- PixCloak Custom Preset Compressor -->
<div id="pixcloak-custom-widget"></div>
<script>
  (function() {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://pixcloak.com/embed/compress?kb=300&size=800x600&format=webp';
    iframe.width = '100%';
    iframe.height = '500';
    iframe.frameBorder = '0';
    iframe.style.borderRadius = '8px';
    document.getElementById('pixcloak-custom-widget').appendChild(iframe);
  })();
</script>

Customization Options

URL Parameters

Customize the widget behavior using URL parameters:

kb=200 - Set target file size in KB
size=800x600 - Set target dimensions
format=webp - Set output format (jpg, png, webp)
preset=linkedin - Use predefined preset
theme=dark - Dark theme (coming soon)

Styling Options

Customize the appearance with CSS:

/* Custom styling for embedded widget */
iframe[src*="pixcloak.com/embed"] {
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.3s ease !important;
}

iframe[src*="pixcloak.com/embed"]:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

Integration Examples

WordPress

Add to your WordPress posts or pages using HTML blocks:

<!-- In WordPress HTML block -->
<iframe src="https://pixcloak.com/embed/compress?preset=instagram" 
        width="100%" height="500" frameborder="0" 
        style="border-radius: 8px;"></iframe>

React/Next.js

Use as a React component:

import React from 'react';

const PixCloakWidget = ({ preset = 'basic' }) => {
  return (
    <iframe 
      src={`https://pixcloak.com/embed/compress?preset=${preset}`}
      width="100%" 
      height="500" 
      frameBorder="0"
      style={{ borderRadius: '8px' }}
    />
  );
};

export default PixCloakWidget;

Documentation Sites

Perfect for documentation sites like GitBook, Notion, or custom docs:

<!-- In documentation -->
<div class="tool-widget">
  <h4>Compress Images for Your Blog</h4>
  <iframe src="https://pixcloak.com/embed/compress?kb=300&format=webp" 
          width="100%" height="400" frameborder="0"></iframe>
</div>

Benefits of Embedding

🚀 No API Keys

Embed directly without registration or API keys. Just copy and paste the code.

🔒 Privacy First

All processing happens locally in the user's browser. No uploads, no data collection.

📱 Responsive

Widgets automatically adapt to different screen sizes and devices.

⚡ Fast Loading

Lightweight widgets load quickly and don't slow down your website.