Så lägger du till en videobubbla på Webflow

Kort sagt lägger du in skriptet från CompleteGreet i inställningarna för Webflow-projektet och publicerar webbplatsen. Kontrollera sedan bubblan på de sidor där den ska visas.

En enkel installation kan gå snabbt, men räkna också med tid för video, design, samtycke, regler och testning. Du behöver vanligtvis inte lägga in kod på varje enskild sida.

CompleteGreet använder de planer och gränser som visas på den aktuella prissidan och i kontot. Utgå inte från gamla priser, rabatter eller regler för extra användning. Jämför det förväntade antalet besökare med den kapacitet och de funktioner som faktiskt ingår nu, särskilt om trafiken varierar under året eller ökar under en kampanj.

Tillgång till egen kod på en publicerad domän beror på den aktuella Webflow-planen. Du kan använda en lämplig testdomän när planen och upplägget tillåter det.

Färg, placering och handlingsknappar kan anpassas utan att du skriver egen CSS. Kontrollera ändå resultatet mot webbplatsens verkliga utformning.

CompleteGreet är främst gjort för videohälsningar och enkla handlingar, inte komplicerade enkäter. På Webflow kan lösningen ge webbplatsen en mänsklig prägel utan att göra användarresan onödigt tung.

Hur installerar du CompleteGreet på Webflow?

Att lägga till en videobubbla på en Webflow-webbplats kräver ett skript och ett publicerat test. Tillgång till egen kod på en aktiv domän beror på den aktuella Webflow-planen, medan en testdomän kan användas när upplägget stöder det.

Följ de här stegen:

1. Logga in i CompleteGreet och skapa widgeten. Välj video, skriv en kort hälsning och ställ in hur den ska visas.

2. Spara widgeten och öppna delen med installationskoden. Kopiera hela skriptet som hör till rätt widget och webbplats.

3. Öppna Webflow-projektet, gå till projektinställningarna och hitta delen för egen kod. Lägg CompleteGreet-skriptet på den plats som rekommenderas i den aktuella dokumentationen.

4. Spara inställningarna och publicera webbplatsen. Egen kod körs inte alltid i designverktygets förhandsvisning, så kontrollera den publicerade adressen eller testdomänen.

Det här skapar ofta förvirring: Webflow kör egen kod på publicerade sidor, men inte alltid i designverktyget eller en skrivskyddad förhandsvisning. Webflows officiella hjälpcenter förklarar detta. Om bubblan inte syns medan du redigerar bör du öppna den publicerade adressen och kontrollera den där.

Efter publicering bör du ladda om sidan utan gammal cache så att du ser de senaste resurserna.

Bubblan ska visas på den plats du har valt utan att täcka viktigt innehåll eller starta ljud utan en handling från besökaren.

Vad kan du anpassa i Webflow?

Du kan styra målgrupp, sidor, handlingar och bubblans utseende. Vilka val som finns beror på den aktuella versionen och planen.

Sidor och målgrupper

Sidregler gör det möjligt att visa en hälsning på till exempel prissidan utan att visa den i hela bloggen. Börja med några få viktiga sidor och testa både inkluderingar och undantag.

Om dagens upplägg stöder det kan nya och återkommande besökare få olika meddelanden.

Du kan också överväga målgrupper utifrån trafikkälla. Använd dem bara när spårning, samtycke och funktion har kontrollerats i kontot.

Handlingsknappar och formulär

En knapp kan öppna en kalender, en nedladdning eller en annan sida. Välj en tydlig text som passar sidan och mät den faktiska handlingen.

Testa en variant i taget på riktig trafik. Du behöver inte ändra Webflow-koden för att justera texten i CompleteGreet.

Formulären som finns i widgeten kan samla in kontaktuppgifter utan att skicka besökaren bort från sidan. Kontrollera fält, obligatoriska uppgifter, samtycke och lagring i dagens upplägg.

Kontrollera i CompleteGreet att varje testinskick registreras på rätt plats.

Kontrollera också aviseringar och stödda integrationer före publicering. Skicka inte en riktig extern förfrågan utan särskilt tillstånd.

Visuell profil och placering

Anpassa logotyp, färger, miniatyrbild och placering med de val som finns nu. Bubblan måste ha avstånd till meny, samtyckesbanner, chatt och viktiga knappar.

Kontrollera hörn, skugga och den första hälsningen i den visuella redigeraren. Håll texten kort på små skärmar, men använd den verkliga utformningen som facit.

Glöm inte mobilvisningen. Använd en mer kompakt variant eller dölj bubblan på små skärmar om funktionen finns och det passar. Testa de faktiska skärmbredderna i projektet.

