Разработка кастомного кода (Code Injection) Squarespace
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('ru-RU') + ' ₽';
}
</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 дней.