Slik legger du til en videoboble i React eller Vue

Hvordan installerer du CompleteGreet i React eller Vue?

En videoboble kan legges til i React eller Vue med integrasjonskoden fra CompleteGreet. Den riktige metoden avhenger av prosjektet og om sidene rendres i nettleseren eller på serveren. Følg den gjeldende installasjonsveiledningen fremfor å anta at samme kode passer overalt.

En vanlig arbeidsflyt ser slik ut:

1. Logg inn i CompleteGreet og åpne området for installasjon eller nettsteder. Navnet på menyen kan endres mellom versjoner.
2. Velg plattformen eller integrasjonsmetoden som passer prosjektet. For et vanlig React eller Vue-oppsett kan en generell HTML-integrasjon være aktuell.
3. Kopier koden som vises for nettstedet ditt. Kontroller at den inneholder riktig nettsted-ID og kommer fra kontoen din.
4. Legg koden på stedet som rammeverkets og CompleteGreets gjeldende dokumentasjon anbefaler, og lagre endringen.
5. Start utviklingsmiljøet og besøk flere ruter. Kontroller hvor widgeten vises og om den lastes uten feil.

Hvis boblen ikke vises, kontroller hurtigbuffer, konsollfeil, domeneregler og samtykkeinnstillinger før du endrer koden.

Hva med Next.js og Nuxt?

Med Next.js eller Nuxt må du ta hensyn til serverrendering. Widgetkode som bruker nettleserobjekter, må bare kjøres på klientsiden.

I Next.js bør du bruke den klientbaserte skriptmetoden som anbefales for den versjonen prosjektet kjører. Kontroller lastestrategien og test at widgeten ikke skaper hydreringsfeil.

I Nuxt kan en klientbasert plugin eller en annen dokumentert metode brukes. Filnavn og konfigurasjon varierer mellom Nuxt-versjoner, så sammenlign med den aktuelle Nuxt-dokumentasjonen før du implementerer.

Når widgeten er lastet, må du teste hvordan den oppfører seg ved ruteendringer. Ikke anta at den automatisk beholder riktig tilstand på alle ruter.

Hva kan du tilpasse i React eller Vue?

Målretting etter side og besøkende

Hvis kontoen tilbyr sideregler, kan du velge bestemte ruter, for eksempel en pris- eller demoside. Andre betingelser, som enhet, tid på siden eller rulledybde, må kontrolleres i den gjeldende planen.

Regler som administreres i panelet kan oppdateres uten en ny utrulling av selve nettstedet. Test likevel hvordan endringen lastes inn i den aktuelle integrasjonen.

Handlinger og klikkoppførsel

Knappen i videoboblen kan bruke handlingene som tilbys i kontoen, for eksempel å åpne en nettadresse eller starte en annen godkjent handling. Ikke bygg rundt en integrasjon før du har bekreftet at den støttes.

Hvis CompleteGreet tilbyr dokumenterte hendelser eller API-er for React eller Vue, kan de kobles til applikasjonslogikken. Hold integrasjonen adskilt fra ruting og tilstand, og test feiltilfeller.

Skjemafelt og ruting av henvendelser

Hvis planen inneholder et skjema, kan du velge tilgjengelige felt og etiketter. Be bare om opplysninger du trenger, og kontroller validering og samtykke før publisering.

Innsendinger kan eventuelt sendes videre med støttede integrasjoner eller webhooker. Bekreft hvilke mål som finnes, og unngå å sende personopplysninger til en kanal uten riktig tilgangskontroll.

Visuell profil og plassering

Tilpass tilgjengelige farger, hjørner og miniatyrbilde til nettstedet. Velg en plassering som ikke kolliderer med fast navigasjon, chat, handlekurv eller andre flytende elementer.

Blant videowidgets for moderne nettsteder bør du kontrollere hvordan skrifter og CSS arves i akkurat ditt prosjekt. Ikke regn med at typografien alltid tilpasses automatisk uten testing.

