Configure and generate an embeddable hotel search widget for your website.
<!-- Planet Hotel Search Widget -->
<div id="planet-search-widget"></div>
<script>
(function() {
// Load React and MUI dependencies
const loadScript = (src, onLoad) => {
const script = document.createElement('script');
script.src = src;
script.onload = onLoad;
document.head.appendChild(script);
};
const loadCSS = (href) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
};
// Load required dependencies
loadCSS('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
loadScript('https://unpkg.com/react@18/umd/react.production.min.js', () => {
loadScript('https://unpkg.com/react-dom@18/umd/react-dom.production.min.js', () => {
loadScript('https://planet.bg/api/embed/widget?v=' + Date.now(), () => {
// Initialize the widget
if (window.PlanetSearchWidget) {
const config = {
"layout": "horizontal",
"theme": {
"primaryColor": "#1976d2",
"backgroundColor": "#ffffff",
"textColor": "#333333",
"fontSize": "12px"
},
"labels": {
"destination": "Хотел/Дестинация",
"checkIn": "Настаняване",
"checkOut": "Напускане",
"accommodation": "Настаняване",
"search": "Търси хотели",
"adults": "Възрастни",
"children": "Деца",
"rooms": "Стаи",
"room": "Стая",
"night": "нощ",
"nights": "нощи",
"adult": "възрастен",
"child": "дете",
"childrenAges": "Възраст на децата",
"loading": "Зарежда...",
"noResults": "Няма намерени резултати",
"hotel": "Хотели",
"city": "Градове",
"region": "Региони",
"country": "Държави"
},
"locale": "bg",
"apiEndpoint": "https://planet.bg"
};
window.PlanetSearchWidget.render('planet-search-widget', config);
}
});
});
});
})();
</script>