Plattformguider 24. mai 2026

Videowidget til Shopify: Tillid møder handel

Se, hvordan du tilføjer en videowidget til Shopify, målretter den efter sidetype og tester den før udgivelse.

Videowidget til Shopify: Tillid møder handel

Viktigste pointer

  • Installationen tager under fem minutter og krever ingen kodning.
  • Du kan styre næsten alle visuelle detaljer i din videoboble uten at røre kode.
  • Åbn din butik i Chrome, Safari og Firefox, og se videoboblen blive vist.

Hvordan installerer du CompleteGreet i Shopify?

Installationen tager under fem minutter og krever ingen kodning. Appen findes i Shopify App Store og forbinder direkte til din butik, uten at du manuelt skal ændre temafiler.

Illustrasjon av hvordan CompleteGreet installeres på Shopify

Start med at søge efter “CompleteGreet” i Shopify administrationen under Apps, og klik derefter på “Installer app”. Du kommer til en tilladelsesside, som beder om adgang til butikkens tema og ordrer. Klik på “Installer” for at godkende forbindelsen.

Appen sender dig til CompleteGreet, hvor du opretter en konto. Indtast din e mailadresse, vælg en adgangskode, og bekræft. Du er nu i kontrolpanelet.

Upload din første videohilsen. Klik på den blå “Upload” knap øverst til højre, vælg filen, og vent på, at behandlingslinjen bliver færdig. Hold filen under 50 MB og under 60 sekunder for hurtig indlæsning.

Konfigurer din videoboble widget:

  1. Angiv boblens placering (nederst til højre fungerer ofte bedst for Shopify butikker med kurvknappen øverst til højre).
  2. Vælg, hvilke sider der skal vise widgetten. Start kun med forsiden og produktsiderne.
  3. Skriv din call to action tekst. “Spørg mig om hva som helst” klarer sig bedre end generisk “Kontakt os” i mange A/B tests.
  4. Angiv dine åbningstider, så widgetten viser en mulighed for kalenderbooking, når du er offline.

I Online Store 2.0 temaer tilføjer appen automatisk en sektion med “CompleteGreet” i temaredigeringsværktøjet. Træk den ind i footeren, og klik på Gem. I ældre temaer kopierer du indlejringskoden fra CompleteGreet kontrolpanelet, går til Online Store > Themes > Editt code, åbner theme.liquid og indsætter koden lige før den afsluttende tag. Se deres gjeldende case som et eksempel, ikke en garanti.

Klik på Udgiv i temaredigeringsværktøjet, eller gem dine kodeændringer. Boblen vises derefter på den aktive nettsted.

Hva kan du tilpasse i Shopify?

Du kan styre næsten alle visuelle detaljer i din videoboble uten at røre kode. Placér den nederst til venstre eller højre, vælg boblens størrelse, og upload et tilpasset miniaturebillede med ditt ansigt i stedet for et generisk afspilningsikon. Test størrelsen på mobil og computer, så den passer til ditt tema og din målgruppe.

Målretning efter side er dér, hvor mange Shopify butikker finder deres fordel.

Illustrasjon av tilpasning av en videowidget i Shopify

Vis kun widgetten på produktsider, hvor de besøkende er klar til at købe, eller udeluk checkout for at undgå forstyrrelser. Du kan også sætte en forsinkelse, så boblen først vises efter nogle sekunder. Mål henvendelser og salg på din egen butik i stedet for at antage et bestemt resultat.

Formularer og CTA’er

Den indbyggede formularbygger kan indsamle navn, e mail, telefon eller egne felter som “Hvilken størrelse leder du efter?” Test spørgsmålene med din målgruppe, og brug kun de felter, du faktisk har brug for.

Knapteksten har større betydning, end mange teams forventer. “Send besked” kan klare sig dårligere end “Spørg mig om hva som helst” i en konkret A/B test. Farven bør passe til ditt brand og samtidig have nok kontrast til at blive set. Mange

