Indholdsfortegnelse
Kort fortalt
- Installationen kan være enkel, men tidsforbruget afhænger af temaet, adgangen og hvor grundigt du tester. Du behøver ikke nødvendigvis selv at skrive kode.
- I CompleteGreets kontrolpanel kan du styre, hvor widgetten vises i butikken, og hvordan den opfører sig, inden for funktionerne i den aktuelle løsning.
- Før du udgiver, bør du teste på rigtige telefoner og tablets, ikke kun ændre størrelsen på browservinduet. Kontrollér også, at sidereglerne kun viser widgetten på de webadresser, du har valgt.
Hvordan installerer du CompleteGreet i WooCommerce?
Installationen kan gå hurtigt i en standardopsætning, men der findes ikke et fast tidsforbrug, der gælder for alle butikker. Du kan ofte gennemføre arbejdet uden programmeringsviden.

Åbn WordPress-kontrolpanelet, og find området, hvor temaet eller brugerdefineret kode administreres. Menunavne og adgang kan variere mellem temaer og løsninger.
En videoboble indlæses normalt med en lille integrationskode i webstedets sidehoved eller sidefod. Vælg den metode, der anbefales til din WordPress- og WooCommerce-opsætning.
- Hvis du redigerer temafiler direkte, skal du først finde den rigtige fil i det aktive child theme. Den officielle dokumentation fra WooCommerce anbefaler, at du bruger et child theme og tager en sikkerhedskopi, før du ændrer skabelonfiler. Test altid integrationen i et sikkert miljø, før du udgiver.
- Find den placering, som den aktuelle installationsvejledning angiver til integrationskoden.
- Hent den aktuelle CompleteGreet-kode fra din konto, og indsæt den med den anbefalede metode.
- Gem ændringerne.
- Åbn butikken i et privat browservindue, og kontrollér, at boblen vises, hvor du forventer.
Hvis du bruger cache fra for eksempel WP Rocket eller LiteSpeed Cache, bør du rydde den før testen. Ellers kan du se en ældre version af siden.
Nogle WooCommerce-butikker på administreret hosting tillader ikke direkte redigering af temafiler.
Her kan en anerkendt løsning til kode i sidehoved og sidefod være et alternativ. Indsæt CompleteGreet-koden i det rigtige felt, og kontrollér, at metoden er kompatibel med temaet og sikkerhedsreglerne på webstedet.
Hvad kan du tilpasse i WooCommerce?
Når opsætningen er på plads, kan du bruge de tilgængelige indstillinger til at styre, hvor widgetten vises, og hvordan den ser ud i butikken.

