Plattformguider 28. mars 2026

Slik legger du til en videoboble i WooCommerce

Slik legger du til og tester en videoboble i WooCommerce, tilpasser plassering og kontrollerer mobilvisning, sideregler og ytelse.

Slik legger du til en videoboble i WooCommerce

Kort fortalt

  • Installasjonen kan være enkel, men tidsbruken avhenger av temaet, tilgangen og hvor grundig du tester. Du trenger ikke nødvendigvis å skrive kode selv.
  • I CompleteGreet-panelet kan du styre hvor widgeten vises i butikken og hvordan den oppfører seg, innenfor funksjonene i den gjeldende løsningen.
  • Før publisering bør du teste på faktiske telefoner og nettbrett, ikke bare endre størrelsen på nettleservinduet. Kontroller også at sidereglene bare viser widgeten på de nettadressene du har valgt.

Hvordan installerer du CompleteGreet i WooCommerce?

Installasjonen kan gå raskt på et standardoppsett, men det finnes ingen fast tidsbruk som gjelder for alle butikker. Du kan ofte fullføre arbeidet uten programmeringskunnskap.

Illustrasjon av hvordan CompleteGreet installeres i WooCommerce

Åpne WordPress-panelet og finn området der temaet eller egendefinert kode administreres. Menynavn og tilgang kan variere mellom temaer og løsninger.

En videoboble lastes vanligvis inn med en liten integrasjonskode i toppteksten eller bunnteksten på nettstedet. Velg metoden som anbefales for ditt WordPress og WooCommerce-oppsett.

  1. Hvis du redigerer temafiler direkte, må du først finne riktig fil i det aktive undertemaet. Den offisielle WooCommerce-dokumentasjonen anbefaler at du bruker et undertema og tar sikkerhetskopi før du endrer malfiler. Test alltid integrasjonen i et trygt miljø før du publiserer.
  2. Finn plasseringen som den gjeldende installasjonsveiledningen angir for integrasjonskoden.
  3. Hent den aktuelle CompleteGreet-koden fra kontoen din og legg den inn med den anbefalte metoden.
  4. Lagre endringene.
  5. Åpne butikken i et privat nettleservindu og kontroller at boblen vises der du forventer.

Hvis du bruker hurtigbuffer fra for eksempel WP Rocket eller LiteSpeed Cache, bør du tømme den før testen. Ellers kan du se en eldre versjon av siden.

Noen WooCommerce-butikker på administrert hosting tillater ikke direkte redigering av temafiler.

Da kan en anerkjent løsning for kode i topptekst og bunntekst være et alternativ. Legg inn CompleteGreet-koden i riktig felt, og kontroller at metoden er kompatibel med temaet og sikkerhetsreglene på nettstedet.

Hva kan du tilpasse i WooCommerce?

Når oppsettet er på plass, kan tilgjengelige innstillinger brukes til å styre hvor widgeten vises og hvordan den ser ut i butikken.

Illustrasjon av hva som kan tilpasses for en videoboble i WooCommerce

Målretting etter side og besøkende

Sideregler kan brukes til å vise widgeten på utvalgte produktsider, handlesider eller andre deler av katalogen. Kontroller hvilke regler som finnes i den gjeldende planen.

Andre betingelser kan avhenge av løsningen og abonnementet, for eksempel besøksstatus, UTM-kilde eller henvisende domene. Test hver regel før publisering i stedet for å anta at endringer gjelder umiddelbart.

Oppsett av handlingsknapp

Du kan tilpasse knappeteksten og velge en handling blant alternativene som er tilgjengelige i kontoen, for eksempel å åpne en nettadresse eller starte annet innhold.

Farger kan tilpasses slik at widgeten passer bedre med butikkens tema, dersom disse valgene finnes i planen din.

Skjemafelt og innsamling av henvendelser

Hvis løsningen tilbyr skjemaer, kan du velge hvilke felt og etiketter som vises. Påkrevde felt må testes slik at innsendingen fungerer som forventet.

Kontroller selv hvordan valideringen håndterer tomme, ugyldige og uønskede innsendinger.

Visuell profil og plassering

Bruk farger, tekst og bakgrunner som følger den visuelle profilen. Prøv ulike hjørner og velg en plassering som ikke dekker viktige knapper eller produktinformasjon.

Velg et miniatyrbilde som ser naturlig ut før avspilling. Kontroller hvordan beskjæringen fungerer på ansikter og på små skjermer.

Disse verktøyene for videobobler kan fungere med mange WooCommerce-temaer, men kompatibiliteten må bekreftes i det faktiske temaet og etter temaoppdateringer.

