Innholdsfortegnelse
Kort fortalt
- CompleteGreet legges inn via kodeinjeksjon i Squarespace. Kontroller først at det gjeldende Squarespace abonnementet ditt gir tilgang til denne funksjonen.
- Etter installasjonen kan du styre utseendet, sidene som skal vise boblen, og hva som skjer når noen klikker.
- Før publisering bør du teste datamaskin, mobil, regler for nettadresser, ytelse, tilgjengelighet og alle handlinger i boblen.
Kort forklart legger du koden fra CompleteGreet inn i området for kodeinjeksjon i Squarespace. Deretter tester du boblen på det publiserte nettstedet.
CompleteGreet har planer med grenser for unike besøkende. Bruk den gjeldende prissiden og kontoen som fasit for pris, kapasitet og inkluderte funksjoner.
Tilgang til kodeinjeksjon og tredjepartsskript avhenger av det gjeldende Squarespace abonnementet. Kontroller dokumentasjonen og oppsettet ditt før du begynner.
Tidsbruken avhenger av abonnementet, videoen, utseendet, handlingene og testingen.
CompleteGreet er laget for personlige videohilsener og tydelige handlinger. Løsningen kan gi et Squarespace nettsted et menneskelig preg uten å gjøre brukerreisen unødvendig komplisert.
Hvordan installerer du CompleteGreet på Squarespace?
Du installerer CompleteGreet med koden fra kontoen din og området for kodeinjeksjon i Squarespace. Hvor lang tid det tar, avhenger av nettstedet og hvor grundig du tester.

En videoboble er et lite videoelement som ligger i et hjørne av nettstedet. Den kan vise en hilsen fra deg eller teamet ditt og lede den besøkende videre. Guiden vår om hva en videoboble er forklarer hvordan denne typen videowidget fungerer.
Følg disse trinnene:
1. Opprett en ny boble i CompleteGreet og gi den et navn du lett kjenner igjen, for eksempel Squarespace forside.
2. Ta opp eller last opp hilsenen din i et format som støttes. Kontroller gjeldende filtyper og størrelsesgrenser i kontoen før du laster opp.
3. Velg miniatyrbilde, plassering, farger og knappetekst. Du kan endre innstillingene senere fra CompleteGreet uten å legge inn koden på nytt.
4. Publiser boblen og kopier hele installasjonskoden som hører til nettstedet og widgeten.
5. Åpne administrasjonen i Squarespace i en ny fane. Finn de avanserte innstillingene og området for kodeinjeksjon. Squarespace bruker dette området til tredjepartsskript som skal lastes på nettstedet. Den offisielle dokumentasjonen fra Squarespace viser hvor koden skal legges inn etter den gjeldende fremgangsmåten.
6. Lim inn hele CompleteGreet koden på stedet som anbefales i den oppdaterte dokumentasjonen. Kontroller at ingen del av koden forsvant under innlimingen.
7. Lagre endringene i Squarespace.
8. Åpne det publiserte nettstedet i et privat nettleservindu. Kontroller at boblen vises, åpnes og utfører handlingene du har valgt. Hvis den ikke vises, kan du laste siden helt på nytt og kontrollere hurtigbufferen og samtykket til skript.
Tilgang til kodeinjeksjon kan være begrenset til bestemte Squarespace abonnementer, og vilkårene kan endres. Kontroller derfor den gjeldende planoversikten og dokumentasjonen før installasjonen. Sjekk også at malen og sikkerhetsinnstillingene tillater skriptet.
Hvordan unike besøkende telles, avhenger av den gjeldende CompleteGreet planen. Kontroller definisjonen og grensene i prissiden og kontoen.
Hva kan du tilpasse i Squarespace?
Du kan styre utseendet, oppførselen og handlingene i boblen. Hvilke valg som finnes, avhenger av den gjeldende planen og versjonen. verktøy for videobobler har ulike regler for nettadresser, handlinger, tilpasning og grenser.

