Voeg Socialjuice toe aan React of Next.js
Bewaar de ingesloten URL's en laad browserscripts één keer in een herbruikbare component.
Bijgewerkt
Het huidige Socialjuice-dashboard met voorbeeldgegevens. De labels volgen de taal van je dashboard.
Begin met uw eigen fragment
Maak de widget en sla deze op in Website-widgets, of kopieer het fragment van het reviewformulier uit Reviewformulieren. Bewaar elke URL, queryparameter, spatie-ID, widget-ID en filter. Een voorbeeld-ID van een andere site geeft de inhoud van iemand anders weer.
Bouw het onderdeel
- Plaats het iframe in een component op de beoogde locatie. Converteer HTML-kenmerken naar React-equivalenten, zoals className en allowFullScreen. Geef het iframe een beschrijvende titel.
- Houd de browser-only initialisatie op de client. Volg in Next.js de clientcomponent- en scriptconventies van uw project.
- Als het geleverde fragment een resize-helper gebruikt, laadt u dat externe script één keer. Initialiseer alleen nadat zowel het helper- als het doel-iframe bestaan.
- Ruim handlers voor het wijzigen van de grootte op wanneer de component wordt ontkoppeld en vermijd dubbele ID's of initialisatie bij het navigeren tussen routes.
- Houd het frame responsief binnen het bovenliggende frame. Voor een reviewformulier behoudt u de meegeleverde camera- en microfoonrechten en gebruikt u HTTPS.
Controleer navigatie en mobiel
Test het laden van de eerste pagina en de navigatie heen en terug. Controleer of het iframe niet tweemaal is geïnitialiseerd en of de pagina niet horizontaal scrollt. Een reviewformulier moet ook een normale 'open-in-nieuw-tabblad'-link hebben voor browsers die ingebedde opnames blokkeren.
Gebruik instructies voor het insluiten van agenten in het dashboard en kies React / Next.js voor een overdracht met het exacte fragment. Installeer geen scripts voor gestructureerde gegevens binnen het iframe; die horen bij de hostpagina.