golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: widget embed — full-width support + one-liner script tags via hosted loader

Browse Source 
- Standalone page: ?width=full removes max-w-lg container constraint
- iframeSnippet: passes &width=full to URL when 100% width selected
- public/widget-loader.js: hosted script, reads data-* attrs, no inline code needed
  - data-mode="floating" → styled FAB button bottom-right
  - data-mode="trigger"  → listens for .hotelsync-book class clicks
  - Proper modal with close button and backdrop click
- Code tab snippets for floating/trigger are now single <script src> lines

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-04-12 01:15:36 +03:00
parent 60346f3580
commit e614905ca1
3 changed files with 118 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/BookingWidgetPage.tsx
View File

@@ -1495,45 +1495,19 @@ export function BookingWidgetPage() {
formFields: prev.formFields.filter(f => f.id !== id),
}))
const widgetUrl = `https://app.hotelsync.ru/${slug || 'grand-palace'}/book?color=${encodeURIComponent(settings.primaryColor)}&lang=${settings.language}&mode=${settings.roomDisplayMode}&min-nights=${settings.minNights}&rental=${settings.showRental}&promo=${settings.showPromo}&extra-beds=${settings.allowExtraBeds}&children=${settings.allowChildren}`
const widgetUrl = (fullW = false) => `https://app.hotelsync.ru/${slug || 'grand-palace'}/book?color=${encodeURIComponent(settings.primaryColor)}&lang=${settings.language}&mode=${settings.roomDisplayMode}&min-nights=${settings.minNights}&rental=${settings.showRental}&promo=${settings.showPromo}&extra-beds=${settings.allowExtraBeds}&children=${settings.allowChildren}${fullW ? '&width=full' : ''}`
const iframeUrl = widgetUrl(widgetMaxWidth === '100%')
const modalUrl = widgetUrl(false)
const loaderBase = `https://app.hotelsync.ru/widget-loader.js`
const iframeSnippet = widgetMaxWidth === '100%'
? `<iframe\n src="${widgetUrl}"\n width="100%"\n height="680"\n frameborder="0"\n style="border-radius:16px;border:none;box-shadow:0 4px 24px rgba(0,0,0,0.10);display:block;"\n allow="payment"\n loading="lazy"\n></iframe>`
: `<div style="max-width:${widgetMaxWidth};margin:0 auto;">\n <iframe\n src="${widgetUrl}"\n width="100%"\n height="680"\n frameborder="0"\n style="border-radius:16px;border:none;box-shadow:0 4px 24px rgba(0,0,0,0.10);"\n allow="payment"\n loading="lazy"\n ></iframe>\n</div>`
? `<iframe src="${iframeUrl}" width="100%" height="680" frameborder="0" style="border:none;display:block;" allow="payment" loading="lazy"></iframe>`
: `<div style="max-width:${widgetMaxWidth};margin:0 auto;">\n <iframe src="${iframeUrl}" width="100%" height="680" frameborder="0" style="border-radius:16px;border:none;box-shadow:0 4px 24px rgba(0,0,0,0.10);" allow="payment" loading="lazy"></iframe>\n</div>`
const modalScript = `(function(){
var W='${widgetUrl}';
var m=document.createElement('div');
m.id='hs-modal';
m.style.cssText='display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99998;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;';
m.innerHTML='<div style="position:relative;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;border-radius:16px;">'
+'<button onclick="document.getElementById(\\'hs-modal\\').style.display=\\'none\\'" style="position:absolute;top:8px;right:8px;z-index:1;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;">×</button>'
+'<iframe src="'+W+'" style="width:100%;height:680px;border:none;border-radius:16px;display:block;" allow="payment"></iframe>'
+'</div>';
m.addEventListener('click',function(e){if(e.target===m)m.style.display='none';});
document.body.appendChild(m);
window.hsOpenWidget=function(){m.style.display='flex';};
})()`
const floatingSnippet = `<script src="${loaderBase}" data-url="${modalUrl}" data-mode="floating" data-btn="${floatBtnText}" data-color="${settings.primaryColor}" async></script>`
const floatingSnippet = `<script>
${modalScript}
;(function(){
var b=document.createElement('button');
b.textContent='${floatBtnText}';
b.style.cssText='position:fixed;bottom:24px;right:24px;background:${settings.primaryColor};color:#fff;border:none;padding:14px 24px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.25);z-index:99997;transition:transform .15s,box-shadow .15s;';
b.onmouseenter=function(){b.style.transform='scale(1.05)';b.style.boxShadow='0 6px 28px rgba(0,0,0,.35)';};
b.onmouseleave=function(){b.style.transform='scale(1)';b.style.boxShadow='0 4px 20px rgba(0,0,0,.25)';};
b.onclick=function(){window.hsOpenWidget();};
document.body.appendChild(b);
})();
</script>`
const triggerSnippet = `<script>
${modalScript}
;document.addEventListener('click',function(e){
if(e.target.closest('.${triggerClass}')){e.preventDefault();window.hsOpenWidget();}
});
</script>`
const triggerSnippet = `<script src="${loaderBase}" data-url="${modalUrl}" data-mode="trigger" data-class="${triggerClass || 'hotelsync-book'}" data-color="${settings.primaryColor}" async></script>`
const activeSnippet = codeMode === 'iframe' ? iframeSnippet : codeMode === 'floating' ? floatingSnippet : triggerSnippet

6
src/pages/BookingWidgetStandalonePage.tsx
View File

@@ -74,9 +74,11 @@ export function BookingWidgetStandalonePage() {
.catch(() => {})
}, [slug])
const isFullWidth = searchParams.get('width') === 'full'
return (
<div className="min-h-screen bg-slate-50 flex items-start justify-center py-6 px-3">
<div className="w-full max-w-lg">
<div className={isFullWidth ? 'min-h-screen bg-slate-50' : 'min-h-screen bg-slate-50 flex items-start justify-center py-6 px-3'}>
<div className={isFullWidth ? 'w-full' : 'w-full max-w-lg'}>
<WidgetPreview
settings={settings}
slug={slug}