🎙️ Radio Chat - Embed Systeem
📺 Live Demo
Hieronder zie je de chat in actie, volledig embedded op deze pagina:
🚀 Snelle Start
✅ Iframe-Safe Features:
- Werkt met sessionStorage als localStorage geblokkeerd is
- URL parameters voor configuratie
- Geen third-party cookies nodig
- Cross-origin compatible
- Responsive design
Basis Implementatie:
<iframe src="https://jouwebsite.nl/chat/embed.html"
width="100%"
height="600"
frameborder="0">
</iframe>
⚙️ Configuratie Opties
Je kunt de chat aanpassen via URL parameters:
| Parameter |
Beschrijving |
Voorbeeld |
title |
Chat titel |
?title=Mijn+Radio+Chat |
theme |
Kleurthema (green/blue/purple) |
?theme=blue |
user |
Standaard gebruikersnaam |
?user=Gast123 |
smilies |
Toon smilies (show/hide) |
?smilies=hide |
Voorbeeld met meerdere parameters:
<iframe src="embed.html?title=VrijbuiterFM&theme=purple&smilies=hide"
width="650"
height="600">
</iframe>
🎨 Thema Voorbeelden
Groen Thema (standaard):
Blauw Thema:
Paars Thema:
📱 Responsive Design
De chat past automatisch aan mobiele schermen aan. Test het door je browservenster smaller te maken!
Mobiel voorbeeld:
🔧 Technische Details
Browser Compatibiliteit:
- ✅ Chrome / Edge (alle versies)
- ✅ Firefox (alle versies)
- ✅ Safari (iOS en macOS)
- ✅ Opera
- ✅ Mobile browsers
Storage Fallback:
⚠️ Let op: Bij cross-origin embeds kan localStorage geblokkeerd zijn door de browser.
De chat gebruikt dan automatisch sessionStorage, wat betekent dat instellingen alleen tijdens de browser sessie bewaard blijven.
Features die blijven werken:
- ✅ Berichten versturen en ontvangen
- ✅ Admin login (per sessie)
- ✅ Smileys
- ✅ Online gebruikers
- ✅ Thema selectie (per sessie)
- ✅ /nick en /topic commando's
💻 Code Generator
Gebruik deze generator om je eigen embed code te maken:
📝 Tips & Best Practices
✅ Aanbevelingen:
- Gebruik minimaal 500px hoogte voor optimale weergave
- Op mobiel: gebruik 100% breedte
- Test je embed in verschillende browsers
- Gebruik URL parameters voor custom branding
⚠️ Vermijd:
- Te kleine afmetingen (< 400px breed)
- Nested iframes (iframe in iframe)
- Conflicterende CSS op parent pagina