Intégration Squarespace#
Installez Room Visualizer sur Squarespace à l'aide de l'injection de code et placez les conteneurs spécifiques aux produits là où l'éditeur de pages autorise le code personnalisé.
État de vérification : documentation du centre d'aide Squarespace consultée le 7 septembre 2026. Aucun site client Squarespace n'était disponible. L'injection de code et les blocs de code JavaScript nécessitent des plans éligibles, le code personnalisé est hors du périmètre de support de Squarespace, et le chargement Ajax peut l'affecter.
Avant de charger le SDK : ouvrez Tableau de bord → Paramètres, ajoutez l'origine de votre boutique en ligne à Allowed Origins (CORS), puis cliquez sur Enregistrer. Incluez le nom d'hôte publié et toutes les origines d'aperçu ou de préproduction que vous utilisez ; séparez plusieurs origines par des virgules. Voir les étapes de configuration.
Portée et prérequis#
Cette approche est la plus pratique pour un petit catalogue avec des pages produits stables, ou pour un site où vous contrôlez une couche de données de codes produits explicite. Vous avez besoin d'un plan éligible, d'un accès propriétaire du site, de Shop ID, de Publishable Key, et de SKU ideal.house importés.
Squarespace ne fournit pas d'extension ideal.house dans ce guide. Son éditeur de produits standard ne garantit pas une API publique JavaScript stable pour le SKU de la variante sélectionnée, de sorte que l'association au niveau des variantes nécessite un travail d'adaptateur client et peut ne pas être pratique sur tous les modèles.
Contrat minimal du SDK#
<script
src="https://sdk.ideal.house/sdk.js"
data-shop-id="<SHOP_ID>"
data-publishable-key="<PUBLISHABLE_KEY>"
async
></script>
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Le code produit doit correspondre exactement au sku du catalogue importé. N'utilisez pas de Client Secret dans l'injection de code.
Installer le chargeur#
Ouvrez Site web → Pages → Code personnalisé → Injection de code (l'étiquette peut varier selon la version du site). Collez le <script> SDK dans Pied de page, remplacez les deux espaces réservés et enregistrez. L'injection dans le pied de page s'exécute sur les pages du site avant </body> ; les pages de paiement ne prennent pas en charge le code injecté.
Installez le chargeur une seule fois. Si une autre intégration l'a déjà ajouté, supprimez le doublon.
Placer un bouton produit#
Là où l'éditeur de pages autorise un bloc de code avec JavaScript activé, placez :
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Utilisez le SKU de ce produit exact. Dans Squarespace 7.1, les mises en page Boutique/Détails du produit peuvent ne pas accepter de blocs arbitraires dans la zone principale d'informations produit. Un repli pratique consiste à utiliser une page de mise en page normale avec un bloc produit et un bloc de code voisin, une paire par produit. Vérifiez que la page boutique reste activée car les blocs produits en dépendent.
Pour les catalogues plus volumineux, un développeur peut injecter des conteneurs en associant une correspondance stable gérée par le client, tel que le chemin URL au SKU :
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
La correspondance des URL, l'insertion du conteneur et le rappel de navigation relèvent du code client. N'extrayez pas les données d'état privées de Squarespace et ne supposez pas que leur structure est stable.
Variantes, aperçu rapide et chargement Ajax#
Si un produit Squarespace possède plusieurs variantes avec des ressources ideal.house différentes, n'affichez un bouton qu'après que votre adaptateur a pu identifier le SKU de la variante sélectionnée à partir d'une source prise en charge. Remplacez l'ancien conteneur par un conteneur propre à chaque changement. Si aucun rappel de sélection/source de données pris en charge n'existe, utilisez un seul SKU partagé au niveau du produit uniquement si toutes les variantes partagent la même ressource visuelle, ou omettez le bouton.
L'aperçu rapide, les blocs produits et le chargement de page Ajax peuvent remplacer le contenu de la page. Squarespace avertit que le chargement Ajax peut entrer en conflit avec le code personnalisé. Testez le modèle exact ; si nécessaire, désactivez le chargement Ajax ou appelez renderForPath() depuis un mécanisme de navigation que vous contrôlez. Un MutationObserver est un adaptateur client de dernier recours et doit être limité à la région produit.
Importer les données produit#
Maintenez un tableau des SKU produit/variante Squarespace vers sku ideal.house, puis utilisez Téléversement de produits. Le flux de travail public complet est documenté sous importer des produits, état de la tâche, liste des produits, mise à jour des produits, suppression d'un produit et erreurs et nouvelles tentatives.
Le SDK côté navigateur ne synchronise pas les produits Squarespace. Tout export API Commerce, webhook ou tâche planifiée est de la responsabilité du client.
Vérifier et supprimer#
Testez le site publié dans une fenêtre privée car l'édition en session connectée peut supprimer le code personnalisé. Vérifiez un produit mappé, un SKU manquant, un SKU inconnu, les blocs produits, l'aperçu rapide, la navigation Ajax, les boutons Précédent/Suivant du navigateur, la mise en page mobile, le consentement aux cookies et l'exclusion du paiement. Confirmez une requête SDK réussie et l'égalité exacte du code produit/SKU.
Pour supprimer, supprimez l'injection du pied de page et tous les blocs de code/hôtes/scripts de correspondance, enregistrez et videz les caches. Vérifiez que la page publiée ne contient aucune requête SDK ni élément data-idealhouse-*.