Profil
Dashboard
Logga ut
Innehållsförteckning
Viktigaste punkterna
- Installationen tar mindre än fem minuter och kräver ingen kodning.
- Du kan styra nästan alla visuella detaljer i videobubblan utan att röra kod.
- Öppna butiken i Chrome, Safari och Firefox och kontrollera att videobubblan visas.
Hur installerar du CompleteGreet i Shopify?
Installationen tar mindre än fem minuter och kräver ingen kodning. Appen finns i Shopify App Store och ansluter direkt till butiken utan att du behöver ändra temafiler manuellt.
Sök efter “CompleteGreet” i Shopify-administrationen under Apps och klicka på “Installera appen”. Du kommer till en behörighetssida som ber om åtkomst till butikens tema och ordrar. Klicka på “Installera” för att godkänna anslutningen.
Appen skickar dig till CompleteGreet där du skapar ett konto. Ange e-postadress, välj ett lösenord och bekräfta. Du är nu i kontrollpanelen.
Ladda upp din första videohälsning. Klicka på den blå knappen “Ladda upp” uppe till höger, välj filen och vänta tills bearbetningsindikatorn är klar. Håll filen under 50 MB och 60 sekunder för snabb laddning.
Konfigurera din videobubbla widget:
- Ange bubblans placering. Längst ner till höger fungerar ofta bra i Shopify-butiker med varukorgsknappen uppe till höger.
- Välj vilka sidor som ska visa widgeten. Börja med startsidan och produktsidorna.
- Skriv din uppmaningstext. “Fråga mig om vad som helst” fungerar ofta bättre än en generisk “Kontakta oss” i A/B-tester.
- Ange dina öppettider så att widgeten kan visa en möjlighet till kalenderbokning när du är offline.
I Online Store 2.0-teman lägger appen automatiskt till en sektion med “CompleteGreet” i temaredigeraren. Dra den till sidfoten och klicka på Spara. I äldre teman kopierar du inbäddningskoden från CompleteGreet, går till Online Store > Themes > Edit code, öppnar theme.liquid och klistrar in koden precis före den avslutande taggen. Se deras aktuella fall som ett exempel, inte som en garanti.
Klicka på Publicera i temaredigeraren eller spara kodändringarna. Bubblan visas därefter på den aktiva webbplatsen.
Vad kan du anpassa i Shopify?
Du kan styra nästan alla visuella detaljer i videobubblan utan att röra kod. Placera den längst ner till vänster eller höger, välj storlek och ladda upp en anpassad miniatyrbild med ditt ansikte i stället för en generisk uppspelningsikon. Testa storleken på mobil och dator så att den passar tema och målgrupp.
Målstyrning efter sida är där många Shopify-butiker hittar en fördel.
Visa bara widgeten på produktsidor där besökare är redo att köpa eller uteslut kassan för att undvika störningar. Du kan också ställa in en fördröjning så att bubblan visas efter några sekunder. Mät förfrågningar och försäljning i din egen butik i stället för att anta ett visst resultat.
Formulär och CTA:er
Den inbyggda formulärbyggaren kan samla in namn, e-post, telefon eller egna fält som “Vilken storlek letar du efter?”. Testa frågorna med målgruppen och använd bara de fält du faktiskt behöver.
Knapptexten betyder mer än många team tror. “Skicka meddelande” kan fungera sämre än “Fråga mig om vad som helst” i ett konkret A/B-test. Färgen bör passa varumärket och samtidigt ha tillräcklig kontrast för att synas. Många
videobubbelverktyg begränsar dig till fasta färgpaletter, men Shopify-temaintegrationen låter dig hämta exakta hexkoder från den befintliga designen. Inspelningskvaliteten är detaljen som skiljer amatör från professionell. Använd naturligt sidoljus från ett fönster, inte skarpt takljus som ger skuggor under ögonen. Klart ljud är viktigare än 4K-video. En enkel USB-mikrofon kan låta bättre än datorns mikrofon och besökare accepterar lite grynig video om de hör dig tydligt.
Steg-för-steg-guide till installation av CompleteGreet-videowidget i Shopify med fyra konfigurationssteg, kodexempel och prestandadata från kundfall. Använd siffrorna som exempel och mät alltid resultatet i din egen butik.
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
border-top: 4px solid #3D5ACE;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL5 .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-PL5 .ig-header {
text-align: center;
margin-bottom: 24px;
}
#cg-ig-PL5 .ig-title {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
}
#cg-ig-PL5 .ig-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0;
}
#cg-ig-PL5 .step-container {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
#cg-ig-PL5 .step-item {
display: flex;
gap: 16px;
align-items: flex-start;
background: #ffffff;
padding: 16px;
border-radius: 8px;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .step-number {
width: 32px;
height: 32px;
background: #3D5ACE;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
#cg-ig-PL5 .step-content {
flex: 1;
}
#cg-ig-PL5 .step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px;
margin-top: 8px;
position: relative;
}
#cg-ig-PL5 .code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, monospace;
font-size: 12px;
color: #e2e2ea;
margin: 0;
word-break: break-all;
}
#cg-ig-PL5 .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #3D5ACE;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: default;
}
#cg-ig-PL5 .stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
#cg-ig-PL5 .stat-box {
background: #ffffff;
padding: 16px 8px;
border-radius: 8px;
text-align: center;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .stat-number {
font-size: 24px;
font-weight: 700;
color: #3D5ACE;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .stat-label {
font-size: 11px;
color: #7a7a96;
margin: 0;
line-height: 1.3;
}
#cg-ig-PL5 .case-study {
background: #ffffff;
border-left: 3px solid #E48333;
padding: 12px 16px;
border-radius: 0 8px 8px 0;
margin-bottom: 20px;
}
#cg-ig-PL5 .case-label {
font-size: 12px;
font-weight: 600;
color: #E48333;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .case-text {
font-size: 12px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .cta-button {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
margin-bottom: 16px;
}
#cg-ig-PL5 .source-line {
font-size: 11px;
color: #7a7a96;
text-align: center;
margin: 0;
}
@media (max-width: 480px) {
#cg-ig-PL5 {
padding: 16px;
}
#cg-ig-PL5 .ig-title {
font-size: 18px;
}
#cg-ig-PL5 .stats-grid {
grid-template-columns: 1fr;
}
#cg-ig-PL5 .step-item {
padding: 12px;
}
}
Installera CompleteGreet i Shopify
Installationsguide i fyra steg utan krav på kodning
1
Sök efter “CompleteGreet” i Shopify-administrationens appsektion och klicka på Installera.
2
Logga in eller skapa ett CompleteGreet-konto och godkänn åtkomst till Shopify.
3
Spela in eller ladda upp en välkomstvideo på 30 till 60 sekunder direkt i kontrollpanelen.
4
Om du vill placera widgeten själv lägger du in detta kodstycke före den avslutande
taggen:
Kopiera Exempel Fler förfrågningar
Exempel
Tid på sidan
Exempel
Konvertering
Merchshark.dk beskriver bättre engagemang och konvertering efter att ha lagt till en videowidget. Använd det som inspiration och mät din egen effekt.
Installera CompleteGreet i Shopify på några minuter
Se de statiska HTML-data ovan för hela genomgången.
Se de statiska HTML-data ovan för hela genomgången.
Vad ska du kontrollera innan du publicerar?
Öppna butiken i Chrome, Safari och Firefox och se videobubblan visas. Den ska ligga i ett hörn utan att täcka navigationsmeny, varukorgsknapp eller kassa. Om bubblan överlappar viktiga element justerar du placeringen i widgetinställningarna innan du publicerar.
Mobiltrafik är mycket viktig i Shopify-butiker.
Testa iOS Safari och Android Chrome med riktiga enheter, inte bara webbläsarsimulatorer. Bubblan ska anpassa storleken utan att starta video i helskärm och stängningsknappen ska vara lätt att nå med en tumme. Om mobilmenyn eller en fast varukorgsrad täcks går besökare ofta vidare innan de ser produkten.
Målstyrning efter sida är där många team gör fel.
Dubbelkolla att visningsreglerna passar syftet. En välkomstvideo hör hemma på startsidan, inte i kassan där den kan skapa friktion. Produktnamnspecifika hälsningar ska bara utlösas på relevanta produktsidor, inte överallt. Använd en hållbar dansk butik som inspiration men mät alltid effekten på dina egna kollektionssidor och håll kassan enkel.
Kör Google PageSpeed Insights efter installationen. Video kan belasta sidan och Shopify-teman är redan tunga. Om LCP försämras kontrollerar du att skriptet laddas asynkront och att videofilen är tillräckligt liten. Mät före och efter innan du drar slutsatser.
Testa formulärinskick från början till slut. Fyll i kontaktformuläret i widgeten, klicka på skicka och bekräfta att förfrågningen når inkorgen eller CRM:et. Ett trasigt formulär försvagar förtroendet snabbare än ett formulär som saknas.
Gör en sista genomgång som kund. Titta på en produkt, lägg den i varukorgen och starta kassan. Widgeten ska vara hjälpsam, inte påträngande. Hitta balansen så har du ett verktyg som kan förbättra konverteringen.
Videowidgets gör statiska Shopify-butiker till interaktiva upplevelser där besökare ser en riktig person i stället för automatiska chattikoner. Tekniken laddas asynkront så att sidvisningen inte blockeras, vilket passar med Googles vägledning om Web Vitals om snabba interaktioner.
Implementeringen kräver normalt en skriptinstallation och därefter inställningar i en visuell kontrollpanel.
CompleteGreet levererar videon genom en lätt JavaScript-kodsnutt som startar när sidans innehåll har laddats. Återförsäljare kopierar koden en gång till temats sidhuvud och styr sedan alla inställningar som möter besökarna från den externa kontrollpanelen utan att redigera Liquid-filer igen.
- Logga in i CompleteGreet-kontrollpanelen och välj Lägg till domän i sidmenyn.
- Ange Shopify-butikens URL och kopiera det genererade installationsskriptet.
- I Shopify går du till Online Store > Themes och klickar sedan på Actions > Edit code.
- Öppna theme.liquid-filen och lägg in skriptet precis före den avslutande head-taggen.
- Spara filen och gå tillbaka till CompleteGreet för att kontrollera anslutningsstatus.
Skriptet registrerar en service worker som strömmar video via en CDN-endpoint och håller webbläsarens huvudtråd fri för kassaberäkningar. Butiker med tunga bilder eller komplexa varukorgsskript kan dra nytta av arkitekturen utan blockering.
Butiker som aktiverar widgeten kan få fler förfrågningar efter lansering, men effekten varierar. Se den aktuella prissidan för Build-planen och inkluderade videohälsningar och varumärkesinställningar.
Mobiltest är fortfarande viktigt eftersom Shopify-teman hanterar visningsstorlekar olika. Kontrollera att bubblan inte täcker kassaknappen på en iPhone SE eller annan liten skärm innan du aktiverar widgeten på alla produktsidor.
Vanliga frågor
Hur lägger jag till CompleteGreet i min Shopify-butik utan att redigera kod?
Installera CompleteGreet-appen från Shopify App Store och följ aktuella steg för behörigheter och installation. Kontrollera sedan den aktiva butiken och ladda upp eller spela in videohälsningen från kontrollpanelen.
Varför visas min videobubbla inte i Shopify-temats förhandsvisning?
Shopify-temats förhandsvisning körs i en avgränsad miljö som kan blockera tredjepartsskript av säkerhetsskäl. Bubblan visas normalt i den aktiva butiken när du lämnar förhandsvisningen. Testa URL:en i ett privat fönster eller på en mobil enhet.
Kan jag bara visa CompleteGreet på Shopify-produktsidor?
Ja, använd URL-målstyrning i CompleteGreet-kontrollpanelen för att bara inkludera sökvägar som innehåller /products/. Du kan också utesluta bestämda produkter med deras handtag. Kontrollera alltid att reglerna passar ditt aktuella abonnemang.
Gör CompleteGreet min Shopify-butik långsammare?
Skriptet laddas asynkront och bör därför inte blockera den första visningen. Videowidgeten startar efter att Shopify-innehållet är synligt. Mät Google PageSpeed och Core Web Vitals före och efter installationen eftersom effekten beror på tema, videor och andra skript.
Vad kostar CompleteGreet för en Shopify-butik med 5 000 månatliga besökare?
Se den aktuella prissidan för planen som passar cirka 5 000 unika besökare. Pris och funktioner kan förändras, så använd den aktuella sidan i stället för äldre dollarbelopp. Kontrollera också hur besök, videor och eventuella extra gränser räknas.
Kan jag använda CompleteGreet på flera Shopify-butiker med ett konto?
Det beror på ditt aktuella abonnemang och villkoren för flera webbplatser. Kontrollera den aktuella planen eller kontakta CompleteGreet för en lösning för flera varumärken innan du skapar separata installationer.
