Γρήγορη Εγκατάσταση & Πρώτα Βήματα #
Η ενσωμάτωση των widgets του panelladikes.edu.gr είναι απλή και απαιτεί μόνο δύο βασικά βήματα:
- Εισαγωγή του script. Προσθέστε στη σελίδα σας το αρχείο
embed.v1.js
<script src="https://panelladikes.edu.gr/js/embed.v1.js" defer></script>Το συγκεκριμένο script αναλαμβάνει αυτόματα τη δημιουργία των απαραίτητων iframe για κάθε στοιχείο που περιλαμβάνει το attribute data-panelladikes-widget
💡 Σημαντικό: Αν θέλετε να εμφανίσετε πολλαπλά widgets στην ίδια σελίδα, αρκεί να εισάγετε το script μόνο μία φορά. Ωστόσο, ακόμη και αν προστεθεί περισσότερες φορές, δεν θα δημιουργηθεί κάποιο πρόβλημα στη λειτουργία.
- Τοποθέτηση του HTML στοιχείου. Στη θέση όπου θέλετε να εμφανιστεί το widget, δημιουργήστε ένα στοιχείο
<div>με το κατάλληλοdata-panelladikes-widgetattribute. Το script θα εντοπίσει αυτόματα όλα τα[data-panelladikes-widget]στοιχεία μετά το DOM Loaded event και θα τα αντικαταστήσει με τα αντίστοιχα<iframe>.
Παράδειγμα βασικής εισαγωγής #
Σε μία απλή HTML σελίδα, θα μπορούσατε να γράψετε:
<!-- Σημείο για το widget -->
<div data-panelladikes-widget="katefthinsi"></div>
<!-- Εισαγωγή του embed script -->
<script src="https://panelladikes.edu.gr/embed/embed.v1.js"></script>Χρήση σε CMS πλατφόρμες #
Σε πλατφόρμες όπως το WordPress, μπορείτε να επικολλήσετε τον παραπάνω κώδικα μέσα σε ένα block τύπου Custom HTML1 χωρίς επιπλέον ρυθμίσεις.
Στα επόμενα άρθρα θα δούμε αναλυτικά τις διαθέσιμες επιλογές παραμετροποίησης και προχωρημένα παραδείγματα χρήσης.