Tengo un botón de chat creado por un script (zendesk chat). Genera un iframe en la página con el ID "lanzador". Estoy usando Nextjs y estoy tratando de obtener este elemento, pero no puedo adjuntar una referencia porque no tengo el código. Estoy buscando una solución en la web y he intentado algo como esto (en el componente de pie de página porque está en todas las páginas y puedo averiguar en qué página estoy):

 React.useLayoutEffect(() => { function checkElExist() { if (typeof document !== 'undefined') { const el = document.querySelector('#launcher'); if (!isSingleVehiclePage) { console.log('NOT VEHICLE', el); if (el) { el.classList.remove('inVehicle'); el.classList.add('notInVehiclePage'); } } else { console.log('IN VEHICLE', el); if (el) { el.classList.remove('notInVehiclePage'); el.classList.add('inVehicle'); } } } } window.addEventListener('load', checkElExist); return () => window.removeEventListener('load', checkElExist); }, [isSingleVehiclePage]);

No sé si es la solución correcta. Funciona un poco, pero a veces el elemento es nulo, especialmente cuando aterrizo en esa página específica desde un enlace externo (no cuando navego por el sitio). ¿Es posible obtener este elemento? Mi objetivo es agregar/eliminar una clase según páginas específicas.

Gracias

EDITAR: no sé si es relevante, pero en el html el iframe está fuera de mi div "__next". En la imagen a continuación, rodeé con un círculo el __siguiente div, el div del pie de página (donde se ejecuta mi código useLayoutEffect) y el iframe que quiero obtener.