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>