Plattformguider 24. mai 2026

Videowidget til Shopify: Tillit møter handel

Se hvordan du legger til en videowidget til Shopify, tilpasser den etter sidetype og tester den før publisering.

Videowidget til Shopify: Tillit møter handel

Viktigste poenger

  • Installasjonen tar under fem minutter og krever ingen koding.
  • Du kan styre nesten alle visuelle detaljer i din videoboble uten å røre kode.
  • Åpne din butikk i Chrome, Safari og Firefox, og se videoboblen bli vist.

Hvordan installerer du CompleteGreet i Shopify?

Installasjonen tar under fem minutter og krever ingen koding. Appen finnes i Shopify App Store og forbinder direkte til din butikk, uten at du manuelt skal endre temafiler.

Illustrasjon av hvordan CompleteGreet installeres på Shopify

Start med å søke etter “CompleteGreet” i Shopify administrasjonen under Apps, og klikk deretter på “Installer app”. Du kommer til en tillatelsesside som ber om tilgang til butikkens tema og ordrer. Klikk på “Installer” for å godkjenne forbindelsen.

Appen sender deg til CompleteGreet hvor du oppretter en konto. Skriv inn din e-postadresse, velg et passord, og bekreft. Du er nå i kontrollpanelet.

Last opp din første videohilsen. Klikk på den blå «Last opp»-knappen øverst til høyre, velg filen, og vent på at behandlingslinjen blir ferdig. Hold filen under 50 MB og under 60 sekunder for rask innlasting.

Konfigurer din videoboble widget:

  1. Angi boblens plassering (nederst til høyre fungerer ofte best for Shopify butikker med kurvknappen øverst til høyre).
  2. Velg hvilke sider som skal vise widgetten. Start kun med forsiden og produktsidene.
  3. Skriv din call to action-tekst. «Spør meg om hva som helst» klarer seg bedre enn generisk «Kontakt oss» i mange A/B-tester.
  4. Angi dine åpningstider, så widgetten viser en mulighet for kalenderbooking når du er offline.

I Online Store 2.0-temaer legger appen automatisk til en seksjon med «CompleteGreet» i temaredigeringsverktøyet. Dra den inn i footeren, og klikk på Lagre. I eldre temaer kopierer du innbyggingskoden fra CompleteGreet-kontrollpanelet, går til Online Store > Themes > Edit code, åpner theme.liquid og setter inn koden like før den avsluttende taggen. Se deres gjeldende case som et eksempel, ikke en garanti.

Klikk på Publiser i temaredigeringsverktøyet, eller lagre dine kodeendringer. Boblen vises deretter på det aktive nettstedet.

Hva kan du tilpasse i Shopify?

Du kan styre nesten alle visuelle detaljer i din videoboble uten å røre kode. Plasser den nederst til venstre eller høyre, velg boblens størrelse, og last opp et tilpasset miniatyrbilde med ditt ansikt i stedet for et generisk avspillingsikon. Test størrelsen på mobil og datamaskin, så den passer til ditt tema og din målgruppe.

Målretting etter side er der hvor mange Shopify butikker finner deres fordel.

Illustrasjon av tilpasning av en videowidget i Shopify

Vis kun widgetten på produktsider hvor de besøkende er klare til å kjøpe, eller utelukk checkout for å unngå forstyrrelser. Du kan også sette en forsinkelse, så boblen først vises etter noen sekunder. Mål henvendelser og salg på din egen butikk i stedet for å anta et bestemt resultat.

Skjemaer og CTA’er

Den innebygde skjemabyggeren kan samle inn navn, e-post, telefon eller egne felter som «Hvilken størrelse leter du etter?» Test spørsmålene med din målgruppe, og bruk kun de feltene du faktisk trenger.

Knappeteksten har større betydning enn mange team forventer. “Send beskjed” kan klare seg dårligere enn “Spør meg om hva som helst” i en konkret A/B test. Fargen bør passe til ditt brand og samtidig ha nok kontrast til å bli sett. Mange

