Розробка користувацького коду Squarespace (Code Injection)
Code Injection — єдиний спосіб додати довільну логіку на сайт Squarespace. Це не повний доступ до сервера або шаблонів, але достатній інструментарій для більшості завдань: аналітика, користувацькі віджети, зміна поведінки DOM, інтеграції з зовнішніми API.
Точки внедрення коду
Squarespace надає чотири місця для інжекції:
1. Global Header — Settings → Advanced → Code Injection → Header
Вставляється в <head> кожної сторінки. Підходить для: мета-тегів, підключення шрифтів та стилів, синхронних скриптів аналітики.
2. Global Footer — Settings → Advanced → Code Injection → Footer
Вставляється перед </body>. Підходить для: GTM, chat-віджетів, асинхронних скриптів.
3. Page-level Header — Page Settings → Advanced → Page Header Code Injection Тільки для конкретної сторінки. Зручно для унікальних schema.org-розміток, page-specific стилів.
4. Lock Page / Order Confirmation — спеціалізовані інжекції для захищених сторінок та сторінки успішного замовлення.
Практичні паттерни
Lazy-ініціалізація стороннього віджета:
<script>
(function() {
function loadWidget() {
var script = document.createElement('script');
script.src = 'https://widget.example.com/loader.js';
script.setAttribute('data-key', 'YOUR_KEY');
document.body.appendChild(script);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadWidget);
} else {
loadWidget();
}
})();
</script>
Перехопити форму Squarespace та відправити дані в сторонній API:
document.addEventListener('submit', function(e) {
var form = e.target.closest('form[data-form-id]');
if (!form) return;
var formId = form.getAttribute('data-form-id');
if (formId !== 'YOUR_FORM_BLOCK_ID') return;
// Squarespace обробить форму сам, але ми додатково шлемо у CRM
var data = new FormData(form);
fetch('https://api.yourcrm.com/leads', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(Object.fromEntries(data))
});
});
Динамічна заміна контенту за UTM-параметрами:
(function() {
var params = new URLSearchParams(window.location.search);
var source = params.get('utm_source');
var heroMap = {
'google': 'Знайшли нас в Google? Скидка 10% на перший заказ',
'instagram': 'Раді бачити підписчиків Instagram!',
};
window.addEventListener('DOMContentLoaded', function() {
if (source && heroMap[source]) {
var headlines = document.querySelectorAll('.sqsrte-large');
if (headlines.length) {
headlines[0].textContent = heroMap[source];
}
}
});
})();
Робота з Squarespace JavaScript API
Squarespace надає вбудований об'єкт Static та события жизненного цикла сторінки. У режимі AJAX-навігації (якщо увімкнена) сторінки змінюються без перезагрузки:
// Squarespace AJAX navigation hook
window.addEventListener('squarespace:after-page-render', function() {
// Реініціалізація віджетів після навігації
reinitCustomComponents();
});
// Аналог DOMContentLoaded для AJAX-сторінок
window.addEventListener('squarespace:after-body-render', function(e) {
console.log('Page rendered:', e.detail);
});
Користувацький калькулятор у Code Block
Squarespace Code Block дозволяє вставити довільний HTML прямо на сторінку. Приклад простого калькулятора:
<div id="calc-widget" style="max-width:480px; padding:24px; background:#f8f8f8; border-radius:8px;">
<label style="display:block; margin-bottom:8px; font-size:14px;">Площа (м²)</label>
<input id="area" type="number" min="1" style="width:100%; padding:8px; font-size:16px; border:1px solid #ddd;">
<button onclick="calcPrice()" style="margin-top:12px; padding:10px 24px; background:#000; color:#fff; border:none; cursor:pointer;">
Розрахувати
</button>
<div id="result" style="margin-top:16px; font-size:18px; font-weight:600;"></div>
</div>
<script>
function calcPrice() {
var area = parseFloat(document.getElementById('area').value);
if (!area || area <= 0) return;
var price = area * 1200; // грн за м²
document.getElementById('result').textContent =
'Вартість: ' + price.toLocaleString('uk-UA') + ' грн';
}
</script>
Cookie Consent та GDPR
Squarespace має вбудований Cookie Banner (Business план+), але він не відповідає строгим вимогам GDPR (немає Reject All). Альтернатива — Cookiebot або CookieYes через Code Injection:
<!-- Cookiebot -->
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js"
data-cbid="YOUR-CBID" data-blockingmode="auto" type="text/javascript"></script>
Після підключення Cookiebot автоматично блокує третьосторонні скрипти до отримання згоди.
Обмеження та обходи
Squarespace забороняє document.write() та деякі synchronous XHR-паттерни. ES-модулі (type="module") працюють, але потрібно врахувати порядок завантаження. jQuery включений у Squarespace глобально — не потрібно підключати окремо:
// jQuery доступний як Y.use('node', ...) або через $
$(document).ready(function() {
// Ваш код
});
Терміни
Підключення аналітики та GTM — кілька годин. Користувацький віджет або калькулятор — 1–2 дні. Складна інтеграція з CRM/API з перехопленням форм та умовною логікою — 3–5 днів.