Language Widget
Layout Examples & Customization Showcase
Floating button in top-right corner (or left in RTL) - Fully functional! Try changing language, it will sync with all widgets on this page and supports RTL automatically
Use Case: Global language switcher, Always accessible, RTL Support, Clean UI
// ผู้ใช้กำหนดตำแหน่งเอง
<div id="my-float" style="position: fixed; top: 20px; right: 20px;"></div>
LanguageWidget.init({
container: '#my-float',
style: 'floating-button',
apiBaseURL: API_BASE_URL,
showCheckmark: true,
textType: 'code' // ปุ่ม = รหัส, menu = ชื่อเต็ม
});Language WidgetLayout Examples & Customization Showcase
Compact, perfect for mobile and headers
Use Case: Mobile menu, Header navigation
LanguageWidget.init({
container: '#widget-dropdown',
style: 'dropdown',
enableSearch: true
});Impressive, interactive, WOW factor
Use Case: Landing page, Premium sites
LanguageWidget.init({
container: '#widget-globe',
style: '3d-globe'
});Flags wrap into multiple rows, suitable for wide areas
Use Case: Desktop full-width, Dashboard
LanguageWidget.init({
container: '#widget-horizontal-wrap',
style: 'horizontal-strip',
layout: {
horizontalStripWrap: true, // Wrap mode
maxHeight: '120px'
}
});Flags in single row, scroll left-right (Shift+Scroll)
Use Case: Sidebar, Compact header
LanguageWidget.init({
container: '#widget-horizontal-scroll',
style: 'horizontal-strip',
layout: {
horizontalStripWrap: false, // Single row
maxHeight: '80px',
maxWidth: 'fit-content'
}
});Grid adjusts columns automatically based on screen size
Use Case: Responsive dashboard
LanguageWidget.init({
container: '#widget-grid-auto',
style: 'flag-grid',
layout: {
gridColumns: 'auto',
maxHeight: '300px'
}
});Set number of columns to 4
Use Case: Consistent layout
LanguageWidget.init({
container: '#widget-grid-4col',
style: 'flag-grid',
layout: {
gridColumns: 4,
maxHeight: '300px'
}
});Grid 5 columns - Demo with dark background
Use Case: Dark background showcase
LanguageWidget.init({
container: '#widget-dark-theme',
style: 'flag-grid',
layout: {
gridColumns: 5,
maxHeight: '250px'
}
});Display language code only, no flags
Use Case: Text-only language switcher
LanguageWidget.init({
container: '#widget-minimal',
style: 'horizontal-strip',
showFlags: false,
layout: {
horizontalStripWrap: false,
maxHeight: '50px'
}
});Grid 5 columns - Demo with gradient background
Use Case: Colorful background showcase
LanguageWidget.init({
container: '#widget-glass',
style: 'flag-grid',
layout: {
gridColumns: 5,
maxHeight: '250px'
}
});Narrow space + custom spacing
Use Case: Sidebar, narrow container
LanguageWidget.init({
container: '#widget-sidebar',
style: 'flag-grid',
layout: {
gridColumns: 2,
maxHeight: '400px',
maxWidth: '300px'
},
customCSS: {
'.lang-grid': {
'gap': '10px'
},
'.lang-item': {
'font-size': '12px'
}
}
});Check out the full documentation for more advanced customization options
View Documentation<!-- 1. Add Widget Script -->
<script src="https://langmaster.zeekall.com/public/JS/language-widget.min.js"></script>
<!-- 2. Add Container -->
<div id="language-widget"></div>
<!-- 3. Initialize -->
<script>
LanguageWidget.init({
container: '#language-widget',
apiKey: 'your-api-key', // Optional
style: 'flag-grid', // 13 styles available
theme: 'light', // 'light' or 'dark'
autoTranslate: true, // LibreTranslate integration
onLanguageChange: (lang) => {
console.log('Language changed to:', lang);
// Your custom logic here
}
});
</script>