Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

230
Views
El widget React <script> no aparece en la pantalla

Tengo una función para agregar una etiqueta de secuencia de comandos al cuerpo del documento

 const UseScriptComponent = ({url}, e) => { useEffect(() => { const script = document.createElement('script'); script.src = url; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, [url]); return null }

Que uso dentro de mi clase como un componente:

 class Dashboard extends Component { render(){ return ( <div className="dashboard"> <UseScriptComponent url='https://link_to_widget.com' /> // Test link avaiable at next example </div> ); } }

Se supone que el enlace de la etiqueta del script debe mostrar un botón flotante en la esquina inferior derecha de la pantalla.
No aparece nada en la pantalla, pero la secuencia de comandos se agrega a la página, como puedo ver en la pestaña de elementos de Chrome DevTools.
También se supone que debo iniciar el widget usando el código a continuación, pero siempre recibo un error que dice que bbWidget no está declarado

 window.addEventListener('load', () => { bbWidget.init({ widgetId: 'widget_uuid', merchantIds: [ // list of merchant uuids (up to 5) ], }); });

En la pestaña de red de Chrome DevTools, obtuve esta línea:

 Name: widget.js Status: 200 Type: script Initiator: dashboard.js Size: (disk cache) Time: 4ms

Probé este comportamiento con otro widget, creado desde taggbox, me dieron dos opciones para incrustarlo en mi página:
Litecode:

 <div class="taggbox" style="width:380px;height:500px;" data-widget-id="102233" data-tags="false"></div><script src="https://widget.taggbox.com/embed-lite.min.js" type="text/javascript"></script>

y marco flotante:

 <iframe src="https://widget-lite.taggbox.com/102233?tags=false" style="width:380px;height:500px;border:none;"></iframe>

Solo funcionó la segunda opción, así que creo que el problema está en la etiqueta del script.
Busqué una respuesta, pero todo lo que encontré estaba relacionado con la creación de UseScriptComponent o el uso de Helmet como alternativa, por lo que realmente no estoy seguro de a dónde ir desde aquí.

ACTUALIZAR
Código API recomendado:

 <script async src="https://widgets.ifood.com.br/widget.js"></script> <script> window.addEventListener('load', () => { iFoodWidget.init({ widgetId: 'widget_uuid', merchantIds: ['merchant_uuid'], }); }); </script>
about 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!