AJAX / fetch form
JavaScript submit without a full page reload.
Keys required. Create a site in the dashboard and copy your site key (HTML) and secret key (server). Replace
sq_live_your_key in the snippets below.
How this integration works
Same three steps as every other platform — only the paste location and server hook change.
| Step | What you do for AJAX / fetch form |
|---|---|
| 1 | Prevent default submit, call widget.execute() to get a token. |
| 2 | Send the token in your fetch/axios JSON body as squeaker-token. |
| 3 | Verify on the server before processing. |
Recommended settings
| Setting | Value |
|---|---|
| Widget mode | Auto (recommended) — Runs on form submit — best for most forms |
| Form ID | #contact-form |
| Server verify | Node.js, PHP, Python |
Important notes
- auto mode still works for native submit; use execute() for custom JS submit.
Copy-paste snippet
Paste into your AJAX / fetch form form or template. Load squeaker.js once per page.
<squeaker-widget
data-sitekey="sq_live_your_key"
data-api="https://api.squeaker.cc/v1"
data-mode="auto"
data-theme="light"
data-form="#contact-form"
></squeaker-widget>
<script src="https://cdn.squeaker.cc/squeaker.js" async defer></script>
<script>
const widget = document.querySelector('squeaker-widget');
document.getElementById('contact-form').addEventListener('submit', async (e) => {
e.preventDefault();
const token = await widget.execute();
await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: '...', 'squeaker-token': token }),
});
});
</script> Server verification
Read squeaker-token from the request and POST to /v1/verify with your secret key.
Full reference: Server verify docs.
// In your form handler — no npm package required
const apiUrl = process.env.SQUEAKER_API_URL ?? 'https://api.squeaker.cc/v1';
const token = req.body['squeaker-token'];
if (!token) return res.status(400).json({ error: 'Missing token' });
const verifyRes = await fetch(`${apiUrl}/verify`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
secret: process.env.SQUEAKER_SECRET,
token,
remoteip: req.ip,
}),
});
const result = await verifyRes.json();
if (!result.success) {
return res.status(403).json({ error: result.error ?? 'Invalid token' });
}
// Token valid — process the form Open setup generator with AJAX / fetch form pre-selected · Browse all platforms