Voeg aangepaste HTML of scripts toe aan de pagina's van je site.

Je kunt code-injectie gebruiken om HTML en scripts toe te voegen die specifieke delen van je site verbeteren. Deze kunnen live chatdiensten, domeinverificatie voor aangepaste e-maildiensten of site-analyse omvatten.

Code-injectie is niet bedoeld om content of stijlen toe te voegen. Om inhoud aan je site toe te voegen, ga je naar Pages and content basics. Om aangepaste CSS voor stijlen toe te voegen, gebruik je de Custom CSS Editor.

Code-injectie is beschikbaar in de Core, Plus, Advanced en sommige verouderde factureringsplannen. Voor meer informatie, bezoek Het juiste Squarespace-abonnement kiezen.

Kijk een video

Voordat je begint

• Als je code toevoegt aan code-injectie, kunnen we je vragen om dit uit te schakelen tijdens het bewerken van je site.
• Om JavaScript toe te voegen aan een code-injectieveld, moet je de code omringen met -tags.
• We raden aan om CSS toe te voegen aan de Custom CSS Editor in plaats van code-injectie. Als je het aan de Code-injectie toevoegt, omring de code dan met tags.
• Het footer wordt gedefinieerd door het sjabloon en de versie van je site.
• Laden van Ajax kan voorkomen dat CSS die aan code-injectie wordt toegevoegd, correct laadt. Voeg in plaats daarvan CSS toe aan de CSS-editor.
• kassapagina's ondersteunen geen code.

Code toevoegen aan Code-injectie

Om aangepaste code toe te voegen aan code-injectie:

1. Open het Code-injectiepaneel.
2. Voeg geldige HTML of scripts toe aan de juiste Code-injectievelden voor de header, footer, wachtwoordpagina, orderbevestigingspagina of orderstatuspagina.
3. Klik na het toevoegen van je code op Opslaan.

Header

Code die hier wordt toegevoegd, wordt geïnjecteerd in de -tag op elke pagina van je site.

Footer

Code die hier wordt toegevoegd, wordt vóór de afsluitende tag op elke pagina van je site geïnjecteerd.

Integreer je geïnjecteerde code met de cookiebanner.

Als je integraties van derden aan je site toevoegt met behulp van code-injectie (bijvoorbeeld Google Ads), kan die code cookies plaatsen in de browsers van bezoekers. Als je de cookiebanner op je site inschakelt, kun je vervolgens code-injectie gebruiken om het gedrag van deze integraties van derden te veranderen, afhankelijk van of de bezoeker toestemming heeft gegeven voor cookies.

Je bezoekers kunnen hun toestemmingskeuzes aangeven als je de volgende stappen uitvoert:

1. Activeer je cookiebanner door het paneel Cookies & Bezoekersgegevens te openen en de schakelaar naast Cookiebanner aan te zetten.
2. Selecteer het Opt in & out cookiebanner, dat twee aanpasbare knoppen bevat waarmee klanten de cookies van je site kunnen accepteren of weigeren.
3. Klik op Opslaan.
4. Voeg de benodigde code toe. Bekijk het voorbeeld hieronder voor meer informatie.

Als we Google Ads als voorbeeld gebruiken: als je Google Ads aan je site hebt toegevoegd met Code-injectie, bekijk dan deze forumpost voor een voorbeeldcode die je kunt toevoegen om je Google Ads-code te integreren met de cookiebanner.

Als je Google Analytics via onze officiële integratie gebruikt, hoef je in dit veld geen code toe te voegen. Na het opslaan van je meet-ID, activeer je je cookiebanner.

Opmerking: Toestemmingsmodus is een functie die door Google wordt aangeboden. Ga voor meer informatie naar de documentatie van Google. Daarnaast vallen aangepaste codewijzigingen buiten het bereik van onze ondersteuning. Je kunt Google Ads raadplegen als je ondersteuning nodig hebt voor de installatie of probleemoplossing.

