Potete inserire il widget di Qualitando sul vostro sito web.
Per farlo è sufficiente inserire due sole righe di codice sul vostro sito, subito prima del tag </body> (subito prima del termine del blocco body).
Le due righe di codice da inserire sono visualizzate all'interno del pannello di controllo di Qualitando alla voce "Certificato e Guestbook". Potete facilmente fare copia ed incolla delle stesse sul vostro sito.
La prima riga carica un file javascript che viene aggiornato periodicamente da Qualitando (il codice della qbox va riportato senza trattini):
<script src='https://admin.qualitando.com/Areas/Cert/js/q[codice qbox].js'></script>
La seconda riga inizializza il widget ed opzionalmente ne configura i parametri di visualizzazione. Nella sua forma più semplice può essere usato senza parametri:
<script>window.QUAWidget.init();</script>
Potete personalizzare ulteriormente la visualizzazione. Il widget è responsive, e quindi prevede 4 diversi comportamenti a seconda delle dimensioni dello schermo, utilizzando gli stessi nomi e breakpoint di bootstrap (xs, sm, md, lg).
Una inizializzazione più precisa può quindi assumere la seguente forma:
window.QUAWidget.init({
xs: { size:"large", styles: { "right": '15px', "top": '15px' } },
sm: { size:"large", styles: { "right": '15px', "top": '15px' } },
md: { size:"large", styles: { "right": '15px', "top": '15px' } },
lg: { size:"large", styles: { "right": '15px', "top": '15px' } }
});
La dimensione del widget (campo 'size') può essere impostata a "large" oppure "small" (solitamente alle risoluzioni più basse è preferibile avere un widget più ridotto). L'oggetto styles può contenere proprietà html che vengono applicate direttamente all'iframe che viene dinamicamente creato. In questo esempio per definirne la posizione sono stati utilizzate le proprietà right e top.
Altro esempio in cui alla risoluzione inferiore viene visualizzato il widget piccolo ancorato in basso a sinistra:
window.QUAWidget.init({
xs: { size:"small", styles: { "left": '15px', "bottom": '15px' } },
sm: { size:"small", styles: { "left": '15px', "top": '15px' } },
md: { size:"large", styles: { "right": '15px', "top": '15px' } },
lg: { size:"large", styles: { "right": '15px', "top": '15px' } }
});
Esempio di widget in dimensione "large":
