Sådan føjer du en videoboble til React eller Vue

Hvordan installerer du CompleteGreet i React eller Vue?

En videoboble kan føjes til React eller Vue med integrationskoden fra CompleteGreet. Den rigtige metode afhænger af projektet, og om siderne gengives i browseren eller på serveren. Følg den aktuelle installationsvejledning i stedet for at antage, at den samme kode passer alle steder.

En almindelig arbejdsgang ser sådan ud:

1. Log ind i CompleteGreet, og åbn området til installation eller websites. Menunavnet kan ændre sig mellem versioner.
2. Vælg den platform eller integrationsmetode, der passer til projektet. Til en almindelig React- eller Vue-opsætning kan en generel HTML-integration være relevant.
3. Kopiér den kode, der vises for dit website. Kontrollér, at den indeholder det rigtige website-id og kommer fra din konto.
4. Placer koden dér, hvor den aktuelle dokumentation til frameworket og CompleteGreet anbefaler det, og gem ændringen.
5. Start udviklingsmiljøet, og besøg flere ruter. Kontrollér, hvor widgetten vises, og om den indlæses uden fejl.

Hvis boblen ikke vises, bør du kontrollere cache, fejl i konsollen, domæneregler og samtykkeindstillinger, før du ændrer koden.

Hvad med Next.js og Nuxt?

Med Next.js eller Nuxt skal du tage højde for serverrendering. Widgetkode, der bruger browserobjekter, må kun køre på klientsiden.

I Next.js bør du bruge den klientbaserede scriptmetode, der anbefales til den version, projektet benytter. Kontrollér indlæsningsstrategien, og test, at widgetten ikke skaber hydreringsfejl.

I Nuxt kan du bruge et klientbaseret plugin eller en anden dokumenteret metode. Filnavne og konfiguration varierer mellem Nuxt-versioner, så sammenlign med den aktuelle Nuxt-dokumentation før implementering.

Når widgetten er indlæst, skal du teste, hvordan den opfører sig ved ruteskift. Antag ikke, at den automatisk bevarer den rigtige tilstand på alle ruter.

Hvad kan du tilpasse i React eller Vue?

Målretning efter side og besøgende

Hvis kontoen tilbyder sideregler, kan du vælge bestemte ruter, for eksempel en pris- eller demoside. Andre betingelser som enhed, tid på siden eller scrolldybde skal kontrolleres i den aktuelle plan.

Regler, der administreres i kontrolpanelet, kan opdateres uden en ny udrulning af selve websitet. Test dog stadig, hvordan ændringen indlæses i den konkrete integration.

Handlinger og klikadfærd

Knappen i videoboblen kan bruge de handlinger, som kontoen tilbyder, for eksempel at åbne en webadresse eller starte en anden godkendt handling. Byg ikke omkring en integration, før du har bekræftet, at den understøttes.

Hvis CompleteGreet tilbyder dokumenterede hændelser eller API’er til React eller Vue, kan de kobles til applikationens logik. Hold integrationen adskilt fra routing og tilstand, og test fejlsituationer.

Formularfelter og videresendelse af henvendelser

Hvis planen indeholder en formular, kan du vælge de tilgængelige felter og etiketter. Bed kun om de oplysninger, du har brug for, og kontrollér validering og samtykke før udgivelse.

Indsendelser kan eventuelt sendes videre med understøttede integrationer eller webhooks. Bekræft, hvilke destinationer der findes, og undgå at sende personoplysninger til en kanal uden den rette adgangskontrol.

Visuelt udtryk og placering

Tilpas de tilgængelige farver, hjørner og miniaturebilleder til websitet. Vælg en placering, der ikke kolliderer med fast navigation, chat, indkøbskurv eller andre flydende elementer.

Blandt videowidgets til moderne websites bør du kontrollere, hvordan skrifttyper og CSS nedarves i netop dit projekt. Regn ikke med, at typografien altid tilpasses automatisk uden test.

Hent den aktuelle integrationskode fra din CompleteGreet-konto.