Målretning efter side og besøgende
Sideregler kan bruges til at vise widgetten på udvalgte produktsider, butikssider eller andre dele af kataloget. Kontrollér, hvilke regler der findes i det aktuelle abonnement.
Andre betingelser kan afhænge af løsningen og abonnementet, for eksempel besøgsstatus, UTM-kilde eller henvisende domæne. Test hver regel før udgivelse i stedet for at antage, at ændringer træder i kraft med det samme.
Opsætning af handlingsknap
Du kan tilpasse knapteksten og vælge en handling blandt de muligheder, der findes på din konto, for eksempel at åbne en webadresse eller starte andet indhold.
Farver kan tilpasses, så widgetten passer bedre til butikkens tema, hvis mulighederne findes i dit abonnement.
Formularfelter og indsamling af henvendelser
Hvis løsningen tilbyder formularer, kan du vælge, hvilke felter og etiketter der vises. Obligatoriske felter skal testes, så indsendelsen fungerer som forventet.
Kontrollér selv, hvordan valideringen håndterer tomme, ugyldige og uønskede indsendelser.
Visuel identitet og placering
Brug farver, tekst og baggrunde, der følger den visuelle identitet. Prøv forskellige hjørner, og vælg en placering, der ikke dækker vigtige knapper eller produktoplysninger.
Vælg et miniaturebillede, der ser naturligt ud før afspilning. Kontrollér, hvordan beskæringen fungerer på ansigter og små skærme.
Disse værktøjer til videobobler kan fungere med mange WooCommerce-temaer, men kompatibiliteten skal bekræftes i det faktiske tema og efter opdateringer af temaet.
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;
}
}
Illustration af et eksempel på opsætning af en videowidget i WooCommerce, fra konto og installation til forbindelse og aktivering.
CompleteGreet til WooCommerce
Eksempel på opsætning i fire trin
Opret en CompleteGreet-konto
Opret en konto, og kontrollér, hvilken integrationsmetode der anbefales til WooCommerce i det aktuelle kontrolpanel.
Vælg installationsmetode
Brug den anbefalede integration eller en kontrolleret kodeplacering. Redigér ikke temafiler uden en sikkerhedskopi og et child theme.
Hent den aktuelle integrationskode fra din CompleteGreet-konto.
Forbind butikken
Følg den aktuelle vejledning på din konto, og del aldrig private nøgler eller adgangsoplysninger i offentlig kode.
Indsæt nøglen i det beskyttede felt, der er beregnet til integrationen.
Aktivér og konfigurér
Aktivér widgetten, og tilpas placering, udløsere og videoindhold. Test alle valg, før du udgiver.
Kilde: Eksempel på opsætning baseret på artiklens arbejdsgang
Se den statiske oversigt ovenfor for hele arbejdsgangen.
Hvad bør du kontrollere, før du udgiver?
Test på rigtige enheder, før du aktiverer widgetten for alle. Kontrollér også, at sidereglerne begrænser visningen til de webadresser, du faktisk har valgt.
Test på flere enheder end en computer
Browsere på computer og mobil håndterer videobobler forskelligt. Et miniaturebillede, der ser lille ud på en stor skærm, kan dække meget på en kompakt telefon. Åbn derfor webstedet på rigtige telefoner, og kontrollér, at lukkeknappen er nem at trykke på.
iOS begrænser automatisk afspilning med lyd. Lad derfor hilsenen starte uden lyd, eller vent, til den besøgende selv trykker på afspilningsknappen.
Kontrollér logikken i sidereglerne
Mange fejl opstår i målretningen. Du kan for eksempel have valgt sider under /shop/, mens produktsiderne i din opsætning bruger /product/ eller en lokaliseret struktur.
Hvis widgetten vises oven på kassen, kan den forstyrre kunder, der prøver at betale. Udelad kassen, når det er nødvendigt.
Gennemgå visningsreglerne én ad gangen. Test flere sidetyper, blandt andet produkter, kategorier, kurv og kasse, og kontrollér, at logikken er korrekt.
Kontrollér også indlæsningstiden. En videoboble føjer ressourcer til siden, og WooCommerce-butikker har ofte allerede store produktbilleder og scripts til kurven. Mål derfor en repræsentativ side med PageSpeed Insights.
Sammenlign målingerne med den aktuelle vejledning om Google Web Vitals . Hvis widgetten påvirker en vigtig måling, kan du teste udskudt indlæsning eller vente med aktiveringen, til den besøgende er begyndt at rulle.
Kontrollér også, om widgetten overlapper lysboksen til produktbilleder eller en kurv, der trækkes ud. Hvis elementerne åbner bag videoboblen, skal lagrækkefølgen justeres og testes igen.
WooCommerce-butikker sælger visuelt, og købere kan tøve, når de ikke ser produktet i brug eller får svar på et spørgsmål. En videowidget kan give en mere personlig forklaring direkte i købsoplevelsen.
Historiske eksempler kan vise, hvilke indikatorer andre butikker har fulgt, men de kan ikke bruges som garanti for din butik.
Indikatorer, du bør følge
Mål antallet af kvalificerede henvendelser før og efter testen. Resultatet afhænger af trafikken, budskabet, produkterne og placeringen, så brug ikke en generel procentsats som forventning.
Følg også afvisningsprocent og indlæsningstid. En hurtig og diskret oplevelse kan være vigtigere end høj produktionsværdi, men effekten skal dokumenteres med dine egne målinger.
Forudsætninger for installation
Du har normalt brug for administratorrettigheder i WordPress og en understøttet WooCommerce-version. Kontrollér kravene i den aktuelle dokumentation, før du installerer.
Hvis opsætningen tilbyder direkte video eller funktioner, der bruger WebRTC, skal du undersøge, om hostingmiljøet understøtter de nødvendige forbindelser. Det gælder kun funktioner, der faktisk bruges.
Læs den officielle dokumentation fra WordPress og WooCommerce om aktuelle serverkrav og sikker praksis, før du aktiverer nye udvidelser.
Antag ikke, at en bestemt trafikmængde, pris eller stigning i konverteringer giver hurtig tilbagebetaling. Beregn omkostning og værdi med det aktuelle abonnement, dine egne marginer og kvalificerede henvendelser.
Begynd gerne på sider med tydelig købsintention, for eksempel produktdetaljer og kurv. Sammenlign resultatet med en kontrolperiode, før du viser widgetten på hele webstedet.
Ofte stillede spørgsmål
Hvordan føjer jeg CompleteGreet til WooCommerce uden at ændre kassekoden?
Brug den integrationsmetode, der anbefales i den aktuelle vejledning, for eksempel en kontrolleret kodeplacering eller en kompatibel udvidelse. Udelad kassen med sideregler, hvis du ønsker det, og test betalingsforløbet før udgivelse.
Hvorfor vises CompleteGreet-boblen ikke i forhåndsvisningen af WooCommerce-temaet?
Nogle temaer indlæser forhåndsvisningen i en ramme eller med cache, der kan blokere eksterne scripts. Test en sikker, udgivet testside, og kontrollér konsol, cache og samtykkeindstillinger, før du konkluderer.
Kan CompleteGreet kun vises på produktsider og skjules i kurven?
Brug de sideregler, der findes på kontoen, til at medtage de rigtige produktadresser og udelade kurv og kasse. Webadresserne kan være lokaliserede, så test alle relevante sidetyper.
Gør CompleteGreet en WooCommerce-butik langsommere?
Enhver ekstra ressource kan påvirke ydeevnen. Mål repræsentative sider før og efter installationen på både mobil og computer. Kontrollér Core Web Vitals, produktbilleder, cache og hvornår widgetten indlæses.
Hvordan sammenlignes prisen på CompleteGreet med videowidgets, der tager betaling pr. minut?
Pris og beregningsmodel kan ændre sig. Sammenlign det aktuelle CompleteGreet-abonnement med alternativerne ud fra reel trafik, websteder, funktioner og eventuelle grænser. Stol ikke på en gammel prisforskel.
Passer CompleteGreet til en WooCommerce-butik, der sælger dyre produkter?
En personlig videohilsen kan være værd at teste, når købet kræver meget overvejelse, men højere konvertering er ikke garanteret. Brug videoen til at besvare et konkret spørgsmål, og mål kvalificerede henvendelser og gennemførte køb.
