Content page
Widget Documentation - Get a free temporary email address with TMPMailer. No registration needed. Stay anonymous & protect your privacy online.
📧 Widget Documentation
Embed Get a free temporary email address with TMPMailer. No registration needed. Stay anonymous & protect your privacy online. temporary email service on your website in seconds. Free, easy to integrate, and fully customizable with mandatory backlinks.
1 Quick Start
Copy and paste this code snippet into your HTML where you want the widget to appear:
<!-- TMPMailer Widget - Temporary Email Service --> <div id="tmpmailer-widget" data-theme="light" data-width="100%" data-height="600px"></div> <script src="https://tmpmailer.com/js/widget-embed.min.js"></script>
2 Customization
Tailor the widget to your site: colors, size, theme, and backlink text are configurable via data attributes or JavaScript for a seamless brand fit.
Brand Consistency
Keep a cohesive visual identity by adjusting the widget's theme and color accents to match your site. Choose light or dark themes, set CSS variables for accent colors, and change the backlink text to a friendly, on-brand phrase while keeping mandatory visibility. Small visual changes make the widget feel like a native part of your product while retaining the service's required credit link.
Layout Control
Control width and height using the `data-width` and `data-height` attributes, or let the widget fill its container. Set fixed sizes for sidebars or responsive percentages for content areas. You can also embed the widget in a modal or a dedicated section—its flexible sizing helps ensure it behaves predictably across different layouts and devices.
Accessibility & Responsiveness
Design with users in mind: the widget supports keyboard navigation and screen readers when used with semantic containers, and it adapts to small viewports automatically. Use accessible contrast colors, test focus states, and verify the link text for screen readers. A responsive, accessible widget improves usability and broad audience reach.
Performance & Fallbacks
Keep the embed lightweight by using the minified script and lazy-loading the iframe when it enters the viewport. Provide a graceful fallback (a link to the inbox page) for environments that disable iframes/JS. These techniques maintain fast load times and ensure users can still access the service even in restricted contexts.
How to customize (7 steps)
- Insert the basic embed snippet where you want the widget to appear.
- Set `data-theme` to `light` or `dark` for built-in palettes.
- Adjust `data-width` and `data-height` (e.g., `320px`, `100%`, `480px`).
- Customize backlink text using `data-backlink-text` but keep the link visible as required.
- For advanced tweaks, add CSS variables to your page to override accent colors.
- Optionally, initialize or update settings via a small JS API after the script loads.
- Test on desktop and mobile and verify accessibility (keyboard and screen reader checks).
- Enable lazy-load by deferring insertion until the widget is in view for better performance.
<div id="tmpmailer-widget" data-theme="dark" data-width="320px" data-height="480px" data-backlink-text="Powered by Get a free temporary email address with TMPMailer. No registration needed. Stay anonymous & protect your privacy online."></div> <script src="https://tmpmailer.com/js/widget-embed.min.js"></script>
If you need help with specific styling or advanced initialization, reach out via our support page or check the examples below for common scenarios.
3 Live Demo
Interact with a live preview of the widget below. Use the controls to switch theme or change size, then copy the updated embed code.
<div id="tmpmailer-widget" data-theme="light" data-width="100%" data-height="600px"></div> <script src="https://tmpmailer.com/js/widget-embed.min.js"></script>
Note: The widget includes mandatory backlinks which must remain visible as part of the free service.