Hide Event Type Details

You’ve got the right idea! That hide_event_type_details=1 parameter is in fact what you use to hide the details and just simply show the list of calendar dates/times. Are you noticing something not working quite right? 

hide_event_type_details=1 doesn’t seem to work for me either. Any help?

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('//calendly-com.screenshare.banktechpr.app/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 = '//assets-calendly-com.screenshare.banktechpr.app/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>

);

}
```