Adicione Socialjuice ao React ou Next.js
Preserve os URLs incorporados e carregue os scripts do navegador uma vez em um componente reutilizável.
Atualizado
Painel atual do Socialjuice com dados de exemplo. Os rótulos seguem o idioma do seu painel.
Comece com seu próprio trecho
Crie e salve o widget em Widgets de site ou copie o snippet de formulário de coleção em Formulários de coleção. Preserve cada URL, parâmetro de consulta, ID de espaço, ID de widget e filtro. Um exemplo de ID de outro site exibirá o conteúdo de outra pessoa.
Construa o componente
- Coloque o iframe em um componente no local pretendido. Converta atributos HTML em equivalentes do React, como className e allowFullScreen. Dê ao iframe um título descritivo.
- Mantenha a inicialização somente do navegador no cliente. Em Next.js, siga o componente cliente e as convenções de script do seu projeto.
- Se o snippet fornecido usar um auxiliar de redimensionamento, carregue esse script externo uma vez. Inicialize somente depois que o iframe auxiliar e o iframe de destino existirem.
- Limpe os manipuladores de redimensionamento quando o componente for desmontado e evite IDs duplicados ou inicialização ao navegar entre rotas.
- Mantenha o quadro responsivo dentro do pai. Para um formulário de coleta, preserve as permissões de câmera e microfone fornecidas e use HTTPS.
Verifique a navegação e o celular
Teste o carregamento inicial da página e a navegação de ida e volta. Verifique se o iframe não foi inicializado duas vezes e se a página não rola horizontalmente. Um formulário de coleta também deve ter um link normal de abertura em uma nova guia para navegadores que bloqueiam a gravação incorporada.
Use as instruções de incorporação do agente no painel e escolha React/Next.js para uma transferência contendo o snippet exato. Não instale scripts de dados estruturados dentro do iframe; aqueles pertencem à página host.