Indholdsfortegnelse
Kort fortalt
- CompleteGreet indsættes via kodeinjektion i Squarespace. Kontrollér først, at dit aktuelle Squarespace-abonnement giver adgang til funktionen.
- Efter installationen kan du styre udseendet, hvilke sider der viser boblen, og hvad der sker, når nogen klikker.
- Før du udgiver, bør du teste computer, mobil, regler for webadresser, ydeevne, tilgængelighed og alle handlinger i boblen.
Kort fortalt indsætter du koden fra CompleteGreet i området til kodeinjektion i Squarespace. Derefter tester du boblen på det udgivne websted.
CompleteGreet har abonnementer med grænser for unikke besøgende. Brug den aktuelle prisside og din konto som facit for pris, kapacitet og inkluderede funktioner.
Adgang til kodeinjektion og scripts fra tredjeparter afhænger af dit aktuelle Squarespace-abonnement. Kontrollér dokumentationen og din opsætning, før du begynder.
Tidsforbruget afhænger af abonnementet, videoen, udseendet, handlingerne og den nødvendige test.
CompleteGreet er lavet til personlige videohilsner og tydelige handlinger. Løsningen kan give et Squarespace-websted et menneskeligt præg uden at gøre brugerrejsen unødigt kompliceret.
Hvordan installerer du CompleteGreet på Squarespace?
Du installerer CompleteGreet med koden fra din konto og området til kodeinjektion i Squarespace. Hvor lang tid det tager, afhænger af webstedet og hvor grundigt du tester.

En videoboble er et lille videoelement, der ligger i et hjørne af webstedet. Den kan vise en hilsen fra dig eller dit team og føre den besøgende videre. Vores guide om hvad en videoboble er forklarer, hvordan denne type videowidget fungerer.
Følg disse trin:
1. Opret en ny boble i CompleteGreet, og giv den et navn, du nemt kan genkende, for eksempel Squarespace-forside.
2. Optag eller upload din hilsen i et understøttet format. Kontrollér de aktuelle filtyper og størrelsesgrænser på din konto, før du uploader.
3. Vælg miniaturebillede, placering, farver og knaptekst. Du kan ændre indstillingerne senere fra CompleteGreet uden at indsætte koden igen.
4. Udgiv boblen, og kopiér hele installationskoden, der hører til webstedet og widgetten.
5. Åbn Squarespace-administrationen i en ny fane. Find de avancerede indstillinger og området til kodeinjektion. Squarespace bruger dette område til scripts fra tredjeparter, der skal indlæses på webstedet. Den officielle dokumentation fra Squarespace viser, hvor koden skal indsættes efter den aktuelle fremgangsmåde.
6. Indsæt hele CompleteGreet-koden på det sted, der anbefales i den opdaterede dokumentation. Kontrollér, at ingen del af koden forsvandt under indsættelsen.
7. Gem ændringerne i Squarespace.
8. Åbn det udgivne websted i et privat browservindue. Kontrollér, at boblen vises, åbner og udfører de valgte handlinger. Hvis den ikke vises, kan du genindlæse siden helt og kontrollere cache og samtykke til scripts.
Adgang til kodeinjektion kan være begrænset til bestemte Squarespace-abonnementer, og vilkårene kan ændre sig. Kontrollér derfor den aktuelle oversigt over abonnementer og dokumentationen før installationen. Kontrollér også, at skabelonen og sikkerhedsindstillingerne tillader scriptet.
Hvordan unikke besøgende tælles, afhænger af det aktuelle CompleteGreet-abonnement. Kontrollér definitionen og grænserne på prissiden og din konto.
Hvad kan du tilpasse i Squarespace?
Du kan styre boblens udseende, adfærd og handlinger. Hvilke muligheder der findes, afhænger af det aktuelle abonnement og versionen. værktøjer til videobobler har forskellige regler for webadresser, handlinger, tilpasning og grænser.