#cg-ig-PL7 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
position: relative;
overflow: hidden;
}
#cg-ig-PL7::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL7 .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;
}
#cg-ig-PL7 .ig-header {
text-align: center;
margin-bottom: 24px;
}
#cg-ig-PL7 .ig-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
}
#cg-ig-PL7 .ig-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0;
}
#cg-ig-PL7 .progress-bar {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
position: relative;
}
#cg-ig-PL7 .progress-bar::before {
content: ”;
position: absolute;
top: 14px;
left: 40px;
right: 40px;
height: 2px;
background: #e2e2ea;
z-index: 0;
}
#cg-ig-PL7 .progress-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
#cg-ig-PL7 .step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
}
#cg-ig-PL7 .step-label {
font-size: 11px;
color: #4a4a68;
font-weight: 500;
}
#cg-ig-PL7 .steps-container {
display: flex;
flex-direction: column;
gap: 16px;
}
#cg-ig-PL7 .step-card {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 16px;
}
#cg-ig-PL7 .step-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
#cg-ig-PL7 .step-number {
width: 28px;
height: 28px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
#cg-ig-PL7 .step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0;
}
#cg-ig-PL7 .step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL7 .code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px;
position: relative;
margin-top: 8px;
}
#cg-ig-PL7 .code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #f7f7fb;
margin: 0;
word-break: break-all;
line-height: 1.4;
}
#cg-ig-PL7 .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #E48333;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
#cg-ig-PL7 .cta-section {
margin-top: 20px;
text-align: center;
padding-top: 16px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL7 .cta-button {
display: inline-block;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
padding: 12px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
}
#cg-ig-PL7 .cta-button:hover {
background: #2d4ab8;
}
#cg-ig-PL7 .source-line {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
@media (max-width: 480px) {
#cg-ig-PL7 {
padding: 16px;
}
#cg-ig-PL7 .ig-title {
font-size: 18px;
}
#cg-ig-PL7 .step-label {
font-size: 10px;
}
#cg-ig-PL7 .step-title {
font-size: 14px;
}
}

Illustrasjon av et eksempeloppsett for en videowidget i WooCommerce, fra konto og installasjon til tilkobling og aktivering.

CompleteGreet for WooCommerce

Eksempel på oppsett i fire trinn

1

Konto

2

Installer

3

Koble til

4

Aktiver

1

Opprett en CompleteGreet-konto

Opprett en konto og kontroller hvilken integrasjonsmetode som anbefales for WooCommerce i det gjeldende panelet.

2

Velg installasjonsmetode

Bruk den anbefalte integrasjonen eller en kontrollert kodeplassering. Ikke endre temafiler uten sikkerhetskopi og et undertema.

Hent gjeldende integrasjonskode fra CompleteGreet-kontoen din.

3

Koble til butikken

Følg den aktuelle veiledningen i kontoen, og del aldri private nøkler eller tilgangsdata i offentlig kode.

Legg inn nøkkelen i det beskyttede feltet som er beregnet for integrasjonen.

4

Aktiver og konfigurer

Aktiver widgeten og tilpass plassering, utløsere og videoinnhold. Test alle valg før publisering.

Kilde: eksempeloppsett basert på artikkelens arbeidsflyt

Se den statiske oversikten ovenfor for hele arbeidsflyten.

Hva bør du kontrollere før publisering?

Test på faktiske enheter før du slår på widgeten for alle. Kontroller også at sidereglene begrenser visningen til nettadressene du faktisk har valgt.

Enhetstesting utover datamaskinen

Nettlesere på datamaskin og mobil håndterer videobobler forskjellig. En miniatyr som ser liten ut på en stor skjerm, kan dekke mye av en kompakt telefon. Åpne derfor nettstedet på ekte telefoner og kontroller at lukkeknappen er lett å trykke på.

iOS begrenser automatisk avspilling med lyd. La derfor hilsenen starte uten lyd eller vent til den besøkende selv trykker på avspillingsknappen.

Kontroller logikken i sidereglene

Mange feil oppstår i målrettingen. Du kan for eksempel ha valgt sider under /shop/, mens produktsidene i oppsettet ditt bruker /product/ eller en lokalisert struktur.

Hvis widgeten vises over kassen, kan den forstyrre kunder som prøver å betale. Ekskluder kassen når det er nødvendig.

Gå gjennom visningsreglene én etter én. Test flere sidetyper, blant annet produkter, kategorier, handlekurv og kasse, og kontroller at logikken stemmer.