Sider og besøkende
Velg sidene der boblen faktisk hjelper. Du kan for eksempel vise den på forsiden og skjule den der den kan forstyrre en viktig handling. Kontroller hvilke valg kontoen tilbyr for forsinkelse, besøksgrupper og visning på ulike enheter.
Test mobil og datamaskin hver for seg, fordi Squarespace maler kan plassere innhold forskjellig på små og store skjermer. Boblen må ikke dekke menyen, viktige knapper, skjemaer eller samtykkebanneret.
Handlingsknapper og skjemaer
En knapp kan åpne en kalender, et skjema, en produktside eller en annen relevant adresse. Bruk en kort tekst som forteller tydelig hva som skjer etter klikket.
Hvis kontoen din har kontaktskjemaer i widgeten, kan de samle inn navn og epost uten å sende den besøkende bort fra siden. Bruk bare feltene du trenger, og kontroller samtykke og lagring.
Visuell profil og utseende
Tilpass fargene til paletten på Squarespace nettstedet. Velg også miniatyrbilde, plassering og avstand til kantene. La det være nok plass til chat, samtykkebanner og faste knapper som allerede finnes.
Velg en størrelse som er synlig uten å dekke innholdet. Det finnes ingen universell størrelse som passer alle maler, så test miniatyrbildet på flere sider og virkelige enheter.
Etter at du bytter video eller miniatyrbilde, kan hurtigbufferen fortsatt vise den gamle varianten. Last siden helt på nytt og kontroller den i et privat vindu.
#cg-ig-PL4 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL4 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL4 .cg-content {
padding: 24px;
}
#cg-ig-PL4 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
line-height: 1.3;
}
#cg-ig-PL4 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0 0 24px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-steps {
display: flex;
flex-direction: column;
gap: 0;
}
#cg-ig-PL4 .cg-step {
display: flex;
gap: 16px;
position: relative;
padding-bottom: 24px;
}
#cg-ig-PL4 .cg-step:last-child {
padding-bottom: 0;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
content: ”;
position: absolute;
left: 15px;
top: 32px;
width: 2px;
height: calc(100% – 16px);
background: #e2e2ea;
}
#cg-ig-PL4 .cg-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
#cg-ig-PL4 .cg-step-content {
flex: 1;
padding-top: 4px;
}
#cg-ig-PL4 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px 0;
line-height: 1.4;
}
#cg-ig-PL4 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-code-box {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 16px;
position: relative;
}
#cg-ig-PL4 .cg-code-label {
font-size: 11px;
color: #7a7a96;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: block;
}
#cg-ig-PL4 .cg-code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #E48333;
margin: 0;
line-height: 1.6;
word-break: break-all;
}
#cg-ig-PL4 .cg-code-note {
font-size: 11px;
color: #7a7a96;
margin-top: 8px;
font-style: italic;
}
#cg-ig-PL4 .cg-path-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 6px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
}
#cg-ig-PL4 .cg-path-icon {
width: 16px;
height: 16px;
background: #3D5ACE;
border-radius: 3px;
flex-shrink: 0;
}
#cg-ig-PL4 .cg-path-text {
font-size: 13px;
color: #4a4a68;
margin: 0;
}
#cg-ig-PL4 .cg-path-arrow {
color: #7a7a96;
font-size: 12px;
}
#cg-ig-PL4 .cg-cta {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL4 .cg-cta-btn {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL4 .cg-cta-btn:hover {
background: #2f4aa8;
}
#cg-ig-PL4 .cg-source {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
#cg-ig-PL4 .cg-source a {
color: #7a7a96;
text-decoration: underline;
}
#cg-ig-PL4 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
#cg-ig-PL4 .cg-content {
padding: 16px;
}
#cg-ig-PL4 .cg-title {
font-size: 18px;
}
#cg-ig-PL4 .cg-step {
gap: 12px;
}
#cg-ig-PL4 .cg-step-num {
width: 28px;
height: 28px;
font-size: 13px;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
left: 13px;
top: 28px;
}
}
Installer CompleteGreet i Squarespace
Legg til videoboblen med kodeinjeksjon og kontroller det publiserte nettstedet.
Opprett CompleteGreet kontoen
Opprett videoboblen og velg utseende og handlinger.
Kopier installasjonskoden
Åpne installasjonsdelen i CompleteGreet og kopier hele koden.
<CompleteGreet kode som skal limes inn i Squarespace>
Lim denne koden inn i området for kodeinjeksjon i Squarespace.
Åpne innstillingene for kodeinjeksjon
Finn området for kodeinjeksjon i administrasjonen i Squarespace.
Innstillinger › Avansert › Kodeinjeksjon
Lim inn koden
Lim inn hele CompleteGreet koden på stedet som Squarespace anbefaler.
Lagre og publiser
Lagre endringene, og kontroller boblen på det publiserte nettstedet.
Se den statiske oversikten ovenfor for alle trinnene.
Hva bør du kontrollere før publisering?
Bruk noen minutter på en full kontroll før publisering. Da kan du finne feil i plassering, avspilling, sideregler og skjemaer før de besøkende møter dem.
Begynn på datamaskin i et privat vindu. Se hvordan boblen lastes, hvor den ligger, og om miniatyrbildet er skarpt. Åpne deretter videoen og kontroller avspilling, lyd, knapper og alle handlingene.
Trykk på avspillingsknappen og kontroller at bilde, lyd, teksting og kontroller fungerer som planlagt.
Bytt deretter til mobil. En videoboble oppfører seg annerledes på en liten skjerm. Kontroller plasseringen, åpningen av videoen og størrelsen på lukkeknappen. Den besøkende må kunne åpne og lukke boblen med tommelen uten at navigasjonen dekkes.
Et skjema som ser enkelt ut på datamaskin, kan bli trangt på telefon. Begrens feltene til det du faktisk trenger, kontroller tastaturet for hvert felt, og test hele innsendingen fra en mobil.
Regler for nettadresser skaper ofte feil. Test flere virkelige Squarespace sider og bekreft at boblen bare vises der den er nyttig. Kontroller også sidene som skal utelates.
En personlig hilsen kan passe på forsiden, prissiden eller en tjenesteside. Den er ikke automatisk nyttig på betaling, passord eller juridiske sider. Bruk regler som følger den faktiske strukturen på nettstedet.
Mål også ytelsen. En videoboble legger til skript og medier på siden. Sammenlign nettstedet før og etter installasjonen på datamaskin og mobil, slik at du oppdager tregere lasting, forskyvning av innhold eller forsinkede klikk.
Sammenlign målingene med Googles veiledning om Web Vitals og undersøk varsler om forskyvning av innhold eller forsinkede interaksjoner. Juster lastingen i det faktiske oppsettet hvis målingene blir svakere.
Test også med en langsommere mobilforbindelse, ikke bare raskt nett på kontoret. Kontroller hvor raskt boblen åpnes, hvordan videoen spiller, og om knappene svarer under forhold som ligner dem de besøkende har.
La til slutt en person som ikke kjenner prosjektet, prøve siden. Be vedkommende åpne videoen og bruke handlingen i boblen. Nye øyne finner ofte problemer teamet ikke lenger legger merke til.
En ny bruker kan oppdage friksjon på sekunder som du selv har oversett i flere uker.
Publiser når utseendet, handlingene, ytelsen og bruken er kontrollert.
En videoboble kan gjøre et Squarespace nettsted mer personlig uten å ødelegge den visuelle strukturen.
Kontroller likevel hver mal og mobilvisning, siden plasseringen kan variere.
Asynkron lasting betyr ikke automatisk at ytelsen er upåvirket. Mål den publiserte siden før og etter installasjonen.
Tilgjengelighet
Ta hensyn til redusert bevegelse, teksting og nettleserens regler for automatisk avspilling. Lukkeknapp, avspilling og fokus må fungere med tastatur.
Bruk også W3Cs retningslinjer for tilgjengelighet når du kontrollerer tastatur, fokus, skjermleser, kontrast og alternativer til video.
Test i Safari på iOS og Chrome på Android, fordi malen og skjermbredden kan endre plasseringen av boblen.
Vanlige spørsmål
Hvor mye koster CompleteGreet for nettstedet til en liten bedrift?
Pris, besøksgrense, antall bobler og inkluderte funksjoner følger den gjeldende planen. Kontroller prissiden og kontoen før du sammenligner alternativer.
Hvilke plattformer fungerer med CompleteGreet?
CompleteGreet kan brukes på støttede plattformer som Shopify, WordPress, Wix, Squarespace, Webflow og WooCommerce, samt nettsteder som tillater den nødvendige installasjonskoden. Kontroller den oppdaterte dokumentasjonen for hver plattform.
Hvor lang tid tar det å installere CompleteGreet i en Shopify butikk?
Tidsbruken avhenger av videoen, utseendet, handlingene og testingen. Shopify kan bruke en egen app eller en annen installasjonsmetode enn Squarespace, så følg den gjeldende veiledningen.
Hva skjer hvis nettstedet får flere besøkende enn planen tillater?
Tellingen og håndteringen av ekstra trafikk følger den gjeldende planen og vilkårene. Kontroller hva som skjer nær og over grensen før du velger abonnement.
Passer CompleteGreet til kundetilbakemeldinger eller bare hilsener?
CompleteGreet passer til videohilsener, enkle skjemaer og tydelige handlinger. En egen undersøkelsesplattform kan passe bedre hvis du trenger lange skjemaer med mange forgreninger.
Tar CompleteGreet ekstra betalt ved en trafikktopp?
Planene har grenser for unike besøkende. Kontroller de gjeldende vilkårene og hvordan en planendring eller ekstra trafikk håndteres før en kampanje eller sesongtopp.
