Plattformsguider 26 mars 2026

Lägg till en videobubbla på Wix

Så installerar och anpassar du en videobubbla på Wix och testar sidor, mobilvisning, tillgänglighet och prestanda före publicering.

Lägg till en videobubbla på Wix

Kort sammanfattning

  • Du lägger in CompleteGreet på Wix med den egna koden från kontrollpanelen. Om funktionen är tillgänglig beror på vilket Wix-abonnemang du använder.
  • Du styr sidor, handlingsknappar, formulär och visuell profil från CompleteGreet. Vanligtvis behöver du inte ändra koden efter installationen.
  • Före publicering bör du testa bubblan på dator och mobil, kontrollera sidreglerna och mäta prestandan före och efter installationen.

En bra videowidget för Wix ska vara enkel att installera, lätt att anpassa och diskret på små skärmar. CompleteGreet räknar besökare enligt reglerna i ditt abonnemang. Se alltid den aktuella prissidan för uppdaterade gränser och villkor.

Installationen består av en kod som läggs in i området för egen kod i Wix. Därefter publicerar och testar du webbplatsen. Tidsåtgången beror på videon, visningsreglerna och hur noggrant du testar.

CompleteGreet kan också användas på Shopify, WordPress, Squarespace, Webflow och andra plattformar som accepterar den nödvändiga koden. Om du byter plattform senare måste du fortfarande kontrollera placering, samtycke och regler på den nya webbplatsen.

CompleteGreet är främst gjort för videohälsningar, förtroende och enkla handlingar. Det är inte ett verktyg för komplicerade enkäter eller livechatt.

Hur installerar du CompleteGreet på Wix?

Du lägger in CompleteGreet på Wix med koden från kontrollpanelen. En videobubbla är en liten videospelare som ligger ovanpå sidan, visar en kort hälsning och kan leda besökaren vidare utan att skicka personen till en annan webbplats.

Gör så här:

  1. Logga in i CompleteGreet, öppna installationsdelen och kopiera hela koden som hör till rätt webbplats och widget.

  2. Öppna Wix-kontrollpanelen för webbplatsen. Hitta inställningarna för egen kod. Namn och placering kan skilja sig mellan olika versioner av Wix.

  3. Lägg till en ny kod, ge den ett tydligt namn och klistra in CompleteGreet-koden. Välj vilka sidor den ska gälla för. Följ den placering som rekommenderas i den aktuella dokumentationen i stället för att lägga samma kod på flera ställen.

  4. Spara ändringen och publicera webbplatsen. Öppna sedan den publicerade sidan i ett privat webbläsarfönster. Förhandsvisningen i Wix visar inte alltid externa skript korrekt.

Wix hanterar själva laddningen av koden. Du kan därför behålla en installation och styra visningen från CompleteGreets kontrollpanel.

Om bubblan inte visas bör du kontrollera att webbplatsen är publicerad, att adressreglerna stämmer och att samtycke eller cache inte blockerar skriptet. Ladda sedan om sidan som en ny besökare.

Öppna den publicerade webbplatsen på både dator och en riktig telefon innan du börjar med fler anpassningar. Miniatyrbilden måste vara synlig, stängningsknappen lätt att nå och videon enkel att starta.

Vad kan du anpassa i Wix?

I CompleteGreet kan du styra vilka sidor som visar bubblan, vilka handlingar den erbjuder, vilka uppgifter ett formulär frågar efter och hur widgeten ser ut.

Anpassningar för en videobubbla på Wix

Sidor och besökare

Adressregler låter dig välja var bubblan ska visas. Börja med några få viktiga sidor och utöka först när du har sett hur besökarna reagerar.

Undantag är lika viktiga som sidorna du inkluderar.

Dölj bubblan på sidor där den kan störa en viktig handling, till exempel betalning, integritet eller en sida som redan har flera fasta element.

Handlingsknappar

En knapp kan leda till en kalender, en produktsida, ett formulär eller ett telefonnummer, beroende på funktionerna i ditt upplägg.

Välj en kort knapptext, bra kontrast och en tydlig huvudhandling som passar budskapet i videon.

Kontrollera vilka startval och handlingar som faktiskt finns i kontrollpanelen nu. Testa dem på den publicerade sidan innan du räknar upplägget som färdigt.

