CalculatorTool Guide

Embed UAE Gratuity Calculator on Your Website

Add our official MOHRE 2025-compliant gratuity calculator widget to your website. Easy to embed, lightweight, and mobile-friendly.

5 min read

Reviewed by MOHRE-certified HR specialists. Accurate as of UAE Labour Law 2025 (Federal Decree-Law No. 33/2021).

Embed UAE Gratuity Calculator on Your Website

TL;DR: Add a MOHRE 2025-compliant gratuity calculator to your website using a simple iframe embed code. No technical expertise required—copy the code, paste into your HTML, and provide instant calculations to your audience. Works on WordPress, Wix, Webflow, Shopify, and custom sites.

Want to provide your audience with instant gratuity calculations? Embed our calculator directly on your site with a simple iframe or integration code. No technical expertise needed—we handle the complex calculations.

Quick Integration

Option 1: Simple iFrame Embed (Easiest)

Copy and paste this code into your website's HTML:

<iframe 
  src="https://gratuitycalculator-uae.ae/calculator"
  width="100%"
  height="600"
  frameborder="0"
  title="UAE Gratuity Calculator"
  style="border: 1px solid #e5e7eb; border-radius: 8px;">
</iframe>

Result: Fully functional calculator embedded in your page.

Option 2: Responsive iFrame (Mobile-Friendly)

<div style="position: relative; padding-bottom: 100%; height: 0; overflow: hidden;">
  <iframe 
    src="https://gratuitycalculator-uae.ae/calculator"
    frameborder="0"
    title="UAE Gratuity Calculator"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  </iframe>
</div>

Result: Calculator scales to any screen size.

Option 3: Button Link (Lightweight)

<a href="https://gratuitycalculator-uae.ae/calculator" 
   target="_blank" 
   class="btn btn-primary">
  Calculate Your Gratuity
</a>

Result: Link opens calculator in new tab.

Integration for Different Platforms

WordPress

  1. Go to Pages Create/Edit page
  2. Add an HTML block (or Custom HTML)
  3. Paste the iFrame code above
  4. Publish

Wix

  1. Go to Edit
  2. Click + to add element
  3. Select Embed Code or Custom HTML
  4. Paste the iFrame code
  5. Save

Webflow

  1. Go to Designer
  2. Add Embed element
  3. Paste the iFrame code
  4. Publish

Shopify

  1. Go to Online Store Pages
  2. Click Add page
  3. In editor, click <> (HTML)
  4. Paste the iFrame code
  5. Save

Custom HTML/CSS

<!DOCTYPE html>
<html>
<head>
  <title>Gratuity Calculator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Calculate Your UAE Gratuity</h1>
  <iframe 
    src="https://gratuitycalculator-uae.ae/calculator"
    width="100%"
    height="600"
    frameborder="0"
    title="UAE Gratuity Calculator">
  </iframe>
</body>
</html>

Customization Options

Styling the iFrame

Add border and shadow:

<iframe 
  src="https://gratuitycalculator-uae.ae/calculator"
  width="100%"
  height="600"
  frameborder="0"
  title="UAE Gratuity Calculator"
  style="border: 2px solid #1a7d4d; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
</iframe>

Match your site's colors:

<div style="background-color: #f3f4f6; padding: 20px; border-radius: 8px;">
  <h2 style="color: #1a7d4d;">Gratuity Calculator</h2>
  <iframe 
    src="https://gratuitycalculator-uae.ae/calculator"
    width="100%"
    height="600"
    frameborder="0"
    title="UAE Gratuity Calculator"
    style="border: none; border-radius: 8px;">
  </iframe>
</div>

Responsive Container

<div class="calculator-container" style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <iframe 
    src="https://gratuitycalculator-uae.ae/calculator"
    width="100%"
    height="600"
    frameborder="0"
    title="UAE Gratuity Calculator"
    style="border: 1px solid #ccc; border-radius: 8px;">
  </iframe>
</div>

Best Practices

Placement Tips

Good locations:

  • Resources/Tools page
  • HR/Employment section
  • Blog post about gratuity
  • Sidebar widget
  • Calculator hub page

Poor locations:

  • Footer (too small)
  • Auto-playing on homepage (disruptive)
  • Hidden behind login (reduces usage)

Performance

  1. Lazy load the iFrame for faster page load:
<iframe 
  src="https://gratuitycalculator-uae.ae/calculator"
  width="100%"
  height="600"
  frameborder="0"
  title="UAE Gratuity Calculator"
  loading="lazy">
