Files
bentopdf/src/pages/add-stamps.html
T
2026-09-04 16:26:08 +05:30

499 lines
18 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<meta
name="title"
content="Add Stamps Online Free - Add Stamps Tool | BentoPDF"
/>
<meta
name="description"
content="Add image stamps to your PDF using the annotation toolbar. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta name="keywords" content="add stamps, online pdf" />
<meta name="author" content="BentoPDF" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/add-stamps" />
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.bentopdf.com/add-stamps" />
<meta
property="og:title"
content="Add Stamps Online Free - Add Stamps Tool | BentoPDF"
/>
<meta
property="og:description"
content="Add image stamps to your PDF using the annotation toolbar. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
property="og:image"
content="https://www.bentopdf.com/images/og-add-stamps.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="BentoPDF" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://www.bentopdf.com/add-stamps" />
<meta name="twitter:title" content="Add Stamps Free" />
<meta
name="twitter:description"
content="Add image stamps to your PDF using the annotation toolbar. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="twitter:image"
content="https://www.bentopdf.com/images/twitter-add-stamps.png"
/>
<meta name="twitter:site" content="@BentoPDF" />
<!-- Mobile Web App -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Add Stamps" />
<title>Add Stamps - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/images/favicon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/images/favicon-512x512.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/apple-touch-icon.png"
/>
<link rel="icon" href="/favicon.ico" sizes="32x32" />
</head>
<body class="antialiased bg-gray-900">
{{> navbar }}
<div
id="uploader"
class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
>
<div
id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
>
<button
id="back-to-tools"
class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
>
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools">
Back to Tools
</span>
</button>
<h1
class="text-2xl font-bold text-white mb-2"
data-i18n="tools:addStamps.name"
>
Add Stamps
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addStamps.subtitle">
Add image stamps to your PDF using the annotation toolbar.
</p>
<div class="mb-4">
<label
for="stamp-username"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:addStamps.usernameLabel"
>Stamp Username</label
>
<input
type="text"
id="stamp-username"
class="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="Enter your name (for stamps)"
data-i18n-placeholder="tools:addStamps.usernamePlaceholder"
/>
<p
class="text-xs text-gray-500 mt-1"
data-i18n="tools:addStamps.usernameHint"
>
This name will appear on stamps you create.
</p>
</div>
<div
id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i class="ph ph-upload-simple text-4xl mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400">
<span class="font-semibold" data-i18n="upload.clickToSelect"
>Click to select a file</span
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500" data-i18n="upload.hints.pdfFile">
PDF file
</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
Your files never leave your device.
</p>
</div>
<input
type="file"
id="pdfFile"
accept="application/pdf"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
/>
</div>
<div id="fileList" class="mt-4 hidden text-sm text-gray-200"></div>
<!-- Viewer, shown after a PDF is uploaded -->
<div
id="viewer-card"
class="hidden mt-6 border border-gray-700 rounded-lg overflow-hidden"
>
<div
class="px-4 py-3 border-b border-gray-700 flex items-center justify-between"
>
<h2 class="text-lg font-semibold text-white">Stamp Editor</h2>
<p class="text-xs text-gray-400">
Use the toolbar's image stamp tool to place stamps.
</p>
</div>
<div
id="stamp-viewer-container"
class="min-h-[500px] bg-black/70 flex items-stretch justify-stretch"
>
<!-- iframe injected by add-stamps.ts -->
</div>
</div>
<button
id="save-stamped-btn"
class="hidden btn-gradient w-full mt-6 flex items-center justify-center gap-2"
>
<span data-i18n="tools:addStamps.saveButton">Save Stamped PDF</span>
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
data-i18n="howItWorks.title"
>
How It Works
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400" data-i18n="howItWorks.step1">
Click or drag and drop your file to begin
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400" data-i18n="howItWorks.step2">
Click the process button to start
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400" data-i18n="howItWorks.step3">
Save your processed file instantly
</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="relatedTools.title"
>
Related PDF Tools
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a
href="merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Merge PDF</h3>
<p class="text-gray-400 text-sm">Free online merge PDF tool</p>
</a>
<a
href="compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Compress PDF</h3>
<p class="text-gray-400 text-sm">Free online compress PDF tool</p>
</a>
<a
href="split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Split PDF</h3>
<p class="text-gray-400 text-sm">Free online split PDF tool</p>
</a>
<a
href="edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Edit PDF</h3>
<p class="text-gray-400 text-sm">Free online edit PDF tool</p>
</a>
<a
href="rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Rotate PDF</h3>
<p class="text-gray-400 text-sm">Free online rotate PDF tool</p>
</a>
</div>
</section>
<!-- FAQ Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
What kind of stamps can I add with this tool?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
This tool places image stamps, so you pick an image file such as a
PNG or JPG (a company seal, an APPROVED graphic, a scanned notary
stamp) and drop it onto the page. For text-only marks like a
diagonal DRAFT label,
<a
href="/add-watermark"
class="text-indigo-300 hover:text-indigo-400"
>Add Watermark</a
>
is the better fit.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What does the Stamp Username field do?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The name you enter is recorded on each stamp you create as its
author, so reviewers can see who placed it. Set it before you upload
the PDF. It's optional, and leaving it blank creates stamps without
a name attached.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I put the same stamp on every page at once?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Stamps are placed one at a time on the page you're viewing, and
you can move and resize each one before saving. If you need an
identical mark on all pages, use the image mode in
<a
href="/add-watermark"
class="text-indigo-300 hover:text-indigo-400"
>Add Watermark</a
>, which can apply one image to every page in a single step.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are the stamps permanent, or can they be removed later?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Stamps are saved as PDF stamp annotations, so a PDF editor can still
select, move, or delete them. If you want them merged into the page
content so they can't be lifted off, run the saved file through
<a href="/flatten-pdf" class="text-indigo-300 hover:text-indigo-400"
>Flatten PDF</a
>.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I move or resize a stamp after placing it?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Click the stamp in the viewer to select it, then drag it to a new
position or pull its corner handles to change the size. Nothing is
final until you click Save Stamped PDF, so you can adjust as much as
you like first.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What's the difference between this and Sign PDF?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
<a href="/sign-pdf" class="text-indigo-300 hover:text-indigo-400"
>Sign PDF</a
>
is built for signatures: you draw one, type one, or upload one and
place it on the page. Add Stamps is for reusable image marks such as
seals, RECEIVED stamps, or QC stamps, with your name recorded as the
author of each one.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does the stamp tool work on password-protected PDFs?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
If the file needs a password to open, the tool asks for it before
loading the viewer. You need the open password; the tool doesn't
bypass encryption.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Is my document uploaded when I stamp it?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. The viewer, the stamp editor, and the export all run in your
browser, and the stamped PDF is written on your device. Nothing is
sent to a server, which matters when you're stamping contracts,
inspection reports, or notarized documents.
</p>
</details>
</div>
</section>
{{> footer }}
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/js/logic/add-stamps.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Add Stamps - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to add stamps online",
"description": "Learn how to add stamps using BentoPDF",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Upload File",
"text": "Click or drag and drop your file"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Process",
"text": "Click the process button"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Download",
"text": "Download your processed file"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "Add Stamps",
"item": "https://www.bentopdf.com/add-stamps"
}
]
}
</script>
</body>
</html>