En allmän bubbla kan kännas som ett främmande popup-fönster. Rätt färger, bra placering och en tydlig handling gör den till en naturligare del av sidan. Se också vår jämförelse av videowidgetar för fler saker att kontrollera.

Se den statiska översikten ovan för alla steg.

Vad bör du kontrollera före publicering?

Före publicering bör du gå igenom hela upplägget i flera webbläsare på dator. Öppna den publicerade sidan i de webbläsare målgruppen använder och kontrollera placering, uppspelning, stängningsknapp, undertexter och samspelet med andra fasta element. Se särskilt till att videobubblan visas i rätt hörn, reagerar på klick och inte täcker navigering, samtyckesbanner eller viktiga knappar.

Mobiltestning är lika viktig. Hur stor del av trafiken som kommer från telefon varierar, så använd egna data och testa alltid widgeten på små skärmar.

Öppna webbplatsen i Safari på iOS och Chrome på Android. Bubblan ska anpassa sig till skärmen, spela upp videon som förväntat och ha en stängningsknapp som är lätt att nå. Justera placeringen om den täcker meny eller betalning.

Kontrollera sedan reglerna för sidorna.

Se till att widgeten bara laddas där den hjälper. Testa varje adressregel, även varianter med och utan avslutande snedstreck, och uteslut sidor där bubblan kan störa en viktig handling.

Mät också prestandan. Video och skript lägger till resurser på sidan. Följ Googles vägledning om Web Vitals och jämför sidan före och efter installationen. Om resultaten blir sämre bör du kontrollera skriptladdning, videoformat, filstorlek och startbeteende.

Testa hela formulärflödet med lämpliga testuppgifter. Bekräfta att data lagras och levereras som planerat innan du räknar upplägget som färdigt.

Publicera först när placering, regler, tillgänglighet, prestanda och eventuella formulär har kontrollerats.

Vanliga frågor

Vad kostar CompleteGreet och vad ingår i planen?

Pris, antal besökare, webbplatser, bubblor och inkluderade funktioner beror på den aktuella planen. Årsbetalning, rabatter och gränserna för varje plan kan ändras. Kontrollera därför prissidan, villkoren och kontot innan du jämför alternativ. Se också hur återkommande besök, extra trafik och eventuella planändringar hanteras så att budgeten bygger på dagens regler.

Fungerar CompleteGreet med Shopify, WordPress och specialbyggda React-webbplatser?

CompleteGreet kan användas på stödda plattformar som Shopify, WordPress, Wix, Squarespace, Webflow och WooCommerce samt på specialbyggda webbplatser som accepterar den nödvändiga koden. Installationsmetoden kan vara en app, en integration eller ett skript. Kontrollera den aktuella dokumentationen, samtycket, temat och resultatet på varje plattform. Utgå inte från att samma funktioner eller laddningsmetod gäller överallt.

Hur lång tid tar det att konfigurera CompleteGreet på en webbplats?

Tidsåtgången beror på videon, plattformen, designen, samtycket, visningsreglerna och testningen. En enkel installation kan gå snabbt, men räkna också med tid för inspelning, undertexter, miniatyrbild, mobilvisning och kontroll av formulär. Använd installationsmetoden i den aktuella dokumentationen för plattformen. Ingen viss tidsåtgång eller automatisk prestanda kan garanteras innan den verkliga sidan har testats.

Vilka företag bör välja CompleteGreet framför livechatt?

Lösningen kan passa tjänsteföretag, rådgivare, konsulter och nätbutiker som vill visa en riktig person innan besökaren tar kontakt. En kort videohälsning kan förklara erbjudandet eller visa nästa handling, men effekten måste mätas på webbplatsen. Om en omedelbar konversation med en medarbetare behövs kan livechatt vara ett bättre val. Företag med komplicerade frågor eller bemannad support bör överväga om de behöver båda.

Hur räknar CompleteGreet unika besökare vid fakturering?

Räkningen följer definitionen och reglerna i den aktuella planen. Kontrollera hur en unik besökare definieras, vilken period som används och hur återkommande besök, olika enheter och flera videovisningar behandlas. Se också vad som händer när trafiken närmar sig eller passerar gränsen. Använd inte en äldre artikel som facit för faktureringen eftersom planer och villkor kan ändras.

Vilka begränsningar bör jag känna till innan jag väljer CompleteGreet?

CompleteGreet är gjort för videohälsningar, förtroendeskapande och enkla handlingar. Det är inte ett verktyg för komplicerade enkäter, långa villkorsstyrda formulär eller livechatt i två riktningar. Om du behöver många förgreningar, avancerad datainsamling eller en löpande konversation med en medarbetare bör du välja ett specialiserat verktyg. Kontrollera också dagens gränser, integrationer, tillgänglighet och integritetskrav innan du bestämmer dig.