videoboble værktøjer begrenser dig til faste farvepaletter, men Shopify tema integrationen lader dig hente de præcise hexkoder fra ditt eksisterende design. Optagekvaliteten er den detalje, der adskiller amatør fra professionel. Brug naturligt sidelys fra et vindue, ikke skarpt loftlys, der giver skygger under øjnene. Klar lyd er vigtigere end 4K video hver gang. En enkel USB mikrofon kan lyde bedre end computerens mikrofon, og besøkende accepterer lidt grynet video, hvis de kan høre dig tydeligt.

Trin for trin guide til installasjon af CompleteGreet videowidget i Shopify med fire oppsettstrin, kodestykker og ydelsesdata fra kundecaser. Brug tallene som eksempler, og mål altid resultatet på din egen butik.

#cg-ig-PL5 {
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;
}
}

Installer CompleteGreet i Shopify

Opsætningsguide i fire trin, uten krav om kodning

1

Installer fra Shopify App Store

Søg efter “CompleteGreet” i Shopify administrationens Apps sektion, og klik på Installer.

2

Forbind din konto

Log ind eller opret din CompleteGreet konto, og godkend Shopify adgang.

3

Upload din videohilsen

Optag eller upload en velkomstvideo på 30 til 60 sekunder direkte i kontrolpanelet.

4

Tilføj widgetkode (valgfrit)

Hvis du vil placere widgetten selv, indsæt dette kodestykke før den afsluttende tag:

Kopiér Eksempel

Flere henvendelser

Eksempel

Tid på siden

Eksempel

Konvertering

Merchshark.dk beskriver bedre engagement og konvertering efter at have tilføjet en videowidget. Brug det som inspiration, og mål din egen effekt.

Installer CompleteGreet i Shopify på få minutter

Se de statiske HTML data ovenfor for hele gjennomgangen.

See the static HTML data above for the full breakdown.

Hva skal du tjekke, før du går live?

Åbn din butik i Chrome, Safari og Firefox, og se videoboblen blive vist. Den skal ligge i et hjørne uten at dække navigationsmenu, kurvknap eller checkout. Hvis boblen overlapper vigtige elementer, skal du justere placeringen i widgetindstillingerne, før du annoncerer den.

Mobiltrafik fylder meget i Shopify butikker.

Test på iOS Safari og Android Chrome med rigtige enheder, ikke kun browseremulatorer. Boblen skal tilpasse størrelsen uten at starte video i fuld skærm, og lukknappen skal være nem at nå med en tommelfinger. Hvis mobilmenu eller fast kurvlinje bliver dækket, går besøkende ofte videre, før de ser produktet.

Målretning efter side er dér, hvor mange teams begår fejl.

Dobbelttjek, at visningsreglerne matcher ditt formål. En velkomstvideo hører til på forsiden, ikke checkout, hvor den kan skabe friktion. Produktnamnspecifikke hilsener skal kun udløses på de relevante produktsider, ikke overalt. Brug en bæredygtig dansk butik som inspiration, men mål altid effekten på dine egne kollektionssider og hold checkout enkel.

Kør Google PageSpeed Insights efter installasjonen. Videoaktiver fylder, og Shopify temaer er allerede tunge. Hvis din LCP score falder, skal du kontrollere, at scriptet indlæses asynkront, og at videofilen er lille nok. Mål før og efter, før du konkluderer noget.

Test formularafsendelser fra start til slut. Udfyld kontaktformularen i widgetten, klik på send, og bekræft, at henvendelsen lander i din indbakke eller CRM. En ødelagt formular svækker tilliden hurtigere end en manglende formular.

Lav en sidste gjennomgang som kunde. Se på et produkt, læg det i kurven, og start checkout. Widgetten skal være hjælpsom, ikke påtrængende. Ram den balance, og du har et værktøj, der kan forbedre konverteringen.

