Profil
Dashboard
Logga ut
Innehållsförteckning
Kort sammanfattning
- CompleteGreet läggs in via kodinjektion i Squarespace. Kontrollera först att ditt nuvarande Squarespace-abonnemang ger tillgång till den funktionen.
- Efter installationen kan du styra utseendet, vilka sidor som ska visa bubblan och vad som händer när någon klickar.
- Före publicering bör du testa dator, mobil, URL-regler, prestanda, tillgänglighet och alla handlingar i bubblan.
Kort sagt klistrar du in koden från CompleteGreet i området för kodinjektion i Squarespace. Därefter testar du bubblan på den publicerade webbplatsen.
CompleteGreet har abonnemang med gränser för unika besökare. Utgå från den aktuella prissidan och ditt konto när du kontrollerar pris, kapacitet och vilka funktioner som ingår.
Tillgång till kodinjektion och tredjepartsskript beror på ditt aktuella Squarespace-abonnemang. Kontrollera dokumentationen och din konfiguration innan du börjar.
Tidsåtgången beror på abonnemanget, videon, utseendet, handlingarna och hur grundligt du testar.
CompleteGreet är gjort för personliga videohälsningar och tydliga handlingar. Lösningen kan ge en Squarespace-webbplats ett mänskligare uttryck utan att göra besökarens väg onödigt komplicerad.
Hur installerar du CompleteGreet på Squarespace?
Du installerar CompleteGreet med koden från ditt konto och området för kodinjektion i Squarespace. Hur lång tid det tar beror på webbplatsen och hur grundligt du testar.
En videobubbla är ett litet videoelement som ligger i ett hörn av webbplatsen. Den kan visa en hälsning från dig eller ditt team och leda besökaren vidare. Vår guide om vad en videobubbla är förklarar hur den här typen av videowidget fungerar.
Följ de här stegen:
1. Skapa en ny bubbla i CompleteGreet och ge den ett namn som du lätt känner igen, till exempel Squarespace startsida.
2. Spela in eller ladda upp din hälsning i ett format som stöds. Kontrollera aktuella filtyper och storleksgränser i kontot innan du laddar upp.
3. Välj miniatyrbild, placering, färger och knapptext. Du kan ändra inställningarna senare i CompleteGreet utan att lägga in koden på nytt.
4. Publicera bubblan och kopiera hela installationskoden som hör till webbplatsen och widgeten.
5. Öppna administrationen i Squarespace i en ny flik. Gå till de avancerade inställningarna och hitta området för kodinjektion. Squarespace använder det området för tredjepartsskript som ska läsas in på webbplatsen. Den officiella dokumentationen från Squarespace visar var koden ska läggas in enligt den aktuella metoden.
6. Klistra in hela CompleteGreet-koden på den plats som rekommenderas i den uppdaterade dokumentationen. Kontrollera att ingen del av koden försvann när du klistrade in den.
7. Spara ändringarna i Squarespace.
8. Öppna den publicerade webbplatsen i ett privat webbläsarfönster. Kontrollera att bubblan visas, går att öppna och utför handlingarna du har valt. Om den inte visas kan du göra en fullständig omladdning och kontrollera cache och samtycke till skript.
Tillgången till kodinjektion kan vara begränsad till vissa Squarespace-abonnemang, och villkoren kan ändras. Kontrollera därför den aktuella abonnemangsöversikten och dokumentationen före installationen. Kontrollera också att mallen och säkerhetsinställningarna tillåter skriptet.
Hur unika besökare räknas beror på det aktuella CompleteGreet-abonnemanget. Kontrollera definitionen och gränserna på prissidan och i kontot.
Vad kan du anpassa i Squarespace?
Du kan styra bubblans utseende, beteende och handlingar. Vilka val som finns beror på den aktuella planen och versionen. verktyg för videobubblor har olika regler för webbadresser, handlingar, anpassning och gränser.
Sidor och besökare
Välj de sidor där bubblan faktiskt hjälper. Du kan till exempel visa den på startsidan och dölja den där den kan störa en viktig handling. Kontrollera vilka val ditt konto erbjuder för fördröjning, besökargrupper och visning på olika enheter.
Testa mobil och dator var för sig eftersom Squarespace-mallar kan placera innehåll på olika sätt på små och stora skärmar. Bubblan får inte täcka menyn, viktiga knappar, formulär eller samtyckesbannern.
Handlingsknappar och formulär
En knapp kan öppna en kalender, ett formulär, en produktsida eller en annan relevant adress. Använd en kort text som tydligt berättar vad som händer efter klicket.
Om ditt konto har kontaktformulär i widgeten kan de samla in namn och e-post utan att skicka besökaren bort från sidan. Använd bara de fält du behöver och kontrollera samtycke och lagring.
Visuell profil och utseende
Anpassa färgerna till paletten på din Squarespace-webbplats. Välj också miniatyrbild, placering och avstånd till kanterna. Lämna tillräckligt med utrymme för chatt, samtyckesbanner och fasta knappar som redan finns.
Välj en storlek som syns utan att täcka innehållet. Det finns ingen universell storlek som passar alla mallar, så testa miniatyrbilden på flera sidor och riktiga enheter.
När du har bytt video eller miniatyrbild kan cacheminnet fortfarande visa den gamla versionen. Ladda om sidan helt och kontrollera den i ett privat fönster.
#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;
}
}
Installera CompleteGreet i Squarespace
Lägg till videobubblan med kodinjektion och kontrollera den publicerade webbplatsen.
Skapa ditt CompleteGreet-konto
Skapa videobubblan och välj utseende och handlingar.
Kopiera installationskoden
Öppna installationsdelen i CompleteGreet och kopiera hela koden.
<CompleteGreet-kod som ska klistras in i Squarespace>
Klistra in koden i området för kodinjektion i Squarespace.
Öppna inställningarna för kodinjektion
Hitta området för kodinjektion i Squarespace-administrationen.
Inställningar › Avancerat › Kodinjektion
Klistra in koden
Klistra in hela CompleteGreet-koden på den plats som Squarespace rekommenderar.
Spara och publicera
Spara ändringarna och kontrollera bubblan på den publicerade webbplatsen.
Se den statiska översikten ovan för alla steg.
Vad bör du kontrollera före publicering?
Lägg några minuter på en fullständig kontroll före publicering. Då kan du hitta fel i placering, uppspelning, sidregler och formulär innan besökarna möter dem.
Börja på dator i ett privat fönster. Se hur bubblan laddas, var den ligger och om miniatyrbilden är skarp. Öppna sedan videon och kontrollera uppspelning, ljud, knappar och alla handlingar.
Tryck på uppspelningsknappen och kontrollera att bild, ljud, undertexter och kontroller fungerar som planerat.
Byt sedan till mobil. En videobubbla beter sig annorlunda på en liten skärm. Kontrollera placeringen, hur videon öppnas och storleken på stängningsknappen. Besökaren måste kunna öppna och stänga bubblan med tummen utan att navigeringen täcks.
Ett formulär som ser enkelt ut på dator kan bli trångt på en telefon. Begränsa fälten till det du faktiskt behöver, kontrollera tangentbordet för varje fält och testa hela inskickningen från en mobil.
Regler för webbadresser orsakar ofta fel. Testa flera riktiga Squarespace-sidor och bekräfta att bubblan bara visas där den är till nytta. Kontrollera också sidorna som ska undantas.
En personlig hälsning kan passa på startsidan, prissidan eller en tjänstesida. Den är inte automatiskt användbar på betalningssidor, lösenordssidor eller juridiska sidor. Använd regler som följer webbplatsens faktiska struktur.
Mät också prestandan. En videobubbla lägger till skript och medier på sidan. Jämför webbplatsen före och efter installationen på dator och mobil så att du upptäcker långsammare laddning, förskjutningar av innehåll eller fördröjda klick.
Jämför mätningarna med Googles vägledning om Web Vitals och undersök varningar om förskjutet innehåll eller fördröjda interaktioner. Justera laddningen i den faktiska konfigurationen om mätvärdena försämras.
Testa också med en långsammare mobilanslutning, inte bara ett snabbt kontorsnätverk. Kontrollera hur snabbt bubblan öppnas, hur videon spelas upp och om knapparna svarar under förhållanden som liknar besökarnas.
Låt till sist någon som inte känner till projektet prova sidan. Be personen öppna videon och använda handlingen i bubblan. Nya ögon hittar ofta problem som teamet inte längre lägger märke till.
En ny användare kan upptäcka friktion på några sekunder som du själv har missat i flera veckor.
Publicera när utseendet, handlingarna, prestandan och användningen har kontrollerats.
En videobubbla kan göra en Squarespace-webbplats mer personlig utan att förstöra den visuella strukturen.
Kontrollera ändå varje mall och mobilvy eftersom placeringen kan variera.
Asynkron laddning innebär inte automatiskt att prestandan är opåverkad. Mät den publicerade sidan före och efter installationen.
Tillgänglighet
Ta hänsyn till minskad rörelse, undertexter och webbläsarens regler för automatisk uppspelning. Stängningsknapp, uppspelning och fokus måste fungera med tangentbord.
Använd också W3C:s riktlinjer för tillgänglighet när du kontrollerar tangentbord, fokus, skärmläsare, kontrast och alternativ till video.
Testa i Safari på iOS och Chrome på Android eftersom mallen och skärmbredden kan ändra bubblans placering.
Vanliga frågor
Vad kostar CompleteGreet för en liten företagswebbplats?
Pris, besöksgräns, antal bubblor och inkluderade funktioner följer det aktuella abonnemanget. Kontrollera prissidan och kontot innan du jämför alternativen.
Vilka plattformar fungerar med CompleteGreet?
CompleteGreet kan användas på plattformar som stöds, till exempel Shopify, WordPress, Wix, Squarespace, Webflow och WooCommerce, samt webbplatser som tillåter den installationskod som krävs. Kontrollera den uppdaterade dokumentationen för varje plattform.
Hur lång tid tar det att installera CompleteGreet i en Shopify-butik?
Tidsåtgången beror på videon, utseendet, handlingarna och testningen. Shopify kan använda en egen app eller en annan installationsmetod än Squarespace, så följ den aktuella vägledningen.
Vad händer om webbplatsen får fler besökare än abonnemanget tillåter?
Räkningen och hanteringen av extra trafik följer det aktuella abonnemanget och villkoren. Kontrollera vad som händer nära och över gränsen innan du väljer abonnemang.
Passar CompleteGreet för kundfeedback eller bara hälsningar?
CompleteGreet passar för videohälsningar, enkla formulär och tydliga handlingar. En separat undersökningsplattform kan passa bättre om du behöver långa formulär med många förgreningar.
Tar CompleteGreet extra betalt vid en trafikökning?
Abonnemangen har gränser för unika besökare. Kontrollera de aktuella villkoren och hur ett byte av abonnemang eller extra trafik hanteras före en kampanj eller säsongstopp.