videobobleverktøy begrenser deg til faste fargepaletter, men Shopify tema integrasjonen lar deg hente de presise hexkoder fra ditt eksisterende design. Opptakskvaliteten er den detaljen som skiller amatør fra profesjonell. Bruk naturlig sidelys fra et vindu, ikke skarpt taklys som gir skygger under øynene. Klar lyd er viktigere enn 4K video hver gang. En enkel USB mikrofon kan høres bedre enn datamaskinens mikrofon, og besøkende aksepterer litt grynet video hvis de kan høre deg tydelig.

Trinn for trinn guide til installasjon av CompleteGreet videowidget i Shopify med fire oppsettrinn, kodebiter og ytelsesdata fra kundecaser. Bruk tallene som eksempler, og mål alltid resultatet på din egen butikk.

#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

Oppsettsguide i fire trinn, uten krav om koding

1

Installer fra Shopify App Store

Søk etter “CompleteGreet” i Shopify administrasjonens Apps seksjon, og klikk på Installer.

2

Koble din konto

Logg inn eller opprett din CompleteGreet konto, og godkjenn Shopify tilgang.

3

Last opp din videohilsen

Ta opp eller last opp en velkomstvideo på 30 til 60 sekunder direkte i kontrollpanelet.

4

Legg til widgetkode (valgfritt)

Hvis du vil plassere widgetten selv, sett inn denne kodebiten før den avsluttende taggen:

Kopiér Eksempel

Flere henvendelser

Eksempel

Tid på siden

Eksempel

Konvertering

Merchshark.dk beskriver bedre engasjement og konvertering etter å ha lagt til en videowidget. Bruk det som inspirasjon, og mål din egen effekt.

Installer CompleteGreet i Shopify på få minutter

Se de statiske HTML-dataene ovenfor for hele gjennomgangen.

Se de statiske HTML-dataene ovenfor for hele gjennomgangen.

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

Åpne din butikk i Chrome, Safari og Firefox, og se videoboblen bli vist. Den skal ligge i et hjørne uten å dekke navigasjonsmeny, handlekurvknapp eller checkout. Hvis boblen overlapper viktige elementer, skal du justere plasseringen i widgetinnstillingene, før du annonserer den.

Mobiltrafikk utgjør en stor del av trafikken i Shopify-butikker.

Test på iOS Safari og Android Chrome med riktige enheter, ikke kun nettleseremulatorer. Boblen skal tilpasse størrelsen uten å starte video i full skjerm, og lukkeknappen skal være enkel å nå med en tommelfinger. Hvis mobilmeny eller fast kurvlinje blir dekket, går besøkende ofte videre, før de ser produktet.

Målretting etter side er der hvor mange team begår feil.

Dobbeltsjekk at visningsreglene matcher ditt formål. En velkomstvideo hører til på forsiden, ikke checkout hvor den kan skape friksjon. Produktspesifikke hilsener skal kun utløses på de relevante produktsidene, ikke overalt. Bruk en bærekraftig dansk butikk som inspirasjon, men mål alltid effekten på dine egne kolleksjonssider og hold checkout enkel.

Kjør Google PageSpeed Insights etter installasjonen. Videoressurser tar plass, og Shopify-temaer er allerede tunge. Hvis din LCP-score faller, skal du kontrollere at scriptet lastes inn asynkront, og at videofilen er liten nok. Mål før og etter, før du konkluderer noe.

Test skjemainnsendinger fra start til slutt. Fyll ut kontaktskjemaet i widgetten, klikk på send, og bekreft at henvendelsen lander i din innboks eller CRM. Et ødelagt skjema svekker tilliten raskere enn et manglende skjema.

Lav en siste gjennomgang som kunde. Se på et produkt, legg det i kurven, og start checkout. Widgetten skal være hjelpsom, ikke påtrengende. Finn den balansen, og du har et verktøy som kan forbedre konverteringen.