Brug den aktuelle import- eller scriptkode fra dokumentationen.

Indsæt website-id'et med den metode, som dokumentationen angiver.

Se den statiske oversigt ovenfor for hele arbejdsgangen.

Hvad bør du kontrollere, før du udgiver?

Test videoboblen på rigtige enheder før udgivelse. iOS Safari og Chrome på mobil kan opføre sig forskelligt, og den flydende knap skal fungere sammen med navigationen.

Mål Core Web Vitals før og efter installationen. En videoboble bør ikke skubbe vigtige ydelsesmålinger over grænserne i den aktuelle vejledning. Googles vejledning til Web Vitals forklarer, hvordan du vurderer layoutændringer og andre målinger. Kontrollér, at pladsen til widgetten ikke flytter indhold, mens scriptet indlæses.

Gennemgå sidereglerne på alle relevante ruter. I React og Vue kan widgetten blive liggende ved ruteskift eller blive indlæst igen, afhængigt af hvor og hvordan integrationen er placeret.

Bekræft, at hilsenen kun vises på de valgte webadresser, og at den skjules i checkoutforløb, kontoområder eller private områder, hvor den ikke hører hjemme.

Mobildata bliver ofte overset under test.

En baggrundsvideo, der starter automatisk på hver side, kan bruge unødigt meget data. Vis i stedet et statisk miniaturebillede med en tydelig afspilningsknap, så den besøgende selv vælger, hvornår videoen indlæses.

Kontrollér også lagrækkefølgen i forhold til modaler, menuer og paneler. En hamburgermenu kan ende under videoboblen, eller boblen kan blive skjult bag et popupvindue. Den slags konflikter viser sig ofte først på det rigtige website.

Test til sidst hele besøgsrejsen som en bruger, der ikke er logget ind. Ryd cache og relevante cookies, og gå fra landingssiden til den ønskede handling. En videoboble skal føles som en naturlig del af oplevelsen, ikke som et forstyrrende popupvindue.

Hent den aktuelle scriptkode fra din CompleteGreet-konto.

Ofte stillede spørgsmål

Hvordan føjer jeg CompleteGreet til React uden at gøre pakken unødigt stor?

Brug den integrationsmetode, der anbefales i den aktuelle dokumentation. Mål pakkestørrelse, netværksanmodninger og gengivelsesydelse før og efter, fordi ingen ekstern ressource er helt uden omkostninger.

Hvorfor vises CompleteGreet-boblen ikke under lokal udvikling i React?

Kontrollér først webadressen og porten i forhold til domænereglerne på kontoen. Se derefter efter fejl i konsollen, blokering fra samtykkeværktøjer, cache og om scriptet faktisk indlæses.

Gør CompleteGreet React-appen langsommere?

Enhver ekstern integration kan påvirke ydelsen. Mål Core Web Vitals, netværk, hovedtråden og videoindlæsning på repræsentative sider og enheder i stedet for at stole på et fast løfte om filstørrelse eller tid.

Kan jeg vise forskellige CompleteGreet-videoer på forskellige ruter i React Router?

Det afhænger af, hvilke kampagne-, rute- og API-funktioner den aktuelle CompleteGreet-løsning tilbyder. Brug kun dokumenterede metoder, og test, hvordan widgetten opdateres, når webadressen ændres.

Virker CompleteGreet med serverrenderede React-frameworks som Next.js?

En klientbaseret integration kan fungere i serverrenderede frameworks, når den indlæses det rigtige sted. Følg dokumentationen til den aktuelle Next.js-version, og test, at koden ikke kører på serveren eller skaber hydreringsfejl.

Hvad koster CompleteGreet til en React-baseret SaaS-tjeneste med omkring 10.000 månedlige besøgende?

Pris, besøgsgrænse og beregningsmodel kan ændre sig. Brug den aktuelle prisside eller kontoen til at finde den rigtige plan, og kontrollér, hvordan unikke besøgende og eventuelle overskridelser behandles.