Sådan tilføjer du en videoboble til enhver nettsted (HTML)

Hvordan installerer du CompleteGreet i HTML?

Slik tilføjer du en videoboble til en almindelig HTML nettsted. Opsætningen fungerer på statiske sider, single page apps og andre løsninger, der leverer HTML direkte.

Her er rækkefølgen:

1. Opret din konto og ditt kontrolpanel: Opret en konto hos CompleteGreet, og åbn hovedkontrolpanelet. Find den blå knap med teksten “New Widget” øverst til højre, og klik på den. Widgetbyggeren åbner med en tom skabelon og en knap til videooptagelse.
2. Optag eller upload din hilsen: Klik på optageknappen for at filme direkte i browseren, eller upload en MP4 fil fra din computer. Forhåndsvisningen viser, hvordan boblen ser ud på computer og mobil. Hold videoen kort, så du kan teste sidehastigheden på din egen side.
3. Tilpas udseendet: Brug menuen i venstre side til at vælge boblens placering, farve og profilbillede. Nederst til højre er et godt udgangspunkt, men test placeringen mod din egen navigation og dine egne knapper.
4. Vælg din call to action: Åbn fanen “Interactions” for at tilføje knaptekst som “Book et møde” eller “Se priser” og indsætte den relevante URL. Du kan også slå en formular til, der indsamler kontaktoplysninger før eller efter videoen.
5. Kopiér installasjonskoden: Klik på “Save & Get Code” øverst. Et vindue viser ét script tag. Kopiér det, og indsæt det lige før det afsluttende tag i din HTML fil. Scriptet indlæses asynkront, så det ikke bør blokere sidens første visning.

Det er hele installasjonen. Boblen bliver normalt synlig ved næste indlæsning, men test altid den udgivne side i de browsere og på de enheder, dine besøkende bruger.

Hvis du bruger en statisk sitegenerator som Jekyll, Hugo eller Eleventy, skal du indsætte det samme script i din grundskabelon. I single page apps bygget med React eller Vue fungerer koden på samme måde, når den tilføjes efter sidens mount. Du behøver ikke installere en npm pakke.

En detalje, mange overser, er data widget id attributten i scriptet. Den forbinder installasjonen med den valgte widget. Hvis du opretter flere widgets til ulike sider, får hver af dem sit eget ID. I kontrolpanelet kan du kopiere en widget, når den samme hilsen skal bruges flere steder.

Test installasjonen i et privat eller inkognito vindue. Boblen bør komme frem i hjørnet efter siden er indlæst. Hvis den ikke vises, så se efter scriptfejl i browserens konsol, og kontrollér at widgetten står som aktiv i kontrolpanelet.

Hva kan du tilpasse i HTML?

På HTML nettstedr fungerer det meste som på administrerede platforme. Den vigtigste forskel er, at du selv styrer sidemålretningen i stedet for at vælge den i et kontrolpanel.

Sidemålretning i HTML styres af URL’en.

Du kan vise widgetten på bestemte stier ved at tilføje en dataattribut til din embedkode. Mange viser ulike hilsner på prissider og blogindlæg. Hvis siden er en single page app, skal du muligvis udløse widgetten manuelt, når ruten skifter via JavaScript API’et. Det krever mer test end en almindelig appinstallasjon, fordi din egen kode styrer visningen.

CTA’er og formularer

Knapperne i widgetten kan redigeres. Du kan linke dem til Calendly, en Stripe betaling eller et almindeligt mailto link. Vælg kun handlinger, som passer til den besøkendes næste trin.

Formularfelterne giver dig den vigtigste tilpasning.

Du vælger selv, om formularen skal bede om navn, e mail, telefon eller et ekstra spørgsmål om budget og tidsplan. Formularen kan vises før videoen eller bagefter. På HTML sider kan data også sendes til ditt eget endpoint i stedet for den normale notifikation, hvis leads skal direkte ind i ditt CRM.

Branding og placering

Boblens farve, størrelse og placering kan justeres i kontrolpanelet. På HTML kan du også overskrive udseendet med CSS, hvis din brandfarve ikke findes blandt standardvalgene. Nederst til højre er standarden, men en anden placering kan fungere bedre, hvis du allerede har en chatknap. Test på både computer og mobil, før du vælger den endelige placering. videoboble værktøjer binder dig ofte til deres branding på gratis planer. Kontrollér den gjeldende CompleteGreet plan for oplysninger om branding og funktioner.

En HTML installasjon kan også blive skjult bag andre elementer, hvis de har en høj z indeks værdi.

