Skip to main content
The Email template creates QR codes that open the user’s default email client with pre-filled recipient, subject, and body text. This streamlines customer inquiries, feedback collection, and support requests by eliminating manual email composition.

​
How to create an email QR code

  1. Select the Email tab in the generator
  2. Enter the recipient email address (required)
  3. Add a subject line (optional but recommended)
  4. Add default body text (optional)
  5. Download and place on marketing materials, product packaging, or support documentation
When scanned, the QR code opens the device’s default email app (Gmail, Mail, Outlook, etc.) with all fields pre-populated. Users can edit the content before sending.

​
Email fields

​
emailData.to
string
required
The recipient email address. This is the “To” field in the email that will be pre-filled.
​
emailData.subject
string
The email subject line. Pre-filling this helps organize incoming emails and gives users context.
​
emailData.body
string
The initial message body text. Can include instructions, templates, or default information.

​
Mailto URL format

The generator uses the standard mailto: URL scheme that’s supported by all email clients: 
mailto:<recipient>?subject=<encoded-subject>&body=<encoded-body>

​
Format components

  • mailto: - URL scheme prefix
  • recipient - Email address (not URL encoded)
  • ? - Query string separator
  • subject= - Subject parameter (URL encoded)
  • body= - Body parameter (URL encoded)
  • & - Parameter separator

​
URL encoding

The subject and body parameters are automatically URL encoded to handle special characters:
  • Spaces become %20
  • Line breaks become %0A
  • Special characters are encoded (e.g., @ becomes %40)

​
Example formats

mailto:[email protected]?subject=Consulta%20de%20productos&body=Hola%2C%0A%0AMe%20gustaría%20más%20información%20sobre...
Decodes to:
  • To: [email protected]
  • Subject: Consulta de productos
  • Body: Hola,\n\nMe gustaría más información sobre…

​
Use cases for quick email composition

Customer support

Place on product packaging or user manuals so customers can quickly request help with pre-filled support request templates.

Feedback collection

Add to apps, websites, or physical products to gather customer feedback with structured email templates.

Event inquiries

Include on event flyers or posters for booking inquiries with pre-filled event details in the subject line.

Sales inquiries

Add to marketing materials, catalogs, or storefronts to generate qualified leads with context in the subject.

Job applications

Include in job postings so applicants can send resumes with the correct position in the subject line.

Newsletter signups

Alternative to web forms for users to request newsletter subscriptions via email.

​
Implementation example

Here’s how the Email template generates mailto QR codes: 
// Email data state with recipient, subject, and body
const [emailData, setEmailData] = useState({ 
  to: '', 
  subject: '', 
  body: '' 
});

// QR value generation using mailto: URL scheme
useEffect(() => {
  switch (activeTab) {
    case 'email':
      setQrValue(
        `mailto:${emailData.to}?subject=${encodeURIComponent(emailData.subject)}&body=${encodeURIComponent(emailData.body)}`
      );
      break;
    // ... other cases
  }
}, [activeTab, emailData]);
The implementation uses the encodeURIComponent() function to properly encode the subject and body parameters, ensuring special characters, spaces, and line breaks are handled correctly in the URL format.
The Email template is located at lines 158-169 in src/components/QRGenerator.jsx. The state is initialized at line 13 with all fields as empty strings. The mailto URL generation is at line 39.

​
Best practices

​
Subject line strategies

✓ "Product Inquiry - Model XYZ-123"
✓ "Event Registration - Summer Conference 2024"
✓ "Support Request - Order #45678"
Helps you categorize and filter incoming emails

​
Body text templates

Provide helpful structure without being too restrictive: 
✓ Good:
Name:
Company:
Question:

✓ Good:
Please describe your issue:

Order number (if applicable):

✓ Avoid:
[This is a very long pre-written message that users will have to delete...]
Keep body text minimal. Users should feel free to customize the message. Long pre-filled text may discourage sending.

​
Email address validation

Ensure the recipient email is valid: 
✓ Good: [email protected]
✓ Good: [email protected]
✓ Good: [email protected]

✗ Avoid: invalid@email (missing TLD)
✗ Avoid: user [email protected] (spaces)
✗ Avoid: @domain.com (missing local part)

​
Multiple recipients and CC/BCC

While the current implementation supports a single recipient, the mailto scheme also supports multiple recipients, CC, and BCC: 
mailto:[email protected],[email protected][email protected]&[email protected]&subject=Meeting

​
Format for multiple recipients

To add multiple recipient support, modify the state to accept arrays or comma-separated values and update the mailto URL construction accordingly.

​
Platform compatibility

The mailto URL scheme is supported on:
  • iOS: Opens default Mail app or configured email client
  • Android: Opens Gmail, Outlook, or default email app
  • Desktop: Opens default email client (Outlook, Mail, Thunderbird, etc.)
  • Web: May prompt user to select email client
Users who primarily use webmail (Gmail, Outlook.com) through browsers may need to configure their browser to handle mailto links, or they’ll be prompted to select an application.

​
Privacy considerations

Email visibility

The recipient email address is visible in the QR code when decoded. Avoid using personal email addresses for public QR codes.

Spam protection

Use dedicated contact emails (like support@, info@) rather than personal addresses to manage potential spam.

User control

Users can modify all fields before sending. Never collect sensitive information through pre-filled email QR codes.

Build docs developers (and LLMs) love

Get started for freeTalk to us