Kontaktformulär

Ett formulär kan fråga efter namn, e-post, telefon eller andra nödvändiga uppgifter. Kontrollera fält, samtycke, lagring och aviseringar med lämpliga testuppgifter före publicering.

Visuell profil och placering

Anpassa miniatyrbild, färger och placering med valen som finns i kontrollpanelen. Se till att det finns tillräckligt avstånd till menyer, chatt, samtyckesbanner och viktiga knappar.

Om du jämför flera lösningar visar vår jämförelse av videowidgetar vilka anpassningar som är mest användbara på olika typer av webbplatser.

Mobilvisningen måste kontrolleras separat.

Gör miniatyrbilden mindre eller dölj bubblan på vissa sidor om den täcker ett fält, en knapp eller menyn. Använd dina egna trafiksiffror och riktiga skärmar när du väljer lösning.

#cg-ig-PL3 {
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-PL3 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL3 .cg-header {
padding: 24px 24px 16px;
text-align: center;
}
#cg-ig-PL3 .cg-header h3 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
line-height: 1.3;
}
#cg-ig-PL3 .cg-header p {
margin: 0;
font-size: 14px;
color: #7a7a96;
line-height: 1.5;
}
#cg-ig-PL3 .cg-steps {
padding: 0 24px 24px;
}
#cg-ig-PL3 .cg-step {
display: flex;
gap: 16px;
margin-bottom: 20px;
position: relative;
}
#cg-ig-PL3 .cg-step:last-child {
margin-bottom: 0;
}
#cg-ig-PL3 .cg-step:not(:last-child)::after {
content: ”;
position: absolute;
left: 20px;
top: 44px;
width: 2px;
height: calc(100% + 4px);
background: #e2e2ea;
}
#cg-ig-PL3 .cg-step-number {
width: 40px;
height: 40px;
min-width: 40px;
background: #3D5ACE;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
position: relative;
z-index: 1;
}
#cg-ig-PL3 .cg-step-content {
flex: 1;
padding-top: 4px;
}
#cg-ig-PL3 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px;
line-height: 1.4;
}
#cg-ig-PL3 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px;
line-height: 1.5;
}
#cg-ig-PL3 .cg-code-box {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#cg-ig-PL3 .cg-code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #a5b4fc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#cg-ig-PL3 .cg-copy-btn {
background: #E48333;
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
#cg-ig-PL3 .cg-cta-section {
padding: 0 24px 24px;
text-align: center;
}
#cg-ig-PL3 .cg-cta-btn {
display: inline-block;
background: #3D5ACE;
color: #fff;
text-decoration: none;
padding: 14px 28px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL3 .cg-cta-btn:hover {
background: #2d4ab8;
}
#cg-ig-PL3 .cg-source {
padding: 0 24px 20px;
text-align: center;
font-size: 11px;
color: #7a7a96;
}
#cg-ig-PL3 .cg-source a {
color: #3D5ACE;
text-decoration: none;
}
#cg-ig-PL3 .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;
}
@media (max-width: 480px) {
#cg-ig-PL3 .cg-header,
#cg-ig-PL3 .cg-steps,
#cg-ig-PL3 .cg-cta-section,
#cg-ig-PL3 .cg-source {
padding-left: 16px;
padding-right: 16px;
}
#cg-ig-PL3 .cg-header h3 {
font-size: 18px;
}
#cg-ig-PL3 .cg-step {
gap: 12px;
}
#cg-ig-PL3 .cg-step-number {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 14px;
}
#cg-ig-PL3 .cg-step:not(:last-child)::after {
left: 18px;
top: 40px;
}
#cg-ig-PL3 .cg-code-box {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
#cg-ig-PL3 .cg-code-text {
white-space: normal;
word-break: break-all;
}
}

Installera CompleteGreet på Wix

Följ de här fem stegen för att lägga till en videowidget på din Wix-webbplats

1

Gör CompleteGreet-kontot klart

Skapa kontot, lägg in videon och välj den handling du vill erbjuda.

2

Kopiera installationskoden

Öppna kontrollpanelen och kopiera koden som hör till rätt webbplats.

<script src=”https://app.completegreet.com/…”></script>

3

Öppna Wix-inställningarna

Gå till webbplatsens kontrollpanel och öppna området för egen kod.

