Innholdsfortegnelse
Kort fortalt
- Du kan legge til en videoboble på Webflow med ett skript. Den faktiske tidsbruken avhenger av videoen, planen, samtykket og testingen.
- I CompleteGreet kan du styre hvem som ser videoboblen, hva som skjer når de klikker, og hvordan den ser ut på Webflow nettstedet.
- Gå gjennom en kort sjekkliste før du publiserer. Den fanger opp feil som mange team ellers overser.
Kort forklart legger du skriptet fra CompleteGreet inn i innstillingene for Webflow prosjektet og publiserer nettstedet. Kontroller deretter boblen på de sidene der den skal vises.
En enkel installasjon kan gå raskt, men du må også beregne tid til video, design, samtykke, regler og testing. Du trenger vanligvis ikke å legge inn kode på hver enkelt side.
CompleteGreet bruker planene og grensene som vises på den gjeldende prissiden og i kontoen. Ikke legg gamle priser, rabatter eller regler for ekstra bruk til grunn for valget. Sammenlign forventet antall besøkende med den kapasiteten og de funksjonene som faktisk er inkludert nå, særlig hvis trafikken varierer gjennom året eller øker under en kampanje.
Tilgang til egendefinert kode på et publisert domene avhenger av den gjeldende Webflow planen. Du kan bruke et egnet testdomene når planen og oppsettet tillater det.
Farge, plassering og handlingsknapper kan tilpasses uten at du skriver egen CSS. Kontroller likevel resultatet mot den virkelige utformingen på nettstedet.
CompleteGreet er først og fremst laget for videohilsener og enkle handlinger, ikke kompliserte undersøkelser. På Webflow kan løsningen gi nettstedet et menneskelig preg uten å gjøre brukerreisen unødvendig tung.
Hvordan installerer du CompleteGreet på Webflow?
Å legge til en videoboble på et Webflow nettsted krever et skript og en publisert test. Tilgang til egendefinert kode på et aktivt domene avhenger av den gjeldende Webflow planen, mens et testdomene kan brukes når oppsettet støtter det.

