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

Hvordan installerer du CompleteGreet i HTML?

Sådan tilføjer du en videoboble til en almindelig HTML hjemmeside. 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 dit 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 installationskoden: 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 installationen. Boblen bliver normalt synlig ved næste indlæsning, men test altid den udgivne side i de browsere og på de enheder, dine besøgende 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 installationen med den valgte widget. Hvis du opretter flere widgets til forskellige 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 installationen 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.

Hvad kan du tilpasse i HTML?

På HTML hjemmesider 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 forskellige 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 kræver mere test end en almindelig appinstallation, 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øgendes 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 dit eget endpoint i stedet for den normale notifikation, hvis leads skal direkte ind i dit 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 aktuelle CompleteGreet plan for oplysninger om branding og funktioner.

En HTML installation 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 dit 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 installationsscriptet i body-elementet sammen med dit øvrige sideindhold

See the static HTML data above for the full breakdown.

Hvad 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 uden at dække navigation, footer eller vigtige knapper.

Mobil skal prioriteres.

Mange besøgende ser siden på en telefon. Åbn den på iOS Safari og Android Chrome. Boblen skal tilpasse sig skærmen uden 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 installationen. Videoer og andre scripts påvirker forskellige 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 dit CRM. En formular, der fejler, skaber hurtigt mindre tillid end slet ingen formular.

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

Ofte stillede spørgsmål

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

En ren HTML installation kræver, 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 uden at ændre kernefiler. Kopiér embedkoden fra CompleteGreet, åbn sidens HTML editor, 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 editorer 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 langsommere?

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 installationen, og indlæs først videofiler, når en besøgende 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.

Hvad koster CompleteGreet om måneden?

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