Installation

Integrating Fitit is extremely simple; just copy and paste the styles into the head the script into the body, and place our two basic buttons (style them as you wish), and that's it. Make sure to have the storeId.

The styles

In the head of your website/app copy and past the styles from below

    <link rel="stylesheet" href="https://cdn.fitit.ai/prod/latest/css/main.min.css" />

The script

At the end of the body of your website/app, copy and past the script from below. To get the STORE ID KEY talk to integrations team at integrations@fitit.ai or chat with support

    <div id="fitit-app"></div>

    <script defer type="text/javascript">

        window.fitit = {
          storeId: '<YOUR STORE_ID KEY>',
          storeMode: 'MPA'  //Or SPA if your site is a Single Page Application
        };


        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://cdn.fitit.ai/prod/latest/js/main.min.js';
        script.id = 'fitit-script'
        document.body.appendChild(script);

        window.addEventListener('fititReady', () => {
          console.log('Fitit READY');
        });

      </script>

Size Button

In your detail page paste this button. Feel free to style the button with your own styles. Just dont modify the ID or the onclick method

   <button id="fitit-button" onclick="window.fitit.login()" class="ft-hidden">Validate</button>

Size table

Additionally, you can enhance your detail page by including a button that allows users to access the size table for each integrated product. This feature provides valuable information to your users, helping them make informed decisions about sizing. By following these steps, you can seamlessly incorporate this functionality into your website:

   <button id="fitit-size-table-button" onclick="window.fitit.openSizeTable()" class="ft-hidden">Size table</button>