Embed the GoHighLevel lead form and booking calendars

/contact/ now uses the GHL "Dylan – Lead Form", and a new /contact/book/
page lets visitors pick the free intro call or the paid 1:1 and book it in
the matching GHL calendar. Both calendars load up front so switching tabs is
instant.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-14 13:43:35 -04:00
parent 16e36f5b4f
commit 75d8cbc7f7
7 changed files with 125 additions and 28 deletions
+16 -3
View File
@@ -7,7 +7,13 @@ export const SITE = {
linkedin: 'https://www.linkedin.com/in/dylanmazzei/',
instagram: 'https://www.instagram.com/thedylanmazzei',
// Replace with the real scheduling link (Calendly, Cal.com, etc.).
calendar: 'mailto:dylan@dylanmazzei.com?subject=Scheduling%20a%20conversation',
calendar: '/contact/book/',
// GoHighLevel (LeadConnector) widgets. Contacts land in Dylan's GHL account.
ghl: {
form: 'xm10A7alZrxeKDtkMkD2', // "Dylan – Lead Form"
freeCalendar: '81JqpCRit6APOwavApzh', // Free 15-min intro call with Dylan's team
vipCalendar: 'lK9IYtCRGIuA7W93WjMF', // 15-min 1:1 with Dylan ($100)
},
};
const ICONS = {
@@ -194,7 +200,7 @@ function footer() {
</footer>`;
}
export function page({ path, title, description, body, schema = [], head = '', scripts = '' }) {
export function page({ path, title, description, body, schema = [], head = '', scripts = '', noindex = false }) {
const canonical = SITE.url + path;
const person = {
'@context': 'https://schema.org',
@@ -215,7 +221,7 @@ export function page({ path, title, description, body, schema = [], head = '', s
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>${title}</title>
<meta name="description" content="${description}">
<link rel="canonical" href="${canonical}">
<link rel="canonical" href="${canonical}">${noindex ? '\n<meta name="robots" content="noindex">' : ''}
<meta name="theme-color" content="#04060c">
<meta name="color-scheme" content="light dark">
<meta property="og:type" content="website">
@@ -253,3 +259,10 @@ ${scripts}
</html>
`;
}
// GoHighLevel embeds. form_embed.js resizes the iframes to their content.
export const GHL_SCRIPT = '<script src="https://link.msgsndr.com/js/form_embed.js" defer></script>';
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}" loading="lazy"></iframe>`;
export const ghlCalendar = (id, title) =>
`<iframe class="ghl-frame ghl-cal" src="https://api.leadconnectorhq.com/widget/booking/${id}" id="${id}_cal" title="${title}" scrolling="no"></iframe>`;