Devera Widget Web Integration

  1. Put the script and the new custom tag in your html:

    <!DOCTYPE html>
<html>
    <head>
        <style>
            :root {
                --devera-main: #26252d; /* Complete with the styles you want to change */
            }
        </style>
    </head>
    <body>
        <devera-widget
            product-id="<your-product-id>"
            client-id="<your-client-id>"
            token="<your-token>"
            language="" /* If you leave it empty it's the system default language, but you can set with es for spanish, en for english and de for german */
        ></devera-widget>
        <script src="https://widget.devera.ai/widget.umd.js"></script>
    </body>
</html>

    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.

  2. You can add these styles in :root to customize your microfront:

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