Følg disse trinnene:
-
Logg inn i CompleteGreet og opprett widgeten. Velg video, skriv en kort hilsen og sett opp hvordan den skal vises.
-
Lagre widgeten og åpne delen med installasjonskoden. Kopier hele skriptet som er knyttet til riktig widget og nettsted.
-
Åpne Webflow prosjektet, gå til prosjektinnstillingene og finn delen for egendefinert kode. Legg CompleteGreet skriptet på stedet som anbefales i den oppdaterte dokumentasjonen.
-
Lagre innstillingene og publiser nettstedet. Egendefinert kode kjøres ikke nødvendigvis i forhåndsvisningen i designverktøyet, så kontroller den publiserte adressen eller testdomenet.
Dette skaper ofte forvirring: Webflow kjører egendefinert kode på publiserte sider, ikke alltid i designverktøyet eller skrivebeskyttet forhåndsvisning. Det offisielle hjelpesenteret til Webflow forklarer dette. Hvis boblen ikke vises mens du redigerer, bør du åpne den publiserte adressen og kontrollere den der.
Etter publisering bør du laste siden på nytt uten gammel buffer, slik at du ser de nyeste ressursene.
Boblen skal vises i plasseringen du har valgt, uten å dekke viktig innhold eller starte lyd uten en handling fra den besøkende.
Hva kan du tilpasse i Webflow?
Du kan styre publikum, sider, handlinger og utseendet til boblen. Hvilke valg som finnes, avhenger av den gjeldende versjonen og planen.
Sider og publikum
Regler for sider gjør det mulig å vise en hilsen på for eksempel prissiden uten å vise den i hele bloggen. Begynn med noen få viktige sider og test både inkluderinger og unntak.
Hvis dagens oppsett støtter det, kan nye og tilbakevendende besøkende få ulike meldinger.
Du kan også vurdere målgrupper basert på trafikkilde. Bruk dem bare når sporingen, samtykket og funksjonen er kontrollert i kontoen.
Handlingsknapper og skjemaer
En knapp kan åpne en kalender, en nedlasting eller en annen side. Velg en tydelig tekst som passer til siden, og mål den faktiske handlingen.
Test én variant om gangen på reell trafikk. Du trenger ikke å endre Webflow koden for å justere teksten i CompleteGreet.
Skjemaene som er tilgjengelige i widgeten, kan samle inn kontaktopplysninger uten å sende den besøkende bort fra siden. Kontroller felter, obligatoriske opplysninger, samtykke og lagring i dagens oppsett.
Kontroller i CompleteGreet at hver testinnsending blir registrert på riktig sted.
Kontroller også varsler og støttede integrasjoner før publisering. Ikke send en ekte ekstern forespørsel uten særskilt tillatelse.
Visuell profil og plassering
Tilpass logo, farger, miniatyrbilde og plassering med valgene som finnes nå. Boblen må holde avstand til meny, samtykkebanner, chat og viktige knapper.
Kontroller hjørner, skygge og den første hilsenen i den visuelle redigeringen. Hold teksten kort på små skjermer, men bruk den virkelige utformingen som fasit.
Ikke glem mobilvisningen. Bruk en mer kompakt variant eller skjul boblen på små skjermer hvis funksjonen finnes og det gir mening. Test de faktiske skjermbreddene i prosjektet.
En generisk boble kan føles som et fremmed sprettoppvindu. Riktige farger, god plassering og en tydelig handling gjør den til en mer naturlig del av siden. Se også vår sammenligning av videowidgeter for flere vurderingspunkter.
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-PL2 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL2 .cg-header {
padding: 24px 24px 16px;
text-align: center;
}
#cg-ig-PL2 .cg-header h2 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
line-height: 1.3;
}
#cg-ig-PL2 .cg-header p {
margin: 0;
font-size: 14px;
color: #7a7a96;
line-height: 1.5;
}
#cg-ig-PL2 .cg-steps {
padding: 0 24px 24px;
}
#cg-ig-PL2 .cg-step {
display: flex;
gap: 16px;
margin-bottom: 20px;
}
#cg-ig-PL2 .cg-step:last-child {
margin-bottom: 0;
}
#cg-ig-PL2 .cg-step-number {
flex-shrink: 0;
width: 36px;
height: 36px;
background: #3D5ACE;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
}
#cg-ig-PL2 .cg-step-content {
flex: 1;
padding-top: 6px;
}
#cg-ig-PL2 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px;
}
#cg-ig-PL2 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 10px;
line-height: 1.5;
}
#cg-ig-PL2 .cg-code-block {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 14px;
position: relative;
margin-top: 8px;
}
#cg-ig-PL2 .cg-code-block code {
display: block;
font-family: “SF Mono”, Monaco, “Cascadia Code”, monospace;
font-size: 12px;
color: #e2e2ea;
line-height: 1.6;
word-break: break-all;
}
#cg-ig-PL2 .cg-code-label {
position: absolute;
top: 8px;
right: 10px;
font-size: 10px;
color: #7a7a96;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#cg-ig-PL2 .cg-copy-btn {
position: absolute;
top: 8px;
right: 10px;
background: #3D5ACE;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
}
#cg-ig-PL2 .cg-cta {
padding: 0 24px 24px;
text-align: center;
}
#cg-ig-PL2 .cg-cta a {
display: inline-block;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
padding: 14px 28px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL2 .cg-cta a:hover {
background: #2f48a8;
}
#cg-ig-PL2 .cg-source {
padding: 0 24px 20px;
text-align: center;
font-size: 11px;
color: #7a7a96;
}
#cg-ig-PL2 .cg-source a {
color: #3D5ACE;
text-decoration: none;
}
#cg-ig-PL2 .cg-highlight {
color: #E48333;
font-weight: 600;
}
@media (max-width: 480px) {
#cg-ig-PL2 .cg-header,
#cg-ig-PL2 .cg-steps,
#cg-ig-PL2 .cg-cta,
#cg-ig-PL2 .cg-source {
padding-left: 16px;
padding-right: 16px;
}
#cg-ig-PL2 .cg-header h2 {
font-size: 18px;
}
#cg-ig-PL2 .cg-step {
gap: 12px;
}
#cg-ig-PL2 .cg-step-number {
width: 32px;
height: 32px;
font-size: 13px;
}
}
Legg til en videoboble på Webflow
Fire trinn for å installere CompleteGreet på et Webflow nettsted
Kopier installasjonskoden
Logg inn i CompleteGreet og kopier koden som er knyttet til widgeten og nettstedet.
Eksempel på CompleteGreet kode som er knyttet til nettstedet Åpne prosjektinnstillingene
Velg prosjektet i Webflow og åpne Project Settings i menyen.
Legg inn egendefinert kode
Åpne fanen Custom Code og legg CompleteGreet skriptet i området som anbefales i den oppdaterte dokumentasjonen.
Kommentar som markerer CompleteGreet videoboblen
CompleteGreet skript knyttet til nettstedet Lagre og publiser
Velg Save Changes, publiser nettstedet og kontroller boblen på de valgte sidene.
Se den statiske oversikten ovenfor for alle trinnene.
Hva bør du kontrollere før publisering?
Før du publiserer, bør du gå gjennom hele oppsettet i flere nettlesere på datamaskin. Åpne den publiserte siden i nettleserne målgruppen bruker, og kontroller plassering, avspilling, lukkeknapp, teksting og samspill med andre faste elementer. Sørg spesielt for at videoboblen vises i riktig hjørne, reagerer på klikk og ikke dekker navigasjon, samtykkebanner eller viktige knapper.
Mobiltesting er like viktig. Hvor stor del av trafikken som kommer fra telefon, varierer, så bruk egne data og test alltid widgeten på små skjermer.
Åpne nettstedet i Safari på iOS og Chrome på Android. Boblen skal tilpasse seg skjermen, spille av videoen som forventet og ha en lukkeknapp som er enkel å nå. Juster plasseringen hvis den dekker meny eller betaling.
Kontroller deretter reglene for sidene.
Sørg for at widgeten bare lastes der den hjelper. Test hver adresseregel, også varianter med og uten avsluttende skråstrek, og utelat sider der boblen kan forstyrre en viktig handling.
Mål også ytelsen. Video og skript legger til ressurser på siden. Følg Googles veiledning om Web Vitals og sammenlign siden før og etter installasjonen. Hvis resultatene blir svakere, bør du kontrollere skriptlastingen, videoformatet, filstørrelsen og startoppførselen.
Test hele skjemaforløpet med egnede testdata. Bekreft at data blir lagret og levert som planlagt før du regner oppsettet som ferdig.
Publiser først når plassering, regler, tilgjengelighet, ytelse og eventuelle skjemaer er kontrollert.
En videoboble kan vise mennesket bak et Webflow nettsted uten å endre hele designet. Effekten på tillit og handlinger må måles på den faktiske trafikken.
Tilpass utseendet
Etter installasjonen styrer du størrelse, plassering og den første hilsenen fra CompleteGreet. Kontroller alltid at boblen ikke kolliderer med meny, faste elementer eller mobilkontroller.
Visningsregler kan begrense boblen til bestemte sider og forsinke visningen når dette støttes. Test virkningen i stedet for å anta at én innstilling passer alle besøkende.
Koble til skjemaer og handlingsknapper
Hvis du vil koble widgeten til et Webflow skjema eller et epostverktøy, må du bruke en integrasjon som faktisk støttes. Kontroller felter, samtykke, mål og varsler med godkjente testdata.
Test før du publiserer
Prøv boblen på datamaskin og mobil. Kontroller innlasting, lyd, teksting, tastatur, fokus og lukkeknapp. Følg også W3Cs retningslinjer for tilgjengelighet slik at personer som bruker tastatur eller hjelpeteknologi, kan styre eller hoppe over widgeten.
Vanlige spørsmål
Hvor mye koster CompleteGreet, og hva inneholder planen?
Pris, antall besøkende, nettsteder, bobler og inkluderte funksjoner avhenger av den gjeldende planen. Årsbetaling, rabatter og grensene for hver plan kan endres. Kontroller derfor prissiden, vilkårene og kontoen før du sammenligner alternativer. Se også hvordan tilbakevendende besøk, ekstra trafikk og eventuelle planendringer håndteres, slik at budsjettet bygger på dagens regler.
Fungerer CompleteGreet med Shopify, WordPress og spesialbygde React nettsteder?
CompleteGreet kan brukes på støttede plattformer som Shopify, WordPress, Wix, Squarespace, Webflow og WooCommerce, samt på spesialbygde nettsteder som godtar den nødvendige koden. Installasjonsmetoden kan være en app, en integrasjon eller et skript. Kontroller den oppdaterte dokumentasjonen, samtykket, temaet og resultatet på hver plattform. Ikke anta at de samme funksjonene eller den samme lastemåten gjelder overalt.
Hvor lang tid tar det å sette opp CompleteGreet på et nettsted?
Tidsbruken avhenger av videoen, plattformen, designet, samtykket, visningsreglene og testingen. En enkel installasjon kan gå raskt, men du må også beregne tid til opptak, teksting, miniatyrbilde, mobilvisning og kontroll av skjemaer. Bruk installasjonsmetoden som vises i den oppdaterte dokumentasjonen for plattformen. Ingen bestemt tidsbruk eller automatisk ytelse kan garanteres før den virkelige siden er testet.
Hvilke virksomheter bør velge CompleteGreet fremfor direktechat?
Løsningen kan passe tjenestebedrifter, rådgivere, konsulenter og nettbutikker som vil vise en ekte person før den besøkende tar kontakt. En kort videohilsen kan forklare tilbudet eller peke på neste handling, men effekten må måles på nettstedet. Hvis en umiddelbar samtale med en medarbeider er nødvendig, kan direktechat være et bedre valg. Virksomheter med kompliserte spørsmål eller bemannet støtte bør vurdere om de trenger begge deler.
Hvordan teller CompleteGreet unike besøkende ved fakturering?
Tellingen følger definisjonen og reglene i den gjeldende planen. Kontroller hvordan en unik besøkende defineres, hvilken periode som brukes, og hvordan tilbakevendende besøk, ulike enheter og flere videovisninger behandles. Se også hva som skjer når trafikken nærmer seg eller passerer grensen. Ikke bruk en eldre artikkel som fasit for faktureringen, siden planene og vilkårene kan endres.
Hvilke begrensninger bør jeg kjenne til før jeg velger CompleteGreet?
CompleteGreet er laget for videohilsener, tillitsbygging og enkle handlinger. Det er ikke et verktøy for kompliserte undersøkelser, lange betingede skjemaer eller direkte toveis chat. Hvis du trenger mange forgreninger, avansert datainnsamling eller en løpende samtale med en medarbeider, bør du velge et spesialisert verktøy. Kontroller også dagens grenser, integrasjoner, tilgjengelighet og personvernkrav før du bestemmer deg.
