Nästa Coach Web Integration

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

    <!DOCTYPE html>
<html>
    <head>
        <style>
            :root {
                --nasta-main: #26252d; /* Complete with the styles you want to change */
            }
        </style>
    </head>
    <body>
        <recycling-app
            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 va for valencian */
        ></recycling-app>
        <script src="https://recycling.nastaeco.com/recycling.umd.js"></script>
    </body>
</html>

    Remember to change the values of your-token to your token and your-client-id to your client id.

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

    /* Colors */
--nasta-main: #4b858e; /* These hexadecimal values are the default values */
--nasta-mainActive: #2c4e54;
--nasta-mainDisabled: #9db8bc;
--nasta-secondary: #a3d5cd;
--nasta-secondaryDark: #9ac6bf;
--nasta-secondaryMiddle: #c8e7e2;
--nasta-secondaryLight: #e8f6f3;
--nasta-secondarySuperDark: #7baaa3;

/* Font */
--nasta-font: 'Montserrat', sans-serif;
/* Sizing */
--nasta-microMaxWidth: 420px;
--nasta-microHeight: 500px;