Så lägger du till en videobubbla i React eller Vue

Hur installerar du CompleteGreet i React eller Vue?

En videobubbla kan läggas till i React eller Vue med integrationskoden från CompleteGreet. Rätt metod beror på projektet och om sidorna renderas i webbläsaren eller på servern. Följ den aktuella installationsguiden i stället för att anta att samma kod passar överallt.

Ett vanligt arbetsflöde ser ut så här:

1. Logga in i CompleteGreet och öppna området för installation eller webbplatser. Menynamnet kan ändras mellan versioner.
2. Välj den plattform eller integrationsmetod som passar projektet. För en vanlig React- eller Vue-konfiguration kan en generell HTML-integration vara aktuell.
3. Kopiera koden som visas för din webbplats. Kontrollera att den innehåller rätt webbplats-id och kommer från ditt konto.
4. Lägg koden på den plats som den aktuella dokumentationen från ramverket och CompleteGreet rekommenderar och spara ändringen.
5. Starta utvecklingsmiljön och besök flera rutter. Kontrollera var widgeten visas och om den laddas utan fel.

Om bubblan inte visas bör du kontrollera cache, konsolfel, domänregler och samtyckesinställningar innan du ändrar koden.

Hur fungerar det med Next.js och Nuxt?

Med Next.js eller Nuxt måste du ta hänsyn till serverrendering. Widgetkod som använder webbläsarobjekt får bara köras på klientsidan.

I Next.js bör du använda den klientbaserade skriptmetod som rekommenderas för projektets version. Kontrollera laddningsstrategin och testa att widgeten inte skapar hydreringsfel.

I Nuxt kan en klientbaserad plugin eller en annan dokumenterad metod användas. Filnamn och konfiguration varierar mellan Nuxt-versioner, så jämför med den aktuella Nuxt-dokumentationen före implementeringen.

När widgeten är laddad måste du testa hur den beter sig vid ruttändringar. Anta inte att den automatiskt behåller rätt tillstånd på alla rutter.

Vad kan du anpassa i React eller Vue?

Inriktning efter sida och besökare

Om kontot erbjuder sidregler kan du välja bestämda rutter, till exempel en pris- eller demosida. Andra villkor, som enhet, tid på sidan eller skrolldjup, måste kontrolleras i det aktuella abonnemanget.

Regler som hanteras i panelen kan uppdateras utan en ny driftsättning av själva webbplatsen. Testa ändå hur ändringen läses in i den aktuella integrationen.

Handlingar och klickbeteende

Knappen i videobubblan kan använda handlingarna som erbjuds i kontot, till exempel att öppna en webbadress eller starta en annan godkänd handling. Bygg inte kring en integration förrän du har bekräftat att den stöds.

Om CompleteGreet erbjuder dokumenterade händelser eller API:er för React eller Vue kan de kopplas till applikationslogiken. Håll integrationen åtskild från ruttning och tillstånd och testa felsituationer.

Formulärfält och fördelning av förfrågningar

Om abonnemanget innehåller ett formulär kan du välja tillgängliga fält och etiketter. Be bara om uppgifter du behöver och kontrollera validering och samtycke före publicering.

Inskickningar kan eventuellt skickas vidare med integrationer eller webhooks som stöds. Bekräfta vilka mål som finns och undvik att skicka personuppgifter till en kanal utan rätt åtkomstkontroll.

Visuell profil och placering

Anpassa tillgängliga färger, hörn och miniatyrbild till webbplatsen. Välj en placering som inte krockar med fast navigering, chatt, varukorg eller andra flytande element.

Bland videowidgetar för moderna webbplatser bör du kontrollera hur typsnitt och CSS ärvs i just ditt projekt. Utgå inte från att typografin alltid anpassas automatiskt utan testning.

Hämta den aktuella integrationskoden från ditt CompleteGreet-konto.

Använd den aktuella import- eller skriptkoden från dokumentationen.

Lägg in ditt webbplats-id med den metod som dokumentationen anger.

Se den statiska översikten ovan för hela arbetsflödet.

Vad bör du kontrollera före publicering?

Testa videobubblan på riktiga enheter före publicering. Safari på iOS och Chrome på mobil kan bete sig olika, och den flytande knappen måste fungera tillsammans med navigeringen.

Mät Core Web Vitals före och efter installationen. En videobubbla bör inte skjuta viktiga prestandamätvärden över gränserna i den aktuella vägledningen. Googles vägledning för Web Vitals förklarar hur du bedömer layoutförändringar och andra mätvärden. Kontrollera att utrymmet för widgeten inte flyttar innehåll medan skriptet laddas.

Gå igenom sidreglerna på alla relevanta rutter. I React och Vue kan widgeten ligga kvar vid ruttändringar eller laddas om, beroende på var och hur integrationen är placerad.

Bekräfta att hälsningen bara visas på de valda webbadresserna och att den döljs i kassaflöden, konton eller privata områden där den inte hör hemma.

Mobildata glöms ofta bort vid testning.

En bakgrundsvideo som startar automatiskt på varje sida kan använda onödigt mycket data. Visa hellre en statisk miniatyrbild med en tydlig uppspelningsknapp så att besökaren själv väljer när videon ska laddas.

Kontrollera också lagerordningen mot modaler, menyer och paneler. En hamburgermeny kan hamna under videobubblan, eller bubblan kan döljas bakom ett popupfönster. Sådana konflikter syns ofta först på den riktiga webbplatsen.

Testa till sist hela besöksresan som en utloggad användare. Töm cache och relevanta kakor och gå från landningssidan till den önskade handlingen. En videobubbla ska kännas som en naturlig del av upplevelsen, inte som ett störande popupfönster.

Hämta den aktuella skriptkoden från ditt CompleteGreet-konto.

Vanliga frågor

Hur lägger jag till CompleteGreet i React utan att göra paketet onödigt stort?

Använd den integrationsmetod som rekommenderas i den aktuella dokumentationen. Mät paketstorlek, nätverksförfrågningar och renderingsprestanda före och efter, eftersom ingen extern resurs är helt kostnadsfri.

Varför visas inte CompleteGreet-bubblan under lokal utveckling i React?

Kontrollera först webbadressen och porten mot domänreglerna i kontot. Leta sedan efter konsolfel, blockering från samtyckesverktyg, cache och om skriptet faktiskt laddas.

Gör CompleteGreet React-appen långsammare?

Alla externa integrationer kan påverka prestandan. Mät Core Web Vitals, nätverk, huvudtråd och videoladdning på representativa sidor och enheter i stället för att förlita dig på ett fast löfte om filstorlek eller tid.

Kan jag visa olika CompleteGreet-videor på olika rutter i React Router?

Det beror på vilka kampanj-, rutt- och API-funktioner den aktuella CompleteGreet-lösningen erbjuder. Använd bara dokumenterade metoder och testa hur widgeten uppdateras när webbadressen ändras.

Fungerar CompleteGreet med serverrenderade React-ramverk som Next.js?

En klientbaserad integration kan fungera i serverrenderade ramverk när den laddas på rätt plats. Följ dokumentationen för den aktuella Next.js-versionen och testa att koden inte körs på servern eller skapar hydreringsfel.

Vad kostar CompleteGreet för en React-baserad SaaS-tjänst med omkring 10 000 besökare i månaden?

Pris, besöksgräns och beräkningsmodell kan ändras. Använd den aktuella prissidan eller kontot för att hitta rätt abonnemang och kontrollera hur unika besökare och eventuella överskridanden hanteras.