Profil
Dashboard
Logga ut
Innehållsförteckning
Kort sammanfattning
- Installationen kan vara enkel, men tidsåtgången beror på temat, åtkomsten och hur grundligt du testar. Du behöver inte nödvändigtvis skriva kod själv.
- I CompleteGreet-panelen kan du styra var widgeten visas i butiken och hur den beter sig, inom funktionerna i den aktuella lösningen.
- Före publicering bör du testa på riktiga telefoner och surfplattor, inte bara ändra storleken på webbläsarfönstret. Kontrollera också att sidreglerna bara visar widgeten på de webbadresser du har valt.
Hur installerar du CompleteGreet i WooCommerce?
Installationen kan gå snabbt i en standardkonfiguration, men det finns ingen fast tidsåtgång som gäller för alla butiker. Ofta kan du göra arbetet utan programmeringskunskaper.
Öppna WordPress-panelen och hitta området där temat eller egen kod hanteras. Menynamn och åtkomst kan variera mellan teman och lösningar.
En videobubbla läses vanligtvis in med en liten integrationskod i webbplatsens sidhuvud eller sidfot. Välj den metod som rekommenderas för din WordPress- och WooCommerce-konfiguration.
- Om du redigerar temafiler direkt måste du först hitta rätt fil i det aktiva barntemat. Den officiella dokumentationen från WooCommerce rekommenderar att du använder ett barntema och tar en säkerhetskopia innan du ändrar mallfiler. Testa alltid integrationen i en säker miljö före publicering.
- Hitta den plats som den aktuella installationsguiden anger för integrationskoden.
- Hämta den aktuella CompleteGreet-koden från ditt konto och lägg in den med den rekommenderade metoden.
- Spara ändringarna.
- Öppna butiken i ett privat webbläsarfönster och kontrollera att bubblan visas där du förväntar dig.
Om du använder cache från till exempel WP Rocket eller LiteSpeed Cache bör du tömma den före testet. Annars kan du se en äldre version av sidan.
Vissa WooCommerce-butiker med hanterad hosting tillåter inte direkt redigering av temafiler.
Då kan en välrenommerad lösning för kod i sidhuvud och sidfot vara ett alternativ. Lägg in CompleteGreet-koden i rätt fält och kontrollera att metoden är kompatibel med temat och webbplatsens säkerhetsregler.
Vad kan du anpassa i WooCommerce?
När installationen är klar kan du använda de tillgängliga inställningarna för att styra var widgeten visas och hur den ser ut i butiken.
Inriktning efter sida och besökare
Sidregler kan användas för att visa widgeten på valda produktsidor, butikssidor eller andra delar av katalogen. Kontrollera vilka regler som finns i det aktuella abonnemanget.
Andra villkor kan bero på lösningen och abonnemanget, till exempel besökarstatus, UTM-källa eller hänvisande domän. Testa varje regel före publicering i stället för att anta att ändringar slår igenom direkt.
Inställning av handlingsknapp
Du kan anpassa knapptexten och välja en handling bland alternativen som finns i kontot, till exempel att öppna en webbadress eller starta annat innehåll.
Färger kan anpassas så att widgeten passar bättre med butikens tema, om de valen finns i ditt abonnemang.
Formulärfält och insamling av förfrågningar
Om lösningen erbjuder formulär kan du välja vilka fält och etiketter som visas. Obligatoriska fält måste testas så att inskickningen fungerar som förväntat.
Kontrollera själv hur valideringen hanterar tomma, ogiltiga och oönskade inskickningar.
Visuell profil och placering
Använd färger, text och bakgrunder som följer den visuella profilen. Prova olika hörn och välj en placering som inte täcker viktiga knappar eller produktinformation.
Välj en miniatyrbild som ser naturlig ut före uppspelning. Kontrollera hur beskärningen fungerar för ansikten och på små skärmar.
De här verktygen för videobubblor kan fungera med många WooCommerce-teman, men kompatibiliteten måste bekräftas i det faktiska temat och efter temauppdateringar.
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 av ett exempel på installation av en videowidget i WooCommerce, från konto och installation till anslutning och aktivering.
CompleteGreet för WooCommerce
Exempel på installation i fyra steg
Skapa ett CompleteGreet-konto
Skapa ett konto och kontrollera vilken integrationsmetod som rekommenderas för WooCommerce i den aktuella panelen.
Välj installationsmetod
Använd den rekommenderade integrationen eller en kontrollerad kodplacering. Ändra inte temafiler utan säkerhetskopia och ett barntema.
Hämta den aktuella integrationskoden från ditt CompleteGreet-konto.
Anslut butiken
Följ den aktuella guiden i kontot och dela aldrig privata nycklar eller åtkomstuppgifter i offentlig kod.
Lägg in nyckeln i det skyddade fält som är avsett för integrationen.
Aktivera och konfigurera
Aktivera widgeten och anpassa placering, utlösare och videoinnehåll. Testa alla val före publicering.
Källa: exempel på installation baserat på artikelns arbetsflöde
Se den statiska översikten ovan för hela arbetsflödet.
Vad bör du kontrollera före publicering?
Testa på riktiga enheter innan du aktiverar widgeten för alla. Kontrollera också att sidreglerna begränsar visningen till de webbadresser du faktiskt har valt.
Enhetstestning utöver datorn
Webbläsare på dator och mobil hanterar videobubblor på olika sätt. En miniatyrbild som ser liten ut på en stor skärm kan täcka mycket på en kompakt telefon. Öppna därför webbplatsen på riktiga telefoner och kontrollera att stängningsknappen är lätt att trycka på.
iOS begränsar automatisk uppspelning med ljud. Låt därför hälsningen börja utan ljud eller vänta tills besökaren själv trycker på uppspelningsknappen.
Kontrollera logiken i sidreglerna
Många fel uppstår i inriktningen. Du kan till exempel ha valt sidor under /shop/, medan produktsidorna i din konfiguration använder /product/ eller en lokaliserad struktur.
Om widgeten visas över kassan kan den störa kunder som försöker betala. Undanta kassan när det behövs.
Gå igenom visningsreglerna en i taget. Testa flera sidtyper, bland annat produkter, kategorier, varukorg och kassa, och kontrollera att logiken stämmer.
Kontrollera också laddningstiden. En videobubbla lägger till resurser på sidan, och WooCommerce-butiker har ofta redan stora produktbilder och skript för varukorgen. Mät därför en representativ sida med PageSpeed Insights.
Jämför mätningarna med den aktuella vägledningen för Google Web Vitals . Om widgeten påverkar ett viktigt mätvärde kan du testa uppskjuten laddning eller vänta med aktiveringen tills besökaren har börjat skrolla.
Kontrollera också om widgeten överlappar ljuslådan för produktbilder eller en utfällbar varukorg. Om elementen öppnas bakom videobubblan måste lagerordningen justeras och testas på nytt.
WooCommerce-butiker säljer visuellt, och köpare kan tveka när de inte ser produkten i bruk eller får svar på en fråga. En videowidget kan ge en mer personlig förklaring direkt i köpupplevelsen.
Historiska exempel kan visa vilka mätvärden andra butiker har följt, men de kan inte användas som garanti för din butik.
Mätvärden att följa
Mät antalet kvalificerade förfrågningar före och efter testet. Resultatet beror på trafiken, budskapet, produkterna och placeringen, så använd inte en generell procentsats som förväntan.
Följ också avvisningsfrekvens och laddningstid. En snabb och diskret upplevelse kan vara viktigare än högt produktionsvärde, men effekten måste dokumenteras med egna mätningar.
Krav för installation
Du behöver normalt administratörsrättigheter i WordPress och en version av WooCommerce som stöds. Kontrollera kraven i den aktuella dokumentationen före installationen.
Om konfigurationen erbjuder direktvideo eller funktioner som använder WebRTC måste du undersöka om hostingmiljön stöder de anslutningar som krävs. Det gäller bara funktioner som faktiskt används.
Läs den officiella dokumentationen från WordPress och WooCommerce om aktuella serverkrav och säker praxis innan du aktiverar nya tillägg.
Anta inte att en viss trafikmängd, kostnad eller konverteringsökning ger snabb återbetalning. Beräkna kostnad och värde med det aktuella abonnemanget, dina egna marginaler och kvalificerade förfrågningar.
Börja gärna på sidor med tydlig köpavsikt, till exempel produktdetaljer och varukorg. Jämför resultatet med en kontrollperiod innan du visar widgeten på hela webbplatsen.
Vanliga frågor
Hur lägger jag till CompleteGreet i WooCommerce utan att ändra kassakoden?
Använd integrationsmetoden som rekommenderas i den aktuella guiden, till exempel en kontrollerad kodplacering eller ett kompatibelt tillägg. Undanta kassan med sidregler om du vill och testa betalningsflödet före publicering.
Varför visas inte CompleteGreet-bubblan i förhandsgranskningen av WooCommerce-temat?
Vissa teman läser in förhandsgranskningen i en ram eller med cache som kan blockera externa skript. Testa en säker, publicerad testsida och kontrollera konsolen, cacheminnet och samtyckesinställningarna innan du drar en slutsats.
Kan CompleteGreet bara visas på produktsidor och döljas i varukorgen?
Använd sidreglerna som finns i kontot för att inkludera rätt produktadresser och undanta varukorg och kassa. Webbadresserna kan vara lokaliserade, så testa alla relevanta sidtyper.
Gör CompleteGreet en WooCommerce-butik långsammare?
Alla extra resurser kan påverka prestandan. Mät representativa sidor före och efter installationen på både mobil och dator. Kontrollera Core Web Vitals, produktbilder, cache och när widgeten laddas.
Hur jämförs priset på CompleteGreet med videowidgetar som tar betalt per minut?
Pris och beräkningsmodell kan ändras. Jämför det aktuella CompleteGreet-abonnemanget med alternativen utifrån verklig trafik, webbplatser, funktioner och eventuella gränser. Förlita dig inte på en gammal kostnadsskillnad.
Passar CompleteGreet för en WooCommerce-butik som säljer dyra produkter?
En personlig videohälsning kan vara värd att testa när köpet kräver mycket eftertanke, men högre konvertering kan inte garanteras. Använd videon för att besvara en konkret fråga och mät kvalificerade förfrågningar och slutförda köp.
