Aggiungi Socialjuice a React o Next.js
Conserva gli URL incorporati e carica gli script del browser una volta in un componente riutilizzabile.
Aggiornato
Dashboard Socialjuice attuale con dati di esempio. Le etichette seguono la lingua della dashboard.
Inizia con il tuo frammento
Crea e salva il widget nei widget del sito web oppure copia lo snippet del modulo di raccolta dai moduli di raccolta. Conserva ogni URL, parametro di query, ID spazio, ID widget e filtro. Un ID di esempio da un altro sito mostrerà il contenuto di qualcun altro.
Costruisci il componente
- Posiziona l'iframe in un componente nella posizione prevista. Converti gli attributi HTML in equivalenti React, come className eallowFullScreen. Assegna all'iframe un titolo descrittivo.
- Mantieni l'inizializzazione solo del browser sul client. In Next.js, segui le convenzioni del componente client e dello script del tuo progetto.
- Se lo snippet fornito utilizza un helper di ridimensionamento, carica lo script esterno una volta. Inizializza solo dopo che sono presenti sia l'helper che l'iframe di destinazione.
- Pulisci i gestori di ridimensionamento quando il componente viene smontato ed evita ID duplicati o inizializzazioni durante la navigazione tra percorsi.
- Mantieni il frame reattivo all'interno del suo genitore. Per un modulo di raccolta, conserva le autorizzazioni della fotocamera e del microfono fornite e utilizza HTTPS.
Verifica navigazione e cellulare
Testa il caricamento iniziale della pagina e la navigazione avanti e indietro. Controlla che l'iframe non venga inizializzato due volte e che la pagina non scorra in orizzontale. Un modulo di raccolta dovrebbe anche avere un normale collegamento di apertura in una nuova scheda per i browser che bloccano la registrazione incorporata.
Utilizza le istruzioni di incorporamento dell'agente nella dashboard e scegli React/Next.js per un trasferimento contenente lo snippet esatto. Non installare script di dati strutturati all'interno dell'iframe; quelli appartengono alla pagina host.