Videowidgets gør statiske Shopify butikker til interaktive oplevelser, hvor besøkende ser en rigtig person i stedet for automatiske chatikoner. Teknologien indlæses asynkront, så sidevisningen ikke blokeres, hvilket passer med Googles Web Vitals vejledning om hurtige interaktioner.

Implementeringen krever normalt én scriptinstallasjon og derefter oppsett i et visuelt kontrolpanel.

CompleteGreet leverer videoen gjennom et let JavaScript kodestykke, som starter, når sidens indhold er indlæst. Forhandlere kopierer koden én gang ind i temahovedet og styrer derefter alle indstillinger, der møder de besøkende, fra det eksterne kontrolpanel uten at redigere Liquid filer igen.

  1. Log ind på CompleteGreet kontrolpanelet, og vælg Tilføj domæne i sidemenuen.
  2. Indtast Shopify butikkens URL, og kopier det genererede installasjonsscript.
  3. I Shopify går du til Online Store > Themes og klikker derefter på Actions > Editt code.
  4. Åbn theme.liquid filen, og indsæt scriptet lige før det afsluttende head tag.
  5. Gem filen, og gå tilbage til CompleteGreet for at kontrollere forbindelsesstatus.

Scriptet registrerer en service worker, som streamer video via et CDN endpoint og holder browserens hovedtråd fri til checkout beregninger. Butikker med tunge billeder eller komplekse kurvescripts kan få fordel af denne arkitektur uten blokering.

Butikker, der aktiverer widgetten, kan opleve flere henvendelser efter lancering, men effekten varierer. Se den gjeldende prisside for Build planen og de inkluderede videohilsener og brandingindstillinger.

Mobiltest er stadig vigtig, fordi Shopify temaer håndterer visningsstørrelser forskelligt. Kontrollér, at boblen ikke dækker checkout knappen på en iPhone SE eller en anden lille skærm, før du aktiverer widgetten på alle produktsider.

Vanlige spørsmål

Hvordan tilføjer jeg CompleteGreet til min Shopify butik uten at redigere kode?

Installér CompleteGreet appen fra Shopify App Store, og følg de gjeldende trin for tilladelser og oppsett. Kontrollér derefter den aktive butik, og upload eller optag din videohilsen fra kontrolpanelet.

Hvorfor vises min videoboble ikke i Shopify temaets forhåndsvisning?

Shopify temaets forhåndsvisning kører i et afgrænset miljø, som kan blokere tredjepartsscripts af sikkerhedshensyn. Boblen vises normalt på den aktive butik, når du forlader forhåndsvisningen. Test URL’en i et privat vindue eller på en mobil enhed.

Kan jeg kun vise CompleteGreet på Shopify produktsider?

Ja, brug URL målretning i CompleteGreet kontrolpanelet til kun at inkludere stier, der indeholder /products/. Du kan også udelukke bestemte produkter med deres handles. Kontrollér altid, at reglerne passer til ditt gjeldende abonnement.

Gør CompleteGreet min Shopify butik langsommer?

Scriptet indlæses asynkront, så det ikke bør blokere den første sidevisning. Det betyder, at videowidgetten starter efter Shopify indholdet er synligt. Mål Google PageSpeed og Core Web Vitals før og efter installasjonen, fordi effekten afhænger af tema, videoer og andre scripts.

Hva koster CompleteGreet til en Shopify butik med 5.000 månedlige besøkende?

Se den gjeldende prisside for den plan, der passer til cirka 5.000 unikke besøkende. Prisen og funktionerne kan ændre sig, så brug den gjeldende side i stedet for ældre dollarbeløb. Kontrollér også, hvordan besøg, videoer og eventuelle ekstra grenser tælles.

Kan jeg bruge CompleteGreet på flere Shopify butikker med én konto?

Det afhænger af ditt gjeldende abonnement og vilkårene for flere websteder. Kontrollér den gjeldende plan eller kontakt CompleteGreet for en løsning til flere brands, før du opretter separate installasjoner.

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.