Videowidgets gjør statiske Shopify butikker til interaktive opplevelser hvor besøkende ser en ekte person i stedet for automatiske chatikoner. Teknologien lastes inn asynkront, så sidevisningen ikke blokkeres hvilket passer med Googles Web Vitals veiledning om raske interaksjoner.

Implementeringen krever normalt én scriptinstallasjon og deretter oppsett i et visuelt kontrollpanel.

CompleteGreet leverer videoen gjennom en lett JavaScript-kodebit som starter når sidens innhold er lastet inn. Forhandlere kopierer koden én gang inn i temahodet og styrer deretter alle innstillinger som møter de besøkende, fra det eksterne kontrollpanelet uten å redigere Liquid filer igjen.

  1. Logg inn på CompleteGreet kontrollpanelet, og velg Legg til domene i sidemenyen.
  2. Skriv inn Shopify-butikkens URL, og kopier det genererte installasjonsscriptet.
  3. I Shopify går du til Online Store > Themes og klikker deretter på Actions > Edit code.
  4. Åpne theme.liquid filen, og sett inn scriptet like før den avsluttende head-taggen.
  5. Lagre filen, og gå tilbake til CompleteGreet for å kontrollere forbindelsesstatus.

Scriptet registrerer en service worker som streamer video via et CDN endpoint og holder nettleserens hovedtråd fri til checkout beregninger. Butikker med tunge bilder eller komplekse kurvescripts kan få fordel av denne arkitekturen uten blokkering.

Butikker som aktiverer widgetten, kan oppleve flere henvendelser etter lansering, men effekten varierer. Se den gjeldende prissiden for Build planen og de inkluderte videohilsenene og brandinginnstillinger.

Mobiltest er stadig viktig fordi Shopify temaer håndterer visningsstørrelser forskjellig. Kontroller at boblen ikke dekker checkout knappen på en iPhone SE eller en annen liten skjerm, før du aktiverer widgetten på alle produktsider.

Vanlige spørsmål

Hvordan legger jeg til CompleteGreet til min Shopify butikk uten å redigere kode?

Installer CompleteGreet appen fra Shopify App Store, og følg de gjeldende trinnene for tillatelser og oppsett. Kontroller deretter den aktive butikken, og last opp eller ta opp din videohilsen fra kontrollpanelet.

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

Shopify temaets forhåndsvisning kjører i et avgrenset miljø som kan blokkere tredjepartsscripts av sikkerhetshensyn. Boblen vises normalt på den aktive butikken når du forlater forhåndsvisningen. Test URL’en i et privat vindu eller på en mobil enhet.

Kan jeg kun vise CompleteGreet på Shopify produktsider?

Ja, bruk URL målretting i CompleteGreet kontrollpanelet til bare å inkludere stier som inneholder /products/. Du kan også utelukke bestemte produkter med deres handles. Kontroller alltid at reglene passer til ditt gjeldende abonnement.

Gjør CompleteGreet min Shopify butikk langsommere?

Scriptet lastes inn asynkront, så det ikke bør blokkere den første sidevisningen. Det betyr at videowidgetten starter etter Shopify innholdet er synlig. Mål Google PageSpeed og Core Web Vitals før og etter installasjonen fordi effekten avhenger av tema, videoer og andre scripts.

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

Se den gjeldende prissiden for den planen som passer til cirka 5.000 unike besøkende. Prisen og funksjonene kan endre seg, så bruk den gjeldende siden i stedet for eldre dollarbeløp. Kontroller også hvordan besøk, videoer og eventuelle ekstra grenser telles.

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

Det avhenger av ditt gjeldende abonnement og vilkårene for flere nettsteder. Kontroller den gjeldende planen eller kontakt CompleteGreet for en løsning til flere brands, før du oppretter 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.