Hey @Sayam - typically if that parameter isn’t working it can mean you are utilizing an iframe, which doesn’t have reference to our asset library and won’t obey that URL parameter. In addition to the hide_event_type_details=1 parameter, please all add the following 2 parameters:
embed_domain=example.com
embed_type=Inline
Just replace example.com with your actual website domain.
Those parameters are present. Kindly see the code below for reference:
```
"use client";
import { useEffect, useState, useRef, useCallback } from 'react';
import { toast } from 'sonner';
import { clarityEvent } from '@/lib/analytics/clarity';
import { useCartStore } from '@/store/cart';
declare global {
interface Window {
Calendly: {
initInlineWidget: (options: {
url: string;
parentElement: HTMLElement;
prefill?: Record<string, any>;
utm?: Record<string, any>;
}) => void;
};
}
}
export function CalendlyEmbed() {
const calendlyRef = useRef<HTMLDivElement>(null);
const [isLoaded, setIsLoaded] = useState(false);
const email = useCartStore(state => state.email);
const companyName = useCartStore(state => state.companyName);
const initCalendlyWidget = useCallback(() => {
if (!calendlyRef.current || !window.Calendly) return;
const prefill: Record<string, any> = {};
if (email) prefill.email = email;
if (companyName) prefill.name = companyName;
// Determine the embed domain at runtime (works in Next.js client components)
const embedDomain =
typeof window !== 'undefined' && window.location.hostname
? window.location.hostname
: 'localhost'; // fallback for WebViews/local files/dev
// Build the Calendly URL with required embed params
const url = new URL('https://calendly.com/example');
url.searchParams.set('hide_landing_page_details', '1');
url.searchParams.set('hide_gdpr_banner', '1');
url.searchParams.set('hide_event_type_details', '1');
url.searchParams.set('embed_domain', embedDomain);
url.searchParams.set('embed_type', 'Inline');
try {
calendlyRef.current.innerHTML = '';
window.Calendly.initInlineWidget({
url: url.toString(),
parentElement: calendlyRef.current,
prefill,
utm: {
utmSource: 'website',
utmMedium: 'demo_page',
},
});
// Analytics
clarityEvent('Demo_Calendly_Loaded');
window.dataLayer?.push({ event: 'demo_calendly_loaded' });
} catch (error) {
console.error('Failed to initialize Calendly widget:', error);
}
}, [email, companyName]);
useEffect(() => {
let script: HTMLScriptElement | null = null;
const loadCalendly = async (retryCount = 0) => {
const maxRetries = 3;
const retryDelay = Math.pow(2, retryCount) * 1000; // Exponential backoff: 1s, 2s, 4s
// Check if Calendly is already loaded
if (window.Calendly) {
setIsLoaded(true);
return;
}
try {
// Load Calendly script
script = document.createElement('script');
script.src = 'https://assets.calendly.com/assets/external/widget.js';
script.async = true;
script.onload = () => {
setIsLoaded(true);
};
script.onerror = (event) => {
// Retry logic
if (retryCount < maxRetries) {
setTimeout(() => {
loadCalendly(retryCount + 1);
}, retryDelay);
} else {
console.error('Failed to load Calendly script after retries');
toast.error('Failed to load calendar', {
description: 'Please check your internet connection and try refreshing the page.',
});
// Set loaded to true to hide spinner, even if failed
setIsLoaded(true);
}
};
document.head.appendChild(script);
} catch (error) {
console.error('Error loading Calendly:', error);
toast.error('Failed to load calendar', {
description: 'Please check your internet connection and try refreshing the page.',
});
setIsLoaded(true);
}
};
loadCalendly();
return () => {
if (script && script.parentNode) {
document.head.removeChild(script);
}
};
}, []);
useEffect(() => {
if (isLoaded) {
initCalendlyWidget();
}
}, [isLoaded, initCalendlyWidget]);
return (
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-gray-50">
<h2 className="text-xl font-semibold text-center">Book Your Demo</h2>
<p className="text-center text-muted-foreground mt-2">
Choose a time that works for you - all sessions are 30 minutes
</p>
</div>
<div className="relative">
{!isLoaded && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 z-10">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
<p className="text-muted-foreground">Loading calendar...</p>
</div>
</div>
)}
<div
ref={calendlyRef}
className="h-[700px] w-full overflow-hidden"
style={{ minWidth: '320px' }}
/>
</div>
</div>
);
}
```
