Så lägger du till en videobubbla på valfri webbplats med HTML

Hur installerar du CompleteGreet i HTML?

Så här lägger du till en videobubbla på en vanlig HTML-webbplats. Installationen fungerar på statiska sidor, single page-appar och andra lösningar där HTML levereras direkt.

Här är ordningen:

1. Skapa ditt konto och din kontrollpanel: Skapa ett konto hos CompleteGreet och öppna huvudkontrollpanelen. Hitta den blå knappen “New Widget” uppe till höger och klicka på den. Widgetbyggaren öppnas med en tom mall och en knapp för videoinspelning.
2. Spela in eller ladda upp din hälsning: Klicka på inspelningsknappen för att filma direkt i webbläsaren eller ladda upp en MP4-fil från datorn. Förhandsvisningen visar hur bubblan ser ut på dator och mobil. Håll videon kort så att du kan testa sidans hastighet på din egen sida.
3. Anpassa utseendet: Använd menyn till vänster för att välja bubblans placering, färg och profilbild. Längst ner till höger är en bra utgångspunkt, men testa placeringen mot din egen navigation och dina egna knappar.
4. Välj din uppmaning: Öppna fliken “Interactions” för att lägga till knapptext som “Boka ett möte” eller “Se priser” och ange relevant URL. Du kan också slå på ett formulär som samlar in kontaktuppgifter före eller efter videon.
5. Kopiera installationskoden: Klicka på “Save & Get Code” högst upp. Ett fönster visar en skripttagg. Kopiera den och lägg in den precis före den avslutande taggen i HTML-filen. Skriptet laddas asynkront så att det inte bör blockera sidans första visning.

Det är hela installationen. Bubblan blir normalt synlig vid nästa laddning, men testa alltid den publicerade sidan i de webbläsare och på de enheter som dina besökare använder.

Om du använder en statisk webbplatsgenerator som Jekyll, Hugo eller Eleventy lägger du in samma skript i grundmallen. I single page-appar byggda med React eller Vue fungerar koden på samma sätt när den läggs till efter att sidan monterats. Du behöver inte installera ett npm-paket.

En detalj som många förbiser är data-widget-id-attributet i skriptet. Det kopplar installationen till vald widget. Om du skapar flera widgets för olika sidor får varje widget ett eget ID. I kontrollpanelen kan du kopiera en widget när samma hälsning ska användas på flera ställen.

Testa installationen i ett privat eller inkognitofönster. Bubblan bör visas i hörnet efter att sidan har laddats. Om den inte syns kontrollerar du skriptfel i webbläsarens konsol och att widgeten är aktiv i kontrollpanelen.

Vad kan du anpassa i HTML?

På HTML-webbplatser fungerar det mesta som på administrerade plattformar. Den viktigaste skillnaden är att du själv styr sidmålstyrningen i stället för att välja den i en kontrollpanel.

Sidmålstyrning i HTML styrs av URL:en.

Du kan visa widgeten på bestämda sökvägar genom att lägga till ett dataattribut i embedkoden. Många visar olika hälsningar på prissidor och blogginlägg. Om sidan är en single page-app kan du behöva utlösa widgeten manuellt när rutten byts via JavaScript-API:et. Det kräver mer testning än en vanlig appinstallation eftersom din egen kod styr visningen.

CTA:er och formulär

Knapparna i widgeten kan redigeras. Du kan länka dem till Calendly, en Stripe-betalning eller en vanlig mailto-länk. Välj bara handlingar som passar besökarens nästa steg.

Formulärfälten ger dig den viktigaste anpassningen.

Du väljer själv om formuläret ska be om namn, e-post, telefon eller extra frågor om budget och tidsplan. Formuläret kan visas före videon eller därefter. På HTML-sidor kan data också skickas till din egen endpoint i stället för den vanliga aviseringen om leads ska gå direkt till CRM:et.

Varumärke och placering

Bubblans färg, storlek och placering kan justeras i kontrollpanelen. På HTML kan du också skriva över utseendet med CSS om din varumärkesfärg inte finns bland standardvalen. Längst ner till höger är standarden, men en annan placering kan fungera bättre om du redan har en chattknapp. Testa på både dator och mobil innan du väljer den slutliga placeringen. videobubbelverktyg binder dig ofta till leverantörens varumärke i gratisplaner. Kontrollera den aktuella CompleteGreet-planen för uppgifter om varumärke och funktioner.

En HTML-installation kan också döljas bakom andra element om de har ett högt z-index-värde.