Kontroller også lastetiden. En videoboble legger til ressurser på siden, og WooCommerce-butikker har ofte allerede store produktbilder og skript for handlekurven. Mål derfor en representativ side med PageSpeed Insights.

Sammenlign målingene med den gjeldende veiledningen for Google Web Vitals . Hvis widgeten påvirker en viktig måling, kan du teste utsatt lasting eller vente med aktiveringen til den besøkende har begynt å bla.

Kontroller også om widgeten overlapper lysboksen for produktbilder eller en uttrekkbar handlekurv. Hvis elementene åpnes bak videoboblen, må lagrekkefølgen justeres og testes på nytt.

WooCommerce-butikker selger visuelt, og kjøpere kan nøle når de ikke ser produktet i bruk eller får svar på et spørsmål. En videowidget kan gi en mer personlig forklaring direkte i kjøpsopplevelsen.

Historiske eksempler kan vise hvilke indikatorer andre butikker har fulgt, men de kan ikke brukes som garanti for din butikk.

Indikatorer å følge

Mål antall kvalifiserte henvendelser før og etter testen. Resultatet avhenger av trafikken, budskapet, produktene og plasseringen, så bruk ikke en generell prosent som forventning.

Følg også fluktfrekvens og lastetid. En rask og diskret opplevelse kan være viktigere enn høy produksjonsverdi, men effekten må dokumenteres med egne målinger.

Forutsetninger for installasjon

Du trenger normalt administratorrettigheter i WordPress og en støttet WooCommerce-versjon. Kontroller kravene i den gjeldende dokumentasjonen før du installerer.

Hvis oppsettet tilbyr direktevideo eller funksjoner som bruker WebRTC, må du undersøke om hostingmiljøet støtter nødvendige forbindelser. Dette gjelder bare funksjoner som faktisk brukes.

Les den offisielle WordPress og WooCommerce-dokumentasjonen for gjeldende serverkrav og sikker praksis før du aktiverer nye utvidelser.

Ikke anta at en bestemt trafikkmengde, pris eller konverteringsøkning gir rask tilbakebetaling. Beregn kostnad og verdi med den aktuelle planen, egne marginer og kvalifiserte henvendelser.

Start gjerne på sider med tydelig kjøpsintensjon, for eksempel produktdetaljer og handlekurv. Sammenlign resultatet med en kontrollperiode før du viser widgeten på hele nettstedet.

Vanlige spørsmål

Hvordan legger jeg til CompleteGreet i WooCommerce uten å endre kassekoden?

Bruk integrasjonsmetoden som anbefales i den gjeldende veiledningen, for eksempel en kontrollert kodeplassering eller en kompatibel utvidelse. Ekskluder kassen med sideregler hvis ønskelig, og test betalingsflyten før publisering.

Hvorfor vises ikke CompleteGreet-boblen i forhåndsvisningen av WooCommerce-temaet?

Noen temaer laster forhåndsvisningen i en ramme eller med hurtigbuffer som kan blokkere eksterne skript. Test en trygg, publisert testside og kontroller konsollen, hurtigbufferen og samtykkeinnstillingene før du konkluderer.

Kan CompleteGreet bare vises på produktsider og skjules i handlekurven?

Bruk sidereglene som er tilgjengelige i kontoen til å inkludere de riktige produktadressene og ekskludere handlekurv og kasse. Nettadressene kan være lokaliserte, så test alle relevante sidetyper.

Gjør CompleteGreet en WooCommerce-butikk tregere?

Enhver ekstra ressurs kan påvirke ytelsen. Mål representative sider før og etter installasjonen på både mobil og datamaskin. Kontroller Core Web Vitals, produktbilder, hurtigbuffer og når widgeten lastes.

Hvordan sammenlignes CompleteGreet-prisen med videowidgets som tar betalt per minutt?

Pris og beregningsmodell kan endres. Sammenlign den gjeldende CompleteGreet-planen med alternativene ut fra reell trafikk, nettsteder, funksjoner og eventuelle grenser. Ikke stol på en gammel kostnadsforskjell.

Passer CompleteGreet for en WooCommerce-butikk som selger dyre produkter?

En personlig videohilsen kan være verdt å teste når kjøpet krever mye vurdering, men høyere konvertering er ikke garantert. Bruk videoen til å svare på et konkret spørsmål, og mål kvalifiserte henvendelser og fullførte kjøp.

Azad Habib

Azad Habib

CEO & Founder of CompleteGreet

Azad Habib is the founder of CompleteGreet. With a background in ecommerce and user experience, he works at the intersection of trust, clarity, and conversion to help businesses make their websites feel more human from the first click.