Slik legger du til en videoboble på hvilket som helst nettsted (HTML)

Hvordan installerer du CompleteGreet i HTML?

Slik legger du til en videoboble til et vanlig HTML-nettsted. Oppsettet fungerer på statiske sider, single page apps og andre løsninger som leverer HTML direkte.

Her er rekkefølgen:

1. Opprett din konto og ditt kontrollpanel: Opprett en konto hos CompleteGreet, og åpne hovedkontrollpanelet. Finn den blå knappen med teksten “New Widget” øverst til høyre, og klikk på den. Widgetbyggeren åpner med en tom mal og en knapp til videoopptak.
2. Ta opp eller last opp din hilsen: Klikk på opptaksknappen for å filme direkte i nettleseren, eller last opp en MP4-fil fra din datamaskin. Forhåndsvisningen viser hvordan boblen ser ut på datamaskin og mobil. Hold videoen kort, så du kan teste sidehastigheten på din egen side.
3. Tilpass utseendet: Bruk menyen på venstre side til å velge boblens plassering, farge og profilbilde. Nederst til høyre er et godt utgangspunkt, men test plasseringen mot din egen navigasjon og dine egne knapper.
4. Velg din call to action: Åpne fanen “Interactions” for å legge til knappetekst som “Bestill et møte” eller “Se priser” og sette inn den relevante URL-en. Du kan også aktivere et skjema som samler inn kontaktopplysninger før eller etter videoen.
5. Kopier installasjonskoden: Klikk på “Save & Get Code” øverst. Et vindu viser én script-tag. Kopier den, og sett den inn like før den avsluttende taggen i HTML-filen din. Scriptet lastes inn asynkront, så det ikke bør blokkere sidens første visning.

Det er hele installasjonen. Boblen blir normalt synlig ved neste innlasting, men test alltid den publiserte siden i de nettleserne og på de enhetene dine besøkende bruker.

Hvis du bruker en statisk sitegenerator som Jekyll, Hugo eller Eleventy, skal du sette inn det samme scriptet i din grunnmal. I single page apps bygget med React eller Vue fungerer koden på samme måte når den legges til etter sidens mount. Du trenger ikke installere en npm pakke.

En detalj, mange overser, er data-widget-id-attributtet i scriptet. Den forbinder installasjonen med den valgte widgeten. Hvis du oppretter flere widgets til ulike sider, får hver av dem sin egen ID. I kontrollpanelet kan du kopiere en widget når den samme hilsenen skal brukes flere steder.

Test installasjonen i et privat vindu eller inkognitovindu. Boblen bør komme frem i hjørnet etter at siden er lastet inn. Hvis den ikke vises, så se etter scriptfeil i nettleserens konsoll, og kontroller at widgetten står som aktiv i kontrollpanelet.

Hva kan du tilpasse i HTML?

På HTML-nettsteder fungerer det meste som på administrerte plattformer. Den viktigste forskjellen er at du selv styrer sidemålrettingen i stedet for å velge den i et kontrollpanel.

Sidemålretting i HTML styres av URL’en.

Du kan vise widgetten på bestemte stier ved å legge til et dataattributt til din embedkode. Mange viser ulike hilsner på prissider og blogginnlegg. Hvis siden er en single page app, skal du muligens utløse widgetten manuelt når ruten skifter via JavaScript API’et. Det krever mer test enn en vanlig appinstallasjon fordi din egen kode styrer visningen.

CTA’er og skjemaer

Knappene i widgetten kan redigeres. Du kan linke dem til Calendly, en Stripe betaling eller en vanlig mailto-lenke. Velg kun handlinger som passer til den besøkendes neste trinn.

Skjemafeltene gir deg den viktigste tilpasningen.

Du velger selv om skjemaet skal be om navn, e-post, telefon eller et ekstra spørsmål om budsjett og tidsplan. Skjemaet kan vises før videoen eller etterpå. På HTML-sider kan data også sendes til ditt eget endpoint i stedet for det vanlige varselet hvis leads skal direkte inn i ditt CRM.

Branding og plassering

Boblens farge, størrelse og plassering kan justeres i kontrollpanelet. På HTML kan du også overskrive utseendet med CSS hvis din merkefarge ikke finnes blant standardvalgene. Nederst til høyre er standarden, men en annen plassering kan fungere bedre hvis du allerede har en chatknapp. Test på både datamaskin og mobil, før du velger den endelige plasseringen. videobobleverktøy binder deg ofte til deres branding på gratis planer. Kontroller den gjeldende CompleteGreet-planen for opplysninger om branding og funksjoner.

