• Español

Devera Widget React Integration

1. Create a new component loading the microfront:

   import React, { useEffect } from 'react';
   
   const loadScript = (src) => {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = src;
       script.async = true;
       script.onload = resolve;
       script.onerror = reject;
       document.body.appendChild(script);
     });
   };
   
   const DeveraWidgetComponent = () => {
     const productId = '<your-product-id>'
     const token = '<your-token>'
     const clientId = '<your-client-id>'
     const language = '' /* If you leave it empty it's the system default language, but you can set with es for spanish, en for english and va for valencian */
   
     useEffect(() => {
       const scriptUrl = "https://widget.devera.ai/widget.umd.js";
   
       loadScript(scriptUrl)
         .then(() => {
           console.log('Microfrontend script loaded successfully');
         })
         .catch((error) => {
           console.error('Error loading microfrontend script:', error);
         });
     }, []);
   
     return (
       <div>
         <devera-widget product-id={productId} token={token} client-id={clientId} language={language}/>
       </div>
     );
   };
   
   export default DeveraWidgetComponent;
   

Remember to change the values of your-token to your token, your-client-id to your client id and your-product-id with the id of the product that you gave us to relate it to.

1. Use your new component:

   import React from 'react';
   import DeveraWidgetComponent from './DeveraWidgetComponent';
   
   const App = () => {
     return (
       <div>
         <DeveraWidgetComponent />
       </div>
     );
   };
   
   export default App;
   

2. Put the microfront styles in your css :root selector if you want to customize it:

   /* Colors */
   --devera-main: #4b858e; /* These hexadecimal values are the default values */
   --devera-mainActive: #2c4e54;
   --devera-mainDisabled: #9db8bc;
   --devera-secondary: #a3d5cd;
   --devera-secondaryDark: #9ac6bf;
   --devera-secondaryMiddle: #c8e7e2;
   --devera-secondaryLight: #e8f6f3;
   --devera-secondarySuperDark: #7baaa3;
   
   /* Font */
   --devera-font: 'Montserrat', sans-serif;
   
   /* Sizing */
   --devera-microMaxWidth: 420px;
   --devera-microHeight: 500px;