I have a function to add a script tag to the body of the document
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
}
That I use inside my class as a component:
class Dashboard extends Component {
render(){
return (
<div className="dashboard">
<UseScriptComponent url='https://link_to_widget.com' /> // Test link avaiable at next example
</div>
);
}
}
The link from the script tag is supposed to show a floating button at the righ bottom corner of the screen
Nothing shows up at the screen, but the script is in fact added to the page as I can see on my Chrome DevTools elements tab.
I'm also supposed to init the widget using the code below, but I always get an error saying that bbWidget
is not declared
window.addEventListener('load', () => {
bbWidget.init({
widgetId: 'widget_uuid',
merchantIds: [
// list of merchant uuids (up to 5)
],
});
});
At the network tab from Chrome DevTools I got this line:
Name: widget.js
Status: 200
Type: script
Initiator: dashboard.js
Size: (disk cache)
Time: 4ms
I tested this behaviour with another widget, created from taggbox, they gave me two options to embed it on my page:
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>
and Iframe:
<iframe src="https://widget-lite.taggbox.com/102233?tags=false" style="width:380px;height:500px;border:none;"></iframe>
Only the second option worked, so I believe the problem is with the script tag
I've looked around for an answer but all I found was related to creating the UseScriptComponent or using Helmet as an alternative, so I'm really not sure where to go from here
Comments
Post a Comment