En HTML-installasjon kan også bli skjult bak andre elementer hvis de har en høy z-indeksverdi.

Hvis navigasjonen eller en popup har en høy z-indeksverdi, kan videoboblen legge seg under den. Tilpass widgetcontainerens z-indeks i ditt eget stylesheet, og test deretter mot cookie banner, meny og chatverktøy. Fordi scriptet lastes inn asynkront, skal denne CSS-regelen ligge i det sentrale stilarket.

Installationsscriptet med den unikke widgetidentifikator fra kontrolpanelet

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

Se de statiske HTML-dataene ovenfor for hele gjennomgangen.

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

Åpne siden i Chrome, Safari og Firefox, før du forteller andre om den. Videoboblen bør ligge i et hjørne uten å dekke navigasjon, footer eller viktige knapper.

Mobil skal prioriteres.

Mange besøkende ser siden på en telefon. Åpne den på iOS Safari og Android Chrome. Boblen skal tilpasse seg skjermen uten å tvinge videoen i full skjerm, og lukkeknappen skal være enkel å treffe med en finger. Hvis widgetten dekker mobilmenyen eller en betalingsknapp, skal du justere plasseringen i kontrollpanelet.

Kontroller at reglene for sidemålretting virker. Besøk sider hvor widgetten ikke skal vises, og bekreft at den forblir skjult. Kontroller også at den kun lastes inn på de URL’er, du har angitt.

Kjør en hastighetstest med Google PageSpeed Insights etter installasjonen. Videoer og andre scripts påvirker ulike sider forskjellig. Hvis LCP blir dårligere, så kontroller at scriptet lastes inn asynkront, og at videofilen har en størrelse, din side kan håndtere.

Test skjemaet fra start til slutt. Fyll ut kontaktskjemaet i widgetten, send det, og kontroller at leadet når din innboks eller ditt CRM. Et skjema som feiler, skaper raskt mindre tillit enn ikke noe skjema.

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

Vanlige spørsmål

Hvordan legger jeg til CompleteGreet til en HTML-side uten å redigere kodefiler?

En ren HTML-installasjon krever at et script settes inn i HTML-koden. Mange nettsted builders har likevel et HTML-felt eller et område til brukerdefinert kode, så du kan sette inn koden uten å endre kjernefiler. Kopier embedkoden fra CompleteGreet, åpne sidens HTML-editor, og sett den inn før den avsluttende tag. Boblen bør deretter kunne ses på den publiserte siden når widgetten er aktiv.

Hvor skal jeg helt presist sette inn CompleteGreet scriptet i min HTML?

Sett inn scriptet like før den avsluttende taggen på hver side hvor boblen skal vises. Da lastes sidens eget innhold først. Hvis boblen kun skal vises på bestemte sider, kan du sette inn scriptet der eller bruke målrettingsreglene i kontrollpanelet.

Hvorfor vises min videoboble ikke i HTML forhåndsvisningen?

Forhåndsvisninger kan skjule boblen på grunn av nettleserregler eller en iframe med begrensninger. Test den publiserte siden i et normalt nettleservindu. Noen HTML-editorer fjerner JavaScript av sikkerhetshensyn. Kontroller derfor også at scriptet ikke står inne i en kommentar eller i tags som forhindrer kjøring.

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

Ja. Sett bare inn scriptet på de HTML-filer hvor boblen skal vises. Du kan også sette det inn på hele nettstedet og bruke URL regler i kontrollpanelet til å vise eller skjule widgetten på bestemte stier. Test reglene på både de sidene som skal vise boblen, og de sidene som ikke skal.

Gjør CompleteGreet en HTML-side langsommere?

Scriptet lastes inn asynkront etter sidens innhold, men den reelle effekten avhenger av nettverk, enhet, videoer og andre scripts. Mål din egen side med Google PageSpeed Insights før og etter installasjonen, og last først inn videofiler når en besøkende bruker widgetten.

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

Åpne den publiserte HTML-siden på en fysisk telefon, eller bruk nettleserens enhetsmodus. Kontroller at boblen tilpasser seg skjermen, at videoen spilles av, og at skjemaet kan sendes. Sjekk også at lukkeknappen er enkel å treffe, og at widgetten ikke dekker betalingsknapper eller navigasjon.

Hva koster CompleteGreet om måneden?

Se den gjeldende prissiden for de nåværende planene og besøksgrenser. Priser og funksjoner kan endre seg, så bruk ikke eldre beløp fra denne veiledningen som tilbud. Velg en plan etter ditt faktiske trafikknivå, og mål effekten på ditt eget nettsted.