Free Invoice Widget

Add a functional invoice form to your website, blog, or client portal. Visitors can fill it out and generate a PDF invoice instantly. Perfect for:

• Freelancer portfolio sites
• Client portals
• Co-working space booking pages
• Service business websites
• Any site where clients might need invoices

📋 Live Demo

🔧 Embed Code

Copy and paste this HTML into your page:

<iframe
  src="https://anxovatomica.github.io/invoice-generator/?embed=1"
  width="100%"
  height="500"
  style="border:1px solid #ddd;border-radius:8px;"
  title="Invoice Generator"
></iframe>

Customization Options

Add these URL parameters to customize:

🎨 Styling

The iframe inherits your page's font if you set it. Or wrap it in a container:

<div style="max-width:800px;margin:0 auto;">
  <iframe
    src="https://anxovatomica.github.io/invoice-generator/?embed=1"
    width="100%"
    height="500"
    style="border:1px solid #ddd;border-radius:8px;"
  ></iframe>
</div>

⚡ Why Use This Widget?

• Free forever — No cost, no limits
• No backend needed — Everything happens in the user's browser
• Mobile responsive — Works on all devices
• PDF export — Users download professional PDFs
• No signup — Your visitors don't need accounts
• Fast loading — Pure HTML/CSS/JS, no frameworks

🌐 Supported Platforms

Works on any platform that supports iframes:

• WordPress (Classic + Gutenberg)
• Webflow
• Wix
• Squarespace
• Ghost
• Medium (limited)
• Notion (embed block)
• Any custom HTML/CSS site

📄 WordPress Shortcode

For WordPress users, add this to your theme's functions.php:

function pingpaid_invoice_widget($atts) {
    $atts = shortcode_atts(array(
        'height' => '500',
        'theme' => 'light'
    ), $atts);
    
    return '<iframe src="https://anxovatomica.github.io/invoice-generator/?embed=1&theme=' . esc_attr($atts['theme']) . '" width="100%" height="' . esc_attr($atts['height']) . '" style="border:1px solid #ddd;border-radius:8px;"></iframe>';
}
add_shortcode('pingpaid_invoice', 'pingpaid_invoice_widget');

Then use: [pingpaid_invoice height="600" theme="dark"]

🚀 Get Started

1. Copy the embed code above

2. Paste it into your website

3. Adjust height and styling as needed

4. Done!

Built by a freelancer who believes tools should be free. Open source on GitHub.