Fix booking calendars not growing, which hid the confirm button
The gate loaded the calendar iframes after GHL's form_embed.js ran, so it never auto-sized them and the details step was cut off. The iframes keep their src again; book.js runs first and removes them when the page is locked. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
+1
-2
@@ -279,6 +279,5 @@ ${scripts}
|
|||||||
export const GHL_SCRIPT = '<script src="https://link.msgsndr.com/js/form_embed.js" defer></script>';
|
export const GHL_SCRIPT = '<script src="https://link.msgsndr.com/js/form_embed.js" defer></script>';
|
||||||
export const ghlForm = (id, name) =>
|
export const ghlForm = (id, name) =>
|
||||||
`<iframe class="ghl-frame" src="https://api.leadconnectorhq.com/widget/form/${id}" id="inline-${id}" title="${name}" data-layout="{'id':'INLINE'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-form-name="${name}" data-layout-iframe-id="inline-${id}" data-form-id="${id}"></iframe>`;
|
`<iframe class="ghl-frame" src="https://api.leadconnectorhq.com/widget/form/${id}" id="inline-${id}" title="${name}" data-layout="{'id':'INLINE'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-form-name="${name}" data-layout-iframe-id="inline-${id}" data-form-id="${id}"></iframe>`;
|
||||||
// Calendars start without a src: book.js loads them once the visitor has sent the lead form.
|
|
||||||
export const ghlCalendar = (id, title) =>
|
export const ghlCalendar = (id, title) =>
|
||||||
`<iframe class="ghl-frame ghl-cal" data-src="https://api.leadconnectorhq.com/widget/booking/${id}" id="${id}_cal" title="${title}" scrolling="no"></iframe>`;
|
`<iframe class="ghl-frame ghl-cal" src="https://api.leadconnectorhq.com/widget/booking/${id}" id="${id}_cal" title="${title}" scrolling="no"></iframe>`;
|
||||||
|
|||||||
+2
-1
@@ -34,7 +34,8 @@ export default {
|
|||||||
</script>`,
|
</script>`,
|
||||||
title: 'Book Your Call | Dylan Mazzei',
|
title: 'Book Your Call | Dylan Mazzei',
|
||||||
description: 'Book a free 15-minute intro call with Dylan Mazzei’s team or a 15-minute 1:1 session with Dylan.',
|
description: 'Book a free 15-minute intro call with Dylan Mazzei’s team or a 15-minute 1:1 session with Dylan.',
|
||||||
scripts: GHL_SCRIPT + '\n<script src="/assets/book.js" defer></script>',
|
// book.js before form_embed.js, so a locked page removes the calendars first.
|
||||||
|
scripts: '<script src="/assets/book.js" defer></script>\n' + GHL_SCRIPT,
|
||||||
body: `
|
body: `
|
||||||
<section class="page-hero" aria-labelledby="bk-hero">
|
<section class="page-hero" aria-labelledby="bk-hero">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
|
|||||||
@@ -1,6 +1,11 @@
|
|||||||
(function () {
|
(function () {
|
||||||
if (document.documentElement.getAttribute('data-gate') !== 'open') return;
|
// Without the lead form, drop the calendars before GHL's form_embed.js picks them up.
|
||||||
document.querySelectorAll('iframe[data-src]').forEach(function (f) { f.src = f.getAttribute('data-src'); });
|
// The iframes keep their src in the HTML: form_embed.js only sizes iframes that already
|
||||||
|
// point at /booking when it runs, and an unsized calendar hides its confirm button.
|
||||||
|
if (document.documentElement.getAttribute('data-gate') !== 'open') {
|
||||||
|
document.querySelectorAll('iframe.ghl-cal').forEach(function (f) { f.remove(); });
|
||||||
|
return;
|
||||||
|
}
|
||||||
var tabs = document.querySelectorAll('[data-call]');
|
var tabs = document.querySelectorAll('[data-call]');
|
||||||
var select = function (id, scroll) {
|
var select = function (id, scroll) {
|
||||||
tabs.forEach(function (t) {
|
tabs.forEach(function (t) {
|
||||||
|
|||||||
Reference in New Issue
Block a user