Intro

There are 2 possible types of integration of the Qiota solution : by GTM, by ClientSide


Asynchronous and deferred loading of getQiota.js


Asynchronous loading of JavaScript is generally recommended, as it can improve the user experience of your site by not blocking DOM rendering during script loading. 

You can  load getQiota.js using the async or defer attribute on the script tag. Note, however, that with asynchronous loading any API calls will have to be made only after the script execution has finished.


It is a good practice to use asynchronous Syntax to load the scripts. This helps to optimize the user experience on the website that are using the SDK. This approach reduces chances of the SDK library interfering with the hosting website. Here's the simple graph to show the difference between Asynchronous and Traditional Syntax.


Include the getQiota.js script on each page of your site—it should always be loaded directly from our CDN rather than included in a bundle or hosted yourself.


GTM (Google Tag Manager)


The integration of Qiota module with GTM is quite simple. Once you have your credentials,

you can log into your GTM account and create a custom tag , for example QiotaTag . The q_user varialbe is optionnel.


<script src= "https://static.qiota.com/assets/getQiota.js" ></script>

<script type="text/javascript">
(function(){if(document.getElementsByClassName('qiota_onboard').length <= 0) {var onboard = document.createElement('div'); onboard.classList.add('qiota_onboard');document.body.insertBefore(onboard, null);}})();

 var q_token = "yourToken";
 var q_logged = true/false
 var q_subscribed = true/false
 var q_user = 
{ "user" :  {
                   "IdWeb":integer,
                   "IdCrm":integer,
                   "DateEndSub": date,
                   "ExpCard": date,
                   "CodeSub" : integer,
                   "LastLogin":date,
                   "NbLogin": integer
                   ...
                  }
}
 renderQiotaOnboard(q_token [, q_user]);
</script>



Client Side


The getQiota.js JavaScript file allows you to render a Qiota widget on the client side.


<script src= "https://static.qiota.com/assets/getQiota.js" ></script>


The getQiota.js file allows you to render a Qiota widget on the client side in QiotaOnboard.

Configure the container and form where the Qiota Widget will add the elements. Make sure to replace TOKEN CLIENT with your generated client token.



...
<div class= "qiota_onboard" > </div>
...



Once get the authorization you can call method for get elements onboarding div element and the qiota_onboard div will be populated. The q_user varialbe is optionnel.

<script type="text/javascript">
 var q_token = "yourToken";
 var q_logged = true/false
 var q_subscribed = true/false
 var q_user = 
{ "user" :  {
                   "IdWeb":integer,
                   "IdCrm":integer,
                   "DateEndSub": date,
                   "ExpCard": date,
                   "CodeSub" : integer,
                   "LastLogin":date,
                   "NbLogin": integer
                   ...
                  }
}
 renderQiotaOnboard(q_token [, q_user]);
</script>