Implementing iubenda on React JS website/app
Jacopo Pesce
Upvote this discussion if you would like us to add an integration guide specifically tailored for React web framework.
On localhost, everything appears to be running smoothly, however when I deploy my codebase, some Iubenda variables are not loaded, making it impossible for users to interact with the modal. I attempted to do it by placing the script straight in React and index.html, but I was unable.
1 person likes this
You must first create a file named "iubenda.js" if you want to use iubenda on your ReactJS website or application. This file must be loaded into your ReactJS project because it contains the iubenda subway surfers codebase. You must initialise iubenda using the iubenda init function after adding it to your project.
1 person likes this
hello
1 person likes this
Thanks for the information
Hi, I'm new here. In which languages is the iubenda available? I want to integrate this into my Javascript, and Yii2 websites.
Hello!!
I have same problem with Angular.js because the components not accept scripts.
What can I do in this case?
Definitely needed! A React-specific iubenda integration guide would save a lot of time and confusion.
For those still wondering, i made some workaround to load the proper widget (with modal, not just the link) in React (as they are only provided as pure html with script which just dont work in React components). The project is MERN stack with express in backend, serving a SPA, so it might onyl work in those conditions.
The SPA starts of as a index.html with a <main id="main"> which is filled with the app layout upon rendering. In this index.html I load all scripts in the <head>
<head> <script type="text/javascript" src="https://embeds.iubenda.com/widgets/REDACTED.js" ></script> <script type="text/javascript"> (function (w, d) { var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s, tag); }; if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; } })(window, document); </script> <script type="text/javascript"> (function (w, d) { var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s, tag); }; if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; } })(window, document); </script> <script type="text/javascript"> (function (w, d) { var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s, tag); }; if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; } })(window, document); </script>These script make sure the widgets i pu int he index.html body are properly styled
<body> <noscript>You need to enable JavaScript to run this app.</noscript> <main class="main" id="main"></main> <!-- Iubenda widgets - outside React's control for proper consent sync --> <div id="iubenda-widgets-original" style="display: none"> <a href="https://www.iubenda.com/privacy-policy/REDACTED" class="iubenda-white iubenda-noiframe iubenda-embed iub-legal-only iubenda-noiframe" title="Privacybeleid" >Privacybeleid</a > <a href="https://www.iubenda.com/privacy-policy/REDACTED/cookie-policy" class="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe" title="Cookiebeleid " >Cookiebeleid</a > <a href="https://www.iubenda.com/gebruiksvoorwaarden/REDACTED" class="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe" title="Algemene voorwaarden " >Algemene voorwaarden</a > </div> </body>This alreayd works, except for the fact that the widgets are not inside my layout, they are just below my footer. To put them in my footer or wherever you want), I relocate them using useEffect when the footer loads:
const Footer = ({ companyNavbarItems }) => { useEffect(() => { // Move Iubenda widgets from HTML to footer after React renders const moveWidgetsToFooter = () => { console.log("Moving Iubenda widgets to footer"); const widgetsContainer = document.getElementById( "iubenda-widgets-original" ); const footer = document.getElementById("footer"); if (widgetsContainer && footer) { // Find the dedicated container in the footer const targetContainer = document.getElementById( "iubenda-widgets-container" ); if (targetContainer) { // Move the widgets to the dedicated container targetContainer.appendChild(widgetsContainer); // Show the widgets after moving them - widgetsContainer is the .iubenda-widgets div widgetsContainer.style.display = "block"; } } }; // Small delay to ensure footer is fully rendered setTimeout(moveWidgetsToFooter, 5000); }, []);This will render the widgets inside wherever yu put this "<div id="iubenda-widgets-container"></div> in the footer.
Idk if this is the best way, but as far as i can see, the widgets work and load as modals (not just a link tot he page) and the Database consent also works (it gives the correct version, although idk if this was necessary for this to work)
Still would be nice to see proper react components by Iubenda. I really like the product, but so many devs use React, so this is def a missing feature for me. I also wonder why they asked this question, got many replies, but then didn't handle? Or did they and I coudln't find it?
Regards
One addition is that, when the idnex.html is loaded, it shows those widgets, which is kind of weird, so i hide them initially (display: none), and apply 'display: block when the layout is loaded"