Om navigationen eller en popup har ett högt z-index-värde kan videobubblan hamna under den. Anpassa widgetens z-index i din egen stilmall och testa därefter mot cookie-banner, meny och chattverktyg. Eftersom skriptet laddas asynkront ska denna CSS-regel ligga i den centrala stilmallen.

Installationsskriptet med den unika widgetidentifieraren från kontrollpanelen

Lägg in installationsskriptet i body-elementet tillsammans med ditt övriga sidinnehåll

See the static HTML data above for the full breakdown.

Vad ska du kontrollera innan du publicerar?

Öppna sidan i Chrome, Safari och Firefox innan du publicerar den. Videobubblan bör ligga i ett hörn utan att täcka navigation, sidfot eller viktiga knappar.

Mobilen ska prioriteras.

Många besökare ser sidan på en telefon. Öppna den i iOS Safari och Android Chrome. Bubblan ska anpassa sig till skärmen utan att tvinga videon till helskärm och stängningsknappen ska vara lätt att nå med en hand. Om widgeten täcker mobilmenyn eller en betalningsknapp justerar du placeringen i kontrollpanelen.

Kontrollera att reglerna för sidmålstyrning fungerar. Besök sidor där widgeten inte ska visas och bekräfta att den förblir dold. Kontrollera också att den bara laddas på de URL:er du har angett.

Kör ett hastighetstest med Google PageSpeed Insights efter installationen. Videor och andra skript påverkar olika sidor på olika sätt. Om LCP försämras kontrollerar du att skriptet laddas asynkront och att videofilen har en storlek som sidan kan hantera.

Testa formuläret från början till slut. Fyll i kontaktformuläret i widgeten, skicka det och kontrollera att förfrågningen når inkorgen eller CRM:et. Ett formulär som misslyckas skapar snabbt mindre förtroende än ett formulär som saknas.

Skripttaggen från CDN:et med ditt unika webbplats-ID från kontrollpanelen

Vanliga frågor

Hur lägger jag till CompleteGreet på en HTML-sida utan att redigera kodfiler?

En ren HTML-installation kräver att ett skript läggs in i HTML-koden. Många webbplatsbyggare har dock ett HTML-fält eller område för anpassad kod, så du kan lägga in koden utan att ändra kärnfiler. Kopiera embedkoden från CompleteGreet, öppna sidans HTML-editor och lägg in den före den avslutande taggen. Bubblan bör därefter synas på den publicerade sidan när widgeten är aktiv.

Var ska jag exakt lägga in CompleteGreet-skriptet i min HTML?

Lägg in skriptet precis före den avslutande taggen på varje sida där bubblan ska visas. Då laddas sidans eget innehåll först. Om bubblan bara ska visas på bestämda sidor kan du lägga in skriptet där eller använda målreglerna i kontrollpanelen.

Varför visas min videobubbla inte i HTML-förhandsvisningen?

Förhandsvisningar kan dölja bubblan på grund av webbläsarregler eller en begränsad iframe. Testa den publicerade sidan i ett vanligt webbläsarfönster. Vissa HTML-redigerare tar bort JavaScript av säkerhetsskäl. Kontrollera därför också att skriptet inte ligger i en kommentar eller i taggar som hindrar körning.

Kan jag bara visa CompleteGreet på bestämda HTML-sidor, till exempel min prissida?

Ja. Lägg bara in skriptet på de HTML-filer där bubblan ska visas. Du kan också lägga in det på hela webbplatsen och använda URL-regler i kontrollpanelen för att visa eller dölja widgeten på bestämda sökvägar. Testa reglerna på både sidor där bubblan ska visas och sidor där den inte ska visas.

Gör CompleteGreet en HTML-sida långsammare?

Skriptet laddas asynkront efter sidans innehåll, men den verkliga effekten beror på nätverk, enhet, videor och andra skript. Mät din egen sida med Google PageSpeed Insights före och efter installationen och ladda videofiler först när en besökare använder widgeten.

Hur testar jag videobubblan på mobil på min HTML-sida?

Öppna den publicerade HTML-sidan på en riktig telefon eller använd webbläsarens enhetsläge. Kontrollera att bubblan anpassar sig till skärmen, att videon spelas upp och att formuläret kan skickas. Kontrollera också att stängningsknappen är lätt att nå och att widgeten inte täcker betalningsknappar eller navigation.

Vad kostar CompleteGreet per månad?

Se den aktuella prissidan för nuvarande planer och besöksgränser. Priser och funktioner kan förändras, så använd inte äldre belopp från denna vägledning som erbjudande. Välj en plan efter din faktiska trafiknivå och mät effekten på din egen webbplats.