🌐 Vanilla JS / HTML
Integrate Sypnia with any website using simple script tags.
Works with any website: WordPress, PHP, static HTML, Webflow, Squarespace, etc.
🚀 Quick Setup
Add these script tags before the closing </body> tag:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<!-- Your content here -->
<!-- Sypnia Analytics SDK -->
<script src="https://sypnia.com/api/sdk/YOUR_PROJECT_KEY"></script>
<!-- Sypnia Survey Widget (optional) -->
<script src="https://sypnia.com/api/survey/YOUR_PROJECT_KEY"></script>
</body>
</html>Replace
YOUR_PROJECT_KEY with your actual project key from the dashboard settings.📝 Track Custom Events
Track events with inline JavaScript or in your scripts:
<!-- Inline event tracking -->
<button onclick="Sypnia.track('signup_clicked', { location: 'hero' })">
Sign Up
</button>
<!-- Or in a script -->
<script>
document.getElementById('purchase-btn').addEventListener('click', function() {
Sypnia.track('purchase_started', {
product_id: 'prod_123',
price: 29.99
});
});
</script>👤 Identify Users
Identify logged-in users:
<script>
// After login or when user data is available
Sypnia.identify('user_123', {
email: 'john@example.com',
name: 'John Doe',
plan: 'pro'
});
</script>🔒 Check SDK Ready
If you need to ensure the SDK is loaded before calling methods:
<script>
// Option 1: Check if exists
if (window.Sypnia) {
Sypnia.track('page_loaded');
}
// Option 2: Safe call with optional chaining
window.Sypnia?.track('page_loaded');
// Option 3: Wait for load
function onSypniaReady(callback) {
if (window.Sypnia) {
callback();
} else {
setTimeout(() => onSypniaReady(callback), 100);
}
}
onSypniaReady(function() {
Sypnia.track('sdk_ready');
});
</script>📊 Available Methods
Sypnia.track(event, properties)
Track a custom event with optional properties.
Sypnia.track('purchase', { product: 'Pro Plan', value: 99 });Sypnia.identify(userId, traits)
Associate the visitor with a user ID.
Sypnia.identify('user_123', { email: 'john@example.com' });Sypnia.page()
Manually trigger a pageview (for SPAs).
Sypnia.page();Sypnia.feedback(score, message)
Submit feedback or NPS score.
Sypnia.feedback(9, 'Love this product!');🌍 WordPress
Add the scripts in your theme's footer.php or use a plugin like "Insert Headers and Footers":
<!-- Add before </body> in footer.php -->
<script src="https://sypnia.com/api/sdk/YOUR_PROJECT_KEY"></script>
<script src="https://sypnia.com/api/survey/YOUR_PROJECT_KEY"></script>🎨 Webflow / Squarespace
Go to your site settings → Custom Code → Footer Code:
<script src="https://sypnia.com/api/sdk/YOUR_PROJECT_KEY"></script>
<script src="https://sypnia.com/api/survey/YOUR_PROJECT_KEY"></script>