Indholdsfortegnelse
Kort fortalt
- Du kan føje en videoboble til Webflow med ét script. Det faktiske tidsforbrug afhænger af videoen, abonnementet, samtykket og den nødvendige test.
- I CompleteGreet kan du styre, hvem der ser videoboblen, hvad der sker, når de klikker, og hvordan den ser ud på dit Webflow-websted.
- Gennemgå en kort tjekliste, før du udgiver. Den hjælper dig med at finde fejl, som mange teams ellers overser.
Kort fortalt indsætter du scriptet fra CompleteGreet i indstillingerne for dit Webflow-projekt og udgiver webstedet. Kontrollér derefter boblen på de sider, hvor den skal vises.
En enkel installation kan gå hurtigt, men du skal også afsætte tid til video, design, samtykke, regler og test. Normalt behøver du ikke indsætte kode på hver enkelt side.
CompleteGreet bruger de abonnementer og grænser, der fremgår af den aktuelle prisside og din konto. Brug ikke gamle priser, rabatter eller regler for ekstra forbrug som grundlag for dit valg. Sammenlign det forventede antal besøgende med den kapacitet og de funktioner, der faktisk er inkluderet nu, især hvis trafikken varierer gennem året eller stiger under en kampagne.
Adgang til brugerdefineret kode på et udgivet domæne afhænger af det aktuelle Webflow-abonnement. Du kan bruge et egnet testdomæne, når abonnementet og opsætningen tillader det.
Farve, placering og handlingsknapper kan tilpasses, uden at du skriver din egen CSS. Kontrollér dog altid resultatet i webstedets rigtige design.
CompleteGreet er først og fremmest lavet til videohilsner og enkle handlinger, ikke komplicerede undersøgelser. På Webflow kan løsningen give webstedet et menneskeligt præg uden at gøre brugerrejsen unødigt tung.
Hvordan installerer du CompleteGreet på Webflow?
At føje en videoboble til et Webflow-websted kræver et script og en test af den udgivne side. Adgang til brugerdefineret kode på et aktivt domæne afhænger af det aktuelle Webflow-abonnement, mens et testdomæne kan bruges, når opsætningen understøtter det.