Hent gjeldende integrasjonskode fra CompleteGreet-kontoen din.

Bruk den gjeldende import- eller skriptkoden fra dokumentasjonen.

Legg inn nettsted-ID-en med metoden som dokumentasjonen angir.

Se den statiske oversikten ovenfor for hele arbeidsflyten.

Hva bør du kontrollere før publisering?

Test videoboblen på faktiske enheter før publisering. iOS Safari og Chrome på mobil kan oppføre seg forskjellig, og den flytende knappen må fungere sammen med navigasjonen.

Mål Core Web Vitals før og etter installasjonen. En videoboble bør ikke skyve viktige ytelsesmålinger over grensene i den gjeldende veiledningen. Googles veiledning for Web Vitals forklarer hvordan du vurderer layoutendringer og andre målinger. Kontroller at plassen til widgeten ikke flytter innhold mens skriptet lastes.

Gå gjennom sidereglene på alle relevante ruter. I React og Vue kan widgeten bli liggende ved ruteendringer eller lastes på nytt, avhengig av hvor og hvordan integrasjonen er plassert.

Bekreft at hilsenen bare vises på de valgte nettadressene, og at den skjules i kasseflyt, kontoer eller private områder der den ikke hører hjemme.

Mobildata blir ofte glemt i testingen.

En bakgrunnsvideo som starter automatisk på hver side, kan bruke unødvendig mye data. Vis heller en statisk miniatyr med en tydelig avspillingsknapp, slik at den besøkende selv velger når videoen lastes.

Kontroller også lagrekkefølgen mot modaler, menyer og skuffer. En hamburgermeny kan havne under videoboblen, eller boblen kan bli skjult bak et popupvindu. Slike konflikter vises ofte først i det faktiske nettstedet.

Test til slutt hele besøksreisen som en utlogget bruker. Tøm hurtigbuffer og relevante informasjonskapsler, og gå fra landingsside til ønsket handling. En videoboble skal føles som en naturlig del av opplevelsen, ikke som et forstyrrende popupvindu.

Hent den gjeldende skriptkoden fra CompleteGreet-kontoen din.

Vanlige spørsmål

Hvordan legger jeg til CompleteGreet i React uten å gjøre pakken unødvendig stor?

Bruk den integrasjonsmetoden som anbefales i den gjeldende dokumentasjonen. Mål pakkestørrelse, nettverksforespørsler og renderingsytelse før og etter, fordi ingen ekstern ressurs er helt uten kostnad.

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

Kontroller først nettadressen og porten mot domenereglene i kontoen. Se deretter etter konsollfeil, blokkering fra samtykkeverktøy, hurtigbuffer og om skriptet faktisk lastes.

Gjør CompleteGreet React-appen tregere?

Enhver ekstern integrasjon kan påvirke ytelsen. Mål Core Web Vitals, nettverk, hovedtråden og videolasting på representative sider og enheter i stedet for å stole på et fast filstørrelses- eller tidsløfte.

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

Det avhenger av hvilke kampanje-, rute- og API-funksjoner den gjeldende CompleteGreet-løsningen tilbyr. Bruk bare dokumenterte metoder, og test hvordan widgeten oppdateres når nettadressen endres.

Fungerer CompleteGreet med serverrenderte React-rammeverk som Next.js?

En klientbasert integrasjon kan fungere i serverrenderte rammeverk når den lastes på riktig sted. Følg dokumentasjonen for den aktuelle Next.js-versjonen, og test at koden ikke kjøres på serveren eller skaper hydreringsfeil.

Hva koster CompleteGreet for en React-basert SaaS-tjeneste med omtrent 10 000 månedlige besøkende?

Pris, besøksgrense og beregningsmodell kan endres. Bruk den gjeldende prissiden eller kontoen til å finne riktig plan, og kontroller hvordan unike besøkende og eventuelle overskridelser behandles.