Integración Widget Devera Web

  1. Pon el script y la nueva etiqueta customize en tu html:

    <!DOCTYPE html>
<html>
    <head>
        <style>
            :root {
                --devera-main: #26252d; /* Completa con los estilos que quieras cambiar */
            }
        </style>
    </head>
    <body>
        <devera-widget
            product-id="<your-product-id>"
            client-id="<your-client-id>"
            token="<your-token>"
            language="" /* Si lo dejas vacio cogera el idioma del sistema donde se ejecuta, pero puedes poner es para español, en para inglés o de para alemán */
        ></devera-widget>
        <script src="https://widget.devera.ai/widget.umd.js"></script>
    </body>
</html>

    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.

  2. Puedes añadir estos estilos en :root para personalizar tu microfront:

    /* 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;