Hvis navigationen eller en pop op har en høj z indeks værdi, kan videoboblen lægge sig under den. Tilpas widgetcontainerens z indeks i ditt eget stylesheet, og test derefter mod cookie banner, menu og chatværktøj. Fordi scriptet indlæses asynkront, skal denne CSS regel ligge i den centrale stylesheet.

Installationsscriptet med den unikke widgetidentifikator fra kontrolpanelet

Indsæt installasjonsscriptet i body-elementet sammen med ditt øvrige sideindhold

See the static HTML data above for the full breakdown.

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

Åbn siden i Chrome, Safari og Firefox, før du fortæller andre om den. Videoboblen bør ligge i et hjørne uten at dække navigation, footer eller vigtige knapper.

Mobil skal prioriteres.

Mange besøkende ser siden på en telefon. Åbn den på iOS Safari og Android Chrome. Boblen skal tilpasse sig skærmen uten at tvinge videoen i fuld skærm, og lukknappen skal være nem at ramme med en finger. Hvis widgetten dækker mobilmenuen eller en betalingsknap, skal du justere placeringen i kontrolpanelet.

Kontrollér at reglerne for sidemålretning virker. Besøg sider, hvor widgetten ikke skal vises, og bekræft at den forbliver skjult. Kontrollér også, at den kun indlæses på de URL’er, du har angivet.

Kør en hastighedstest med Google PageSpeed Insights efter installasjonen. Videoer og andre scripts påvirker ulike sider forskelligt. Hvis LCP bliver dårligere, så kontrollér at scriptet indlæses asynkront, og at videofilen har en størrelse, din side kan håndtere.

Test formularen fra start til slut. Udfyld kontaktformularen i widgetten, send den, og kontrollér at leadet når din indbakke eller ditt CRM. En formular, der fejler, skaber hurtigt mindre tillid end slet ingen formular.

Script-tagget fra CDN'et med ditt unikke site-ID fra kontrolpanelet

Vanlige spørsmål

Hvordan tilføjer jeg CompleteGreet til en HTML side uten at redigere kodefiler?

En ren HTML installasjon krever, at et script indsættes i HTML koden. Mange site builders har dog et HTML felt eller et område til brugerdefineret kode, så du kan indsætte koden uten at ændre kernefiler. Kopiér embedkoden fra CompleteGreet, åbn sidens HTML edittor, og indsæt den før det afsluttende tag. Boblen bør derefter kunne ses på den udgivne side, når widgetten er aktiv.

Hvor skal jeg helt præcist indsætte CompleteGreet scriptet i min HTML?

Indsæt scriptet lige før det afsluttende tag på hver side, hvor boblen skal vises. Så indlæses sidens eget indhold først. Hvis boblen kun skal vises på bestemte sider, kan du indsætte scriptet dér eller bruge målretningsreglerne i kontrolpanelet.

Hvorfor vises min videoboble ikke i HTML forhåndsvisningen?

Forhåndsvisninger kan skjule boblen på grund af browserregler eller en iframe med begrænsninger. Test den udgivne side i et normalt browservindue. Nogle HTML edittorer fjerner JavaScript af sikkerhedshensyn. Kontrollér derfor også, at scriptet ikke står inde i en kommentar eller i tags, der forhindrer afvikling.

Kan jeg kun vise CompleteGreet på bestemte HTML sider, for eksempel min prisside?

Ja. Indsæt kun scriptet på de HTML filer, hvor boblen skal vises. Du kan også indsætte det på hele sitet og bruge URL regler i kontrolpanelet til at vise eller skjule widgetten på bestemte stier. Test reglerne på både de sider, der skal vise boblen, og de sider, der ikke skal.

Gør CompleteGreet en HTML side langsommer?

Scriptet indlæses asynkront efter sidens indhold, men den reelle effekt afhænger af netværk, enhed, videoer og andre scripts. Mål din egen side med Google PageSpeed Insights før og efter installasjonen, og indlæs først videofiler, når en besøkende bruger widgetten.

Hvordan tester jeg videoboblen på mobil på min HTML side?

Åbn den udgivne HTML side på en rigtig telefon, eller brug browserens enhedstilstand. Kontrollér at boblen tilpasser sig skærmen, at videoen afspilles, og at formularen kan sendes. Tjek også at lukknappen er nem at ramme, og at widgetten ikke dækker betalingsknapper eller navigation.

Hva koster CompleteGreet om måneden?

Se den gjeldende prisside for de nuværende planer og besøgsgrenser. Priser og funktioner kan ændre sig, så brug ikke ældre beløb fra denne vejledning som tilbud. Vælg en plan efter ditt faktiske trafikniveau, og mål effekten på din egen nettsted.