4

Lägg till CompleteGreet-koden

Skapa en ny egen kod och klistra in hela CompleteGreet-koden.

5

Publicera och testa

Publicera webbplatsen och kontrollera bubblan på dator och mobil.

Infografik med fem steg för att installera CompleteGreet på Wix, från att göra kontot klart till publicering och testning.

Se den statiska översikten ovan för alla steg.

Vad bör du kontrollera före publicering?

Innan du publicerar en videobubbla bör du kontrollera hur den visas på olika enheter, om sidreglerna är rätt och om den påverkar prestandan märkbart.

Börja på dator. Kontrollera att miniatyrbilden laddas, att videon kan startas, att stängningsknappen fungerar och att den öppna videon är rätt placerad.

Använd sedan en riktig telefon. Safari på iOS och Chrome på Android kan hantera uppspelning och fasta element på olika sätt.

En bubbla som ser rätt ut på en stor skärm kan täcka menyn på en liten telefon. Testa både stående och liggande läge.

Många fel beror på visningsreglerna.

Kontrollera alla adresser som ska visa bubblan och några sidor som inte ska göra det. Titta särskilt på betalning, integritet och sidmallar med egna fasta element.

En person som läser användarvillkoren behöver vanligtvis inte samma videohälsning som en besökare på startsidan.

Mät också Core Web Vitals före och efter installationen. Använd Googles vägledning om Web Vitalsför att tolka aktuella mätningar och rekommendationer.

Ett externt skript kan påverka laddning eller visuell stabilitet. Mät den verkliga sidan i stället för att anta att skillnaden är obetydlig.

Kör PageSpeed Insights eller Lighthouse på samma adress före och efter aktivering. Testa också sidan i ett privat webbläsarfönster.

När bubblan visas på rätt plats, fungerar på mobil och inte gör sidan märkbart långsammare är upplägget klart för ett begränsat test med riktig trafik.

En videobubbla kan göra Wix-webbplatsen mer personlig, men budskapet bör svara på en konkret fråga eller visa en användbar nästa handling.

Möjligheten att lägga in egen kod beror på funktionerna i Wix-abonnemanget. Kontrollera den aktuella Wix-dokumentationen innan du börjar.

Om du senare vill ändra vilka sidor som visar bubblan använder du reglerna i CompleteGreet i stället för att lägga flera kopior av koden i Wix.

God tillgänglighet skiljer en användbar widget från ett störande element. Lösningar som följer W3C:s riktlinjer för tillgänglighet bör stödja tangentbord, tydliga etiketter och skärmläsare. Testa detta på den publicerade sidan i stället för att anta att allt fungerar.

Testa alltid installationen på en riktig mobil innan du kallar den färdig. En bubbla som täcker en viktig knapp kan kosta fler handlingar än den skapar.

Vanliga frågor

Vad kostar CompleteGreet för en liten webbplats?

Priser, besöksgränser och villkor kan ändras. Se den aktuella prissidan för de siffror och funktioner som gäller nu.

Vilka plattformar fungerar CompleteGreet med?

CompleteGreet kan användas på Wix, Shopify, WordPress, Squarespace, Webflow, WooCommerce och andra webbplatser som accepterar den nödvändiga installationskoden. Metoden varierar mellan plattformarna.

Hur lång tid tar det att installera CompleteGreet på Shopify?

Tidsåtgången beror på kontot, videon, inställningarna och testningen. Använd appen eller installationsmetoden som rekommenderas nu och kontrollera den publicerade butiken.

Vad händer om webbplatsen får fler besökare än abonnemanget tillåter?

Räkningen och hanteringen av extra trafik följer det aktuella abonnemanget. Kontrollera gränser och villkor före en kampanj eller annan period med mycket trafik.

Kan jag använda CompleteGreet på flera webbplatser med ett konto?

Antalet webbplatser som kan kopplas till samma konto beror på abonnemanget. Kontrollera prissidan eller kontrollpanelen innan du lägger till en ny domän.

Vilka företag får störst nytta av videohälsningar?

Tjänsteföretag, rådgivare och nätbutiker kan använda en kort videohälsning för att förklara erbjudandet eller minska osäkerheten före en handling. Effekten beror på budskap, sida och placering och bör mätas på webbplatsens egen trafik.

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.