Sider og besøgende
Vælg de sider, hvor boblen faktisk hjælper. Du kan for eksempel vise den på forsiden og skjule den, hvor den kan forstyrre en vigtig handling. Kontrollér, hvilke muligheder kontoen tilbyder for forsinkelse, besøgsgrupper og visning på forskellige enheder.
Test mobil og computer hver for sig, fordi Squarespace-skabeloner kan placere indhold forskelligt på små og store skærme. Boblen må ikke dække menuen, vigtige knapper, formularer eller samtykkebanneret.
Handlingsknapper og formularer
En knap kan åbne en kalender, en formular, en produktside eller en anden relevant adresse. Brug en kort tekst, der tydeligt fortæller, hvad der sker efter klikket.
Hvis din konto har kontaktformularer i widgetten, kan de indsamle navn og mail uden at sende den besøgende væk fra siden. Brug kun de felter, du har brug for, og kontrollér samtykke og lagring.
Visuel identitet og udseende
Tilpas farverne til paletten på Squarespace-webstedet. Vælg også miniaturebillede, placering og afstand til kanterne. Sørg for tilstrækkelig plads til chat, samtykkebanner og faste knapper, der allerede findes.
Vælg en størrelse, der er synlig uden at dække indholdet. Der findes ingen universel størrelse, der passer til alle skabeloner, så test miniaturebilledet på flere sider og rigtige enheder.
Når du har skiftet video eller miniaturebillede, kan cachen stadig vise den gamle variant. Genindlæs siden helt, og kontrollér den i et privat vindue.
#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;
}
}
Installér CompleteGreet i Squarespace
Tilføj videoboblen med kodeinjektion, og kontrollér det udgivne websted.
Opret CompleteGreet-kontoen
Opret videoboblen, og vælg udseende og handlinger.
Kopiér installationskoden
Åbn installationsområdet i CompleteGreet, og kopiér hele koden.
<CompleteGreet-kode, der skal indsættes i Squarespace>
Indsæt denne kode i området til kodeinjektion i Squarespace.
Åbn indstillingerne til kodeinjektion
Find området til kodeinjektion i Squarespace-administrationen.
Indstillinger › Avanceret › Kodeinjektion
Indsæt koden
Indsæt hele CompleteGreet-koden på det sted, Squarespace anbefaler.
Gem og udgiv
Gem ændringerne, og kontrollér boblen på det udgivne websted.
Se den statiske oversigt ovenfor for alle trin.
Hvad bør du kontrollere, før du udgiver?
Brug nogle minutter på en fuld kontrol før udgivelsen. Så kan du finde fejl i placering, afspilning, sideregler og formularer, før de besøgende møder dem.
Begynd på en computer i et privat vindue. Se, hvordan boblen indlæses, hvor den ligger, og om miniaturebilledet er skarpt. Åbn derefter videoen, og kontrollér afspilning, lyd, knapper og alle handlinger.
Tryk på afspilningsknappen, og kontrollér, at billede, lyd, undertekster og kontroller fungerer som planlagt.
Skift derefter til mobil. En videoboble opfører sig anderledes på en lille skærm. Kontrollér placeringen, åbningen af videoen og størrelsen på lukkeknappen. Den besøgende skal kunne åbne og lukke boblen med tommelfingeren, uden at navigationen dækkes.
En formular, der ser enkel ud på en computer, kan blive trang på en telefon. Begræns felterne til det, du faktisk har brug for, kontrollér tastaturet til hvert felt, og test hele indsendelsen fra en mobil.
Regler for webadresser skaber ofte fejl. Test flere rigtige Squarespace-sider, og bekræft, at boblen kun vises, hvor den er nyttig. Kontrollér også de sider, der skal udelades.
En personlig hilsen kan passe på forsiden, prissiden eller en serviceside. Den er ikke automatisk nyttig på betalings-, adgangskode- eller juridiske sider. Brug regler, der følger webstedets faktiske struktur.
Mål også ydeevnen. En videoboble føjer scripts og medier til siden. Sammenlign webstedet før og efter installationen på computer og mobil, så du opdager langsommere indlæsning, forskydning af indhold eller forsinkede klik.
Sammenlign målingerne med Googles vejledning om Web Vitals og undersøg advarsler om forskydning af indhold eller forsinkede interaktioner. Justér indlæsningen i den faktiske opsætning, hvis målingerne bliver dårligere.
Test også med en langsommere mobilforbindelse, ikke kun et hurtigt netværk på kontoret. Kontrollér, hvor hurtigt boblen åbner, hvordan videoen afspilles, og om knapperne reagerer under forhold, der minder om de besøgendes.
Lad til sidst en person, der ikke kender projektet, prøve siden. Bed personen åbne videoen og bruge handlingen i boblen. Nye øjne finder ofte problemer, som teamet ikke længere lægger mærke til.
En ny bruger kan opdage friktion på få sekunder, som du selv har overset i flere uger.
Udgiv, når udseendet, handlingerne, ydeevnen og brugen er kontrolleret.
En videoboble kan gøre et Squarespace-websted mere personligt uden at ødelægge den visuelle struktur.
Kontrollér dog hver skabelon og mobilvisning, da placeringen kan variere.
Asynkron indlæsning betyder ikke automatisk, at ydeevnen er upåvirket. Mål den udgivne side før og efter installationen.
Tilgængelighed
Tag højde for reduceret bevægelse, undertekster og browserens regler for automatisk afspilning. Lukkeknap, afspilning og fokus skal fungere med tastatur.
Brug også W3C’s retningslinjer for tilgængelighed når du kontrollerer tastatur, fokus, skærmlæser, kontrast og alternativer til video.
Test i Safari på iOS og Chrome på Android, fordi skabelonen og skærmbredden kan ændre boblens placering.
Ofte stillede spørgsmål
Hvad koster CompleteGreet til en lille virksomheds websted?
Pris, besøgsgrænse, antal bobler og inkluderede funktioner følger det aktuelle abonnement. Kontrollér prissiden og din konto, før du sammenligner alternativer.
Hvilke platforme fungerer med CompleteGreet?
CompleteGreet kan bruges på understøttede platforme som Shopify, WordPress, Wix, Squarespace, Webflow og WooCommerce samt websteder, der tillader den nødvendige installationskode. Kontrollér den opdaterede dokumentation for hver platform.
Hvor lang tid tager det at installere CompleteGreet i en Shopify-butik?
Tidsforbruget afhænger af videoen, udseendet, handlingerne og den nødvendige test. Shopify kan bruge en særlig app eller en anden installationsmetode end Squarespace, så følg den aktuelle vejledning.
Hvad sker der, hvis webstedet får flere besøgende, end abonnementet tillader?
Optællingen og håndteringen af ekstra trafik følger det aktuelle abonnement og vilkårene. Kontrollér, hvad der sker tæt på og over grænsen, før du vælger abonnement.
Passer CompleteGreet til kundefeedback eller kun til hilsner?
CompleteGreet passer til videohilsner, enkle formularer og tydelige handlinger. En særlig undersøgelsesplatform kan passe bedre, hvis du har brug for lange formularer med mange forgreninger.
Tager CompleteGreet ekstra betaling ved en trafikspids?
Abonnementerne har grænser for unikke besøgende. Kontrollér de aktuelle vilkår, og hvordan en ændring af abonnement eller ekstra trafik håndteres, før en kampagne eller sæsonspids.
