Χρησιμοποιώντας ένα σενάριο:

Ή χρησιμοποιώντας ένα iframe:

Μπορείτε επίσης να καθορίσετε ένα αναγνωριστικό κοντέινερ («div» id) όταν χρησιμοποιείτε το σενάριο:

<div id='widget1' style='text-align: center'></div>

Η βασική ενσωμάτωση είναι απλή και απλή. Πρώτα πρέπει να προσθέσετε το ακόλουθο κομμάτι κώδικα:

<script  src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>

Στη συνέχεια, απλώς προσθέστε αυτόν τον άλλο κωδικό για να συμπεριλάβετε το γραφικό στοιχείο:

Η συνάρτηση `_waqiFeed` παίρνει ως όρισμα τη διαμόρφωση για το γραφικό στοιχείο. Απλώς πρέπει να ορίσετε το σταθμό και το στυλ εμφάνισης του widget ( size ). Αυτό είναι αυτό που παράγει:

Μπορείτε επίσης να καθορίσετε το αναγνωριστικό κοντέινερ («div» id) όπου πρέπει να εμφανίζεται το γραφικό στοιχείο:

<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>

Η μορφή εμφάνισης μπορεί να αλλάξει αλλάζοντας την παράμετρο size σε μία από αυτές:

Είναι δυνατό να προσαρμόσετε το κείμενο που θα εμφανίζεται μέσα στο widget καθορίζοντας την επιλογή display . Για παράδειγμα, για να εμφανίσετε τόσο με το όνομα "AQI" κειμένου καθώς και με τον χρόνο ενημέρωσης (όπως φαίνεται στο γραφικό στοιχείο στα αριστερά), μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:

_waqiFeed({    
	display:"%cityname  AQI  is  <span  style='%style'>%impact  (%aqiv)</span>  <small>on  %date</small>",  
	station:"A373120"  
});  

Η display παραμέτρων είναι μια συμβολοσειρά που βασίζεται σε HTML και μπορεί να περιέχει οποιαδήποτε από τις ακόλουθες λέξεις-κλειδιά:

• «%cityname» για το όνομα της πόλης (π.χ. Beijing ),
• «%aqi» για τη διακοσμημένη τιμή AQI (π.χ. 58 ),
• `%aqiv` για την τιμή AQI χωρίς διακόσμηση (ακατέργαστο κείμενο) (π.χ. 58 ),
• `%style` για τη δήλωση css των διακοσμημένων λεπτομερειών AQI (π.χ. background-color: #ffde33;color:#000000; ),
• `%date` για την ώρα κατά την οποία ενημερώθηκε το AQI (π.χ. Wed 20:00 ),
• «%impact» για τον σχετικό αντίκτυπο στην υγεία (π.χ. Good , Moderate ...)
• `%attribution` για την απόδοση δεδομένων AQI (π.χ. Beijing Environmental Protection Monitoring Center )
• `%details` για τις πλήρεις λεπτομέρειες AQI (το περιεχόμενο του αναδυόμενου παραθύρου που εμφανίζεται όταν μετακινείτε το ποντίκι πάνω από την τιμή AQI).

Ακολουθούν μερικά παραδείγματα:

Μπορείτε επίσης να καθορίσετε τη γλώσσα που θα χρησιμοποιηθεί ορίζοντας την επιλογή lang . Για παράδειγμα, για να συμπεριλάβετε το γραφικό στοιχείο στα κινέζικα (όπως φαίνεται στα δεξιά), χρησιμοποιήστε τον ακόλουθο κώδικα:

Οι γλώσσες που υποστηρίζονται αυτήν τη στιγμή είναι:

Κάντε κλικ σε οποιοδήποτε από τα παρακάτω γραφικά στοιχεία για να δείτε τον σχετικό κώδικα: