diff --git a/src/layout.mjs b/src/layout.mjs index bf354ad..0e46a24 100644 --- a/src/layout.mjs +++ b/src/layout.mjs @@ -263,6 +263,6 @@ ${scripts} // GoHighLevel embeds. form_embed.js resizes the iframes to their content. export const GHL_SCRIPT = ''; export const ghlForm = (id, name) => - ``; + ``; export const ghlCalendar = (id, title) => ``; diff --git a/static/assets/site.js b/static/assets/site.js index eac5cca..e18324b 100644 --- a/static/assets/site.js +++ b/static/assets/site.js @@ -143,5 +143,27 @@ }); } + // GoHighLevel's form_embed.js hides each embed until the iframe reports it is + // ready. If that message never arrives, show the embed anyway so the form is + // never left invisible. + var reveal = function (f) { + f.style.opacity = '1'; + f.style.visibility = 'visible'; + f.style.pointerEvents = 'auto'; + f.style.position = 'relative'; + if (f.style.left === '-9999px') f.style.left = ''; + }; + var ghl = document.querySelectorAll('.ghl-frame'); + if (ghl.length) { + [2500, 6000].forEach(function (ms) { + setTimeout(function () { + ghl.forEach(function (f) { + if (f.closest('[data-off]')) return; + if (getComputedStyle(f).visibility === 'hidden') reveal(f); + }); + }, ms); + }); + } + root.classList.add('ready'); })(); diff --git a/static/assets/styles.css b/static/assets/styles.css index ef775ee..1558be1 100644 --- a/static/assets/styles.css +++ b/static/assets/styles.css @@ -1046,3 +1046,5 @@ h1, h2, h3, h4 { font-weight: 600; } @media (max-width: 760px) { .calls { grid-template-columns: 1fr; } .call { padding: 24px; } } #schedule .wrap { position: relative; } .cal-panel[data-off] { position: absolute; left: -10000px; top: 0; width: min(980px, 100%); visibility: hidden; pointer-events: none; } +.ghl-wrap-form { min-height: 460px; } +.ghl-wrap-cal { min-height: 720px; }