Wachtwoordpagina

Het vergrendelscherm verschijnt wanneer een pagina of site verborgen is achter een sitebrede of pagina-wachtwoord. De hier geïnjecteerde code wordt weergegeven boven het wachtwoordveld van het vergrendelscherm. Het is niet mogelijk om code in het vergrendelscherm te injecteren tijdens de proefperiode van je site.

Hoewel je code aan dit veld kunt toevoegen, raden we aan om het vergrendelschermpaneel te gebruiken om je wachtwoordpagina te ontwerpen. Op die manier kun je een achtergrondafbeelding of diavoorstelling toevoegen, lettertypestijlen aanpassen, je logo integreren en meer.

Pagina met orderbevestiging

De hier toegevoegde code wordt ingevoegd in de orderbevestigingspagina die verschijnt nadat een klant een aankoop heeft gedaan met cadeaubonnen, lidmaatschappen en abonnementen.

Je kunt zes tags gebruiken om klantspecifieke informatie in te voegen. Als een aankoop is opgedeeld omdat het meerdere verzendprofielen bevat, worden de details voor elke bestelling in de aankoop weergegeven.

• {orderId} – Het ordernummer van de bevestigde bestelling
• {orderSubtotal} – Het subtotaal van de bevestigde bestelling
• {orderSubtotalCents} – Het subtotaal van de bevestigde bestelling in eurocent
• {orderGrandTotal} – Het totaal van de bevestigde bestelling
• {orderGrandTotalCents} – Het totaalbedrag van de bevestigde bestelling, in centen
• {customerEmailAddress} – Het e-mailadres van de klant, zoals ingevoerd in het gedeelte "Jouw e-mailadres" tijdens het afrekenen

Pagina met bestelstatus

De code die hier is toegevoegd, wordt geïnjecteerd in de orderstatuspagina, de bevestigingspagina die wordt weergegeven nadat een klant een bestelling heeft geplaatst voor fysieke producten, downloads en dienstenproducten. Klanten kunnen later ook terugkeren naar deze pagina om hun bestelstatus te controleren. 

Je kunt zes tags gebruiken om klantspecifieke informatie in te voegen. Als een aankoop is opgedeeld omdat het meerdere verzendprofielen bevat, worden de details voor elke bestelling in de aankoop weergegeven.

• {orderId} – Het ordernummer van de bevestigde bestelling
• {orderSubtotal} – Het subtotaal van de bevestigde bestelling
• {orderSubtotalCents} – Het subtotaal van de bevestigde bestelling in eurocent
• {orderGrandTotal} – Het totaal van de bevestigde bestelling
• {orderGrandTotalCents} – Het totaalbedrag van de bevestigde bestelling, in centen
• {customerEmailAddress} – Het e-mailadres van de klant, zoals ingevoerd in het gedeelte "Jouw e-mailadres" tijdens het afrekenen

Klanten kunnen de pagina met de bestelstatus herhaaldelijk bezoeken, waardoor tracking-scripts mogelijk meerdere keren worden geactiveerd. Om te voorkomen dat dezelfde klant twee keer wordt geteld met tracking-scripts, plaats scripts die je alleen op het eerste bezoek aan de bestelstatuspagina na de kassa wilt uitvoeren tussen {.if firstPageView} en {.end} tags. Bijvoorbeeld:

{.if firstPageView}

Voeg hier de tracking-scripts toe die je pas na de kassa wilt uitvoeren.

{.end}

Voeg hier de scripts toe die je bij elk bezoek wilt uitvoeren.

De aangepaste code van je orderbevestigingspagina migreren

We hebben de orderbevestigingspagina bijgewerkt voor fysieke, digitale en dienstenproducten. Klanten die deze producttypes kopen, komen op een pagina die de orderstatus, de details ervan en de mogelijkheid om een klantenaccount aan te maken toont.

