Integración Devera Widget React

English

Crear un nuevo componente cargando el 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 = '' /* Por defecto escoge el idioma del sistema, pero puedes seleccionar es para Español, en para Inglés o de para Alemán. */

  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;

Recuerda cambiar los valores de your-token por tu token, your-client-id por tu client id y your-product-id por el id de producto que nos disteis para relacionarlo.

Usa tu nuevo componente:

import React from 'react';
import DeveraWidgetComponent from './DeveraWidgetComponent';

const App = () => {
  return (
    <div>
      <DeveraWidgetComponent />
    </div>
  );
};

export default App;

Pon los estilos del microfront en tu css en el selector :root si tu quieres personalizarlo:

/* Colors */
--devera-main: #4b858e; /* Estos son los calores hexadecimales por defecto */
--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;