Følg disse trin:
-
Log ind i CompleteGreet, og opret widgetten. Vælg videoen, skriv en kort hilsen, og indstil, hvordan den skal vises.
-
Gem widgetten, og åbn området med installationskoden. Kopiér hele scriptet, der hører til den rigtige widget og det rigtige websted.
-
Åbn Webflow-projektet, gå til projektindstillingerne, og find området til brugerdefineret kode. Indsæt CompleteGreet-scriptet på det sted, der anbefales i den opdaterede dokumentation.
-
Gem indstillingerne, og udgiv webstedet. Brugerdefineret kode kører ikke nødvendigvis i forhåndsvisningen i designværktøjet, så kontrollér den udgivne adresse eller testdomænet.
Det skaber ofte forvirring: Webflow kører brugerdefineret kode på udgivne sider, men ikke altid i designværktøjet eller en skrivebeskyttet forhåndsvisning. Det officielle hjælpecenter fra Webflow forklarer dette. Hvis boblen ikke vises, mens du redigerer, bør du åbne den udgivne adresse og kontrollere den der.
Efter udgivelsen bør du genindlæse siden uden gammel cache, så du ser de nyeste ressourcer.
Boblen skal vises på den valgte placering uden at dække vigtigt indhold eller starte lyd uden en handling fra den besøgende.
Hvad kan du tilpasse i Webflow?
Du kan styre målgruppe, sider, handlinger og boblens udseende. Hvilke muligheder der findes, afhænger af den aktuelle version og abonnementet.
Sider og målgrupper
Regler for sider gør det muligt at vise en hilsen på for eksempel prissiden uden at vise den i hele bloggen. Begynd med nogle få vigtige sider, og test både medtagelser og undtagelser.
Hvis den nuværende opsætning understøtter det, kan nye og tilbagevendende besøgende få forskellige beskeder.
Du kan også overveje målgrupper baseret på trafikkilde. Brug dem kun, når sporing, samtykke og funktionen er kontrolleret på kontoen.
Handlingsknapper og formularer
En knap kan åbne en kalender, en download eller en anden side. Vælg en tydelig tekst, der passer til siden, og mål den faktiske handling.
Test én variant ad gangen på rigtig trafik. Du behøver ikke ændre Webflow-koden for at justere teksten i CompleteGreet.
De formularer, der er tilgængelige i widgetten, kan indsamle kontaktoplysninger uden at sende den besøgende væk fra siden. Kontrollér felter, obligatoriske oplysninger, samtykke og lagring i den aktuelle opsætning.
Kontrollér i CompleteGreet, at hver testindsendelse bliver registreret det rigtige sted.
Kontrollér også notifikationer og understøttede integrationer, før du udgiver. Send ikke en rigtig ekstern forespørgsel uden særskilt tilladelse.
Visuel identitet og placering
Tilpas logo, farver, miniaturebillede og placering med de muligheder, der findes nu. Boblen skal holde afstand til menu, samtykkebanner, chat og vigtige knapper.
Kontrollér hjørner, skygge og den første hilsen i den visuelle editor. Hold teksten kort på små skærme, men brug det rigtige design som facit.
Glem ikke mobilvisningen. Brug en mere kompakt variant, eller skjul boblen på små skærme, hvis funktionen findes og giver mening. Test de faktiske skærmbredder i projektet.
En generisk boble kan føles som et fremmed pop op-vindue. De rigtige farver, en god placering og en tydelig handling gør den til en mere naturlig del af siden. Se også vores sammenligning af videowidgets for flere ting, du bør overveje.
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;
}
}
Føj en videoboble til Webflow
Fire trin til at installere CompleteGreet på et Webflow-websted
Kopiér installationskoden
Log ind i CompleteGreet, og kopiér den kode, der hører til widgetten og webstedet.
Eksempel på CompleteGreet-kode, der er knyttet til webstedet Åbn projektindstillingerne
Vælg projektet i Webflow, og åbn Projektindstillinger i menuen.
Indsæt brugerdefineret kode
Åbn fanen Brugerdefineret kode og indsæt CompleteGreet-scriptet i det anbefalede område i den opdaterede dokumentation.
Kommentar, der markerer CompleteGreet-videoboblen
CompleteGreet-script knyttet til webstedet Gem og udgiv
Vælg Gem ændringer, udgiv webstedet, og kontrollér boblen på de valgte sider.
Se den statiske oversigt ovenfor for alle trin.
Hvad bør du kontrollere, før du udgiver?
Før du udgiver, bør du gennemgå hele opsætningen i flere browsere på en computer. Åbn den udgivne side i de browsere, som målgruppen bruger, og kontrollér placering, afspilning, lukkeknap, undertekster og samspillet med andre faste elementer. Sørg især for, at videoboblen vises i det rigtige hjørne, reagerer på klik og ikke dækker navigation, samtykkebanner eller vigtige knapper.
Mobiltest er lige så vigtig. Hvor stor en del af trafikken der kommer fra telefoner, varierer, så brug dine egne data, og test altid widgetten på små skærme.
Åbn webstedet i Safari på iOS og Chrome på Android. Boblen skal tilpasse sig skærmen, afspille videoen som forventet og have en lukkeknap, der er nem at nå. Justér placeringen, hvis den dækker menuen eller betalingen.
Kontrollér derefter reglerne for siderne.
Sørg for, at widgetten kun indlæses, hvor den hjælper. Test hver adresseregel, også varianter med og uden afsluttende skråstreg, og udelad sider, hvor boblen kan forstyrre en vigtig handling.
Mål også ydeevnen. Video og scripts føjer ressourcer til siden. Følg Googles vejledning om Web Vitals og sammenlign siden før og efter installationen. Hvis resultaterne bliver dårligere, bør du kontrollere indlæsningen af scriptet, videoformatet, filstørrelsen og startadfærden.
Test hele formularforløbet med egnede testdata. Bekræft, at data bliver gemt og leveret som planlagt, før du betragter opsætningen som færdig.
Udgiv først, når placering, regler, tilgængelighed, ydeevne og eventuelle formularer er kontrolleret.
En videoboble kan vise mennesket bag et Webflow-websted uden at ændre hele designet. Effekten på tillid og handlinger skal måles på den faktiske trafik.
Tilpas udseendet
Efter installationen styrer du størrelse, placering og den første hilsen fra CompleteGreet. Kontrollér altid, at boblen ikke støder sammen med menu, faste elementer eller mobilkontroller.
Visningsregler kan begrænse boblen til bestemte sider og forsinke visningen, når det understøttes. Test virkningen i stedet for at antage, at én indstilling passer til alle besøgende.
Forbind formularer og handlingsknapper
Hvis du vil forbinde widgetten med en Webflow-formular eller et mailværktøj, skal du bruge en integration, der faktisk understøttes. Kontrollér felter, samtykke, mål og notifikationer med godkendte testdata.
Test, før du udgiver
Prøv boblen på computer og mobil. Kontrollér indlæsning, lyd, undertekster, tastatur, fokus og lukkeknap. Følg også W3C’s retningslinjer for tilgængelighed så personer, der bruger tastatur eller hjælpeteknologi, kan styre eller springe widgetten over.
Ofte stillede spørgsmål
Hvad koster CompleteGreet, og hvad indeholder abonnementet?
Pris, antal besøgende, websteder, bobler og inkluderede funktioner afhænger af det aktuelle abonnement. Årsbetaling, rabatter og grænserne for hvert abonnement kan ændre sig. Kontrollér derfor prissiden, vilkårene og din konto, før du sammenligner alternativer. Se også, hvordan tilbagevendende besøg, ekstra trafik og eventuelle ændringer af abonnement håndteres, så budgettet bygger på de nuværende regler.
Fungerer CompleteGreet med Shopify, WordPress og specialbyggede React-websteder?
CompleteGreet kan bruges på understøttede platforme som Shopify, WordPress, Wix, Squarespace, Webflow og WooCommerce samt på specialbyggede websteder, der accepterer den nødvendige kode. Installationsmetoden kan være en app, en integration eller et script. Kontrollér den opdaterede dokumentation, samtykket, temaet og resultatet på hver platform. Antag ikke, at de samme funktioner eller den samme indlæsningsmetode gælder overalt.
Hvor lang tid tager det at sætte CompleteGreet op på et websted?
Tidsforbruget afhænger af videoen, platformen, designet, samtykket, visningsreglerne og den nødvendige test. En enkel installation kan gå hurtigt, men du skal også afsætte tid til optagelse, undertekster, miniaturebillede, mobilvisning og kontrol af formularer. Brug den installationsmetode, der fremgår af den opdaterede dokumentation til platformen. Et bestemt tidsforbrug eller en automatisk ydelse kan ikke garanteres, før den rigtige side er testet.
Hvilke virksomheder bør vælge CompleteGreet frem for livechat?
Løsningen kan passe til servicevirksomheder, rådgivere, konsulenter og webshops, der vil vise et rigtigt menneske, før den besøgende tager kontakt. En kort videohilsen kan forklare tilbuddet eller pege på næste handling, men effekten skal måles på webstedet. Hvis en øjeblikkelig samtale med en medarbejder er nødvendig, kan livechat være et bedre valg. Virksomheder med komplicerede spørgsmål eller bemandet support bør overveje, om de har brug for begge dele.
Hvordan tæller CompleteGreet unikke besøgende ved fakturering?
Optællingen følger definitionen og reglerne i det aktuelle abonnement. Kontrollér, hvordan en unik besøgende defineres, hvilken periode der bruges, og hvordan tilbagevendende besøg, forskellige enheder og flere videoafspilninger behandles. Se også, hvad der sker, når trafikken nærmer sig eller overskrider grænsen. Brug ikke en ældre artikel som facit for faktureringen, da abonnementer og vilkår kan ændre sig.
Hvilke begrænsninger bør jeg kende, før jeg vælger CompleteGreet?
CompleteGreet er lavet til videohilsner, opbygning af tillid og enkle handlinger. Det er ikke et værktøj til komplicerede undersøgelser, lange betingede formularer eller direkte tovejschat. Hvis du har brug for mange forgreninger, avanceret dataindsamling eller en løbende samtale med en medarbejder, bør du vælge et specialiseret værktøj. Kontrollér også de aktuelle grænser, integrationer, krav til tilgængelighed og privatliv, før du beslutter dig.