Als deze banner wordt weergegeven in het paneel voor code-injectie, betekent dit dat je code-injectie hebt toegevoegd aan de originele pagina voor orderbevestiging, en deze update is niet toegepast op je site. 

Om deze update op je site toe te passen en klanten na de kassa naar de nieuwe bevestigingspagina van de bestelling te sturen voor digitale, fysieke en dienstenproducten: 

1. Kopieer de code in het veld op de orderbevestigingspagina. 
2. Plak het in het veld op de pagina met de orderstatus. 
3. Klik op opslaan. 
4. Klik op Ik heb mijn aangepaste code gemigreerd.

Totdat je deze stappen volgt, komen alle klanten na de kassa op de originele orderbevestigingspagina terecht.

Per-pagina code-injectie

Je kunt ook code op een specifieke pagina injecteren:

1. Beweeg je muis over de pagina in het paneel Pagina's.
2. Klik .
3. Klik Advanced-abonnement.

Pagina-headercode-injectie voegt code toe aan de tag van die pagina.

In de instellingen van de blogpagina voegt Post Blog Item Code-injectie code toe aan elke blogpost.

Hoe code-injectie verschijnt, hangt af van de versie van je site.

Scripts uitschakelen in de preview

Aangepaste code kan er soms voor zorgen dat je je site niet veilig kunt bewerken. Als we je helpen bij het oplossen van problemen, kunnen we je vragen om scripts in de preview uit te schakelen. Dit betekent dat je je aangepaste code niet ziet wanneer je bent ingelogd, maar het heeft geen invloed op hoe je site er voor bezoekers uitziet.

Je ziet dit bericht onderaan je site als je code stoort:

We hebben een fout gedetecteerd bij het laden van je sitepreview. Dit wordt meestal veroorzaakt door geïnjecteerde code.

Klik om veilig te bewerken op Scripts uitschakelen in voorvertoning onderaan je site. Het bericht wordt gewijzigd in Scripts zijn uitgeschakeld in de voorvertoning van je site. Open om je aangepaste code te bekijken een nieuw privé- of incognitovenster in je browser en voer de URL van je pagina in.

Als het bericht over het uitschakelen van scripts niet automatisch verschijnt:

1. Prompt het bericht om te verschijnen door /safe direct na /config te typen aan het einde van je veilige bewerkings-URL en druk vervolgens op Enter.
2. Als dit niet werkt, controleer dan alle plekken waar je aangepaste code hebt toegevoegd en verwijder deze tijdelijk tijdens het oplossen van het probleem.

Na het uitschakelen van je code zie je misschien een Scripts inschakelen in preview? Bericht. We raden af om hierop te klikken, omdat het je mogelijkheid om je site te bekijken, bewerken of beheren kan belemmeren als je bent ingelogd. Het is niet mogelijk om dit bericht te verbergen, maar je ziet het alleen als je bent ingelogd. Het is niet zichtbaar voor bezoekers.

Aangepaste codewijzigingen vallen buiten de reikwijdte van onze ondersteuning. Dit betekent dat we je niet verder kunnen helpen met de installatie of het oplossen van problemen. Daarnaast kunnen we bij een codegebaseerde oplossing de functionaliteit of volledige compatibiliteit met Squarespace niet garanderen. Dit omvat onder meer hoe het functioneert binnen ons responsive design, met name de weergave op mobiele apparaten, en of het werkt op alle sjablonen. Aangepaste code kan ook weergaveproblemen veroorzaken bij toekomstige updates van ons platform. Hoewel we je niet verder kunnen helpen, zijn er veel bronnen die je in de juiste richting kunnen wijzen:

• Leer de beste werkwijzen voor het toevoegen van aangepaste code.
• Lees onze algemene gids over aanpassingen door derden.
• Bezoek Squarespace Forum, onze klanten- en ontwikkelaarscommunity.
• Huur een Squarespace Expert in om aangepaste code voor je site te helpen bouwen.