</iframe>
  1. Set explicit height to prevent layout shifts:
<iframe 
  src="https://gratuitycalculator-uae.ae/calculator"
  width="100%"
  height="600" <!-- Explicit height prevents jumping -->
  frameborder="0"
  title="UAE Gratuity Calculator">
</iframe>

Accessibility

Always include:

  • title attribute (screen readers)
  • loading="lazy" (performance)
  • Clear context/labels around the iframe

Advanced Integration

React Component

export function GratuityCalculator() {
  return (
    <iframe
      src="https://gratuitycalculator-uae.ae/calculator"
      width="100%"
      height={600}
      frameBorder="0"
      title="UAE Gratuity Calculator"
      style={{
        border: '1px solid #e5e7eb',
        borderRadius: '8px',
      }}
    />
  );
}

Vue Component

<template>
  <div class="calculator-wrapper">
    <iframe
      src="https://gratuitycalculator-uae.ae/calculator"
      width="100%"
      height="600"
      frameborder="0"
      title="UAE Gratuity Calculator"
      style="border: 1px solid #e5e7eb; border-radius: 8px;">
    </iframe>
  </div>
</template>

Next.js Integration

'use client';

export default function GratuityCalculatorPage() {
  return (
    <div className="max-w-4xl mx-auto">
      <h1>Calculate Your Gratuity</h1>
      <iframe
        src="https://gratuitycalculator-uae.ae/calculator"
        width="100%"
        height={600}
        frameBorder="0"
        title="UAE Gratuity Calculator"
        className="border border-gray-300 rounded-lg"
      />
    </div>
  );
}

FAQ: Embedding

Q: Does embedding affect page performance? A: Minimal impact. Calculator loads on-demand and uses lazy loading.

Q: Can I customize colors? A: The calculator uses our default theme. You can wrap it in a styled container.

Q: Is it mobile-friendly? A: Yes. Use the responsive iFrame code (Option 2).

Q: Do I need a license? A: No. Free to embed on your site.

Q: Can I modify the calculator? A: No, but contact us if you need custom features.

Q: What about data privacy? A: Calculations happen client-side (on user's device). We don't store data.

Q: Does it work offline? A: No. Requires internet connection for initial load.

Q: Can I remove the GratuityCalculator branding? A: Embedded calculator includes our branding. Contact us for white-label options.

Troubleshooting

iFrame Not Displaying

Problem: Blank space where calculator should be

Solutions:

  1. Check src URL is correct
  2. Verify your site allows iFrames (check security policy)
  3. Test in a different browser
  4. Contact support

iFrame Too Small/Large

Problem: Calculator is cut off or has excess space

Solutions:

  1. Adjust height value in code
  2. Use responsive iFrame (Option 2)
  3. Test on mobile and desktop

Slow Loading

Problem: Calculator takes long to appear

Solutions:

  1. Add loading="lazy"
  2. Check your internet speed
  3. Try again later (may be temporary)

Need Help?

  • Technical support: Contact our team
  • Integration questions: Email dev@gratuitycalculator-uae.ae
  • Feature requests: Let us know what you need

License & Terms

By embedding our calculator, you agree to:

  • Credit link to gratuitycalculator-uae.ae
  • Use for legitimate purposes
  • Don't modify or reverse-engineer
  • Don't sell access to the calculator

For an instant end-of-service estimate, use our online gratuity calculator UAE.

Get Started with Embedding

Copy the embed code above and add the calculator to your site in minutes.

Related Resources

Last Updated: November 2025

Gratuity Calculator UAE Editorial Team - Content Research & Verification

Gratuity Calculator UAE Editorial Team

Verified Expert

Content Research & Verification

MOHRE-Verified Content Specialists

Dedicated team of HR professionals, legal advisors, and content specialists committed to providing accurate, up-to-date information on UAE labour law and gratuity entitlements.

Verified Content

Published: 10 October 2023

Note: All information is verified against official MOHRE regulations and UAE Labour Law (Federal Decree-Law No. 33/2021). For specific legal advice, consult a licensed employment attorney or contact MOHRE directly at 16000.

Explore More UAE Labour Law Guides

Discover comprehensive resources on gratuity eligibility, calculation methods, employee rights, and MOHRE regulations.

View All Guides
How to Calculate GratuityGratuity Eligibility RulesFile a Gratuity Dispute

Last updated:

TOOLS