Framer Component for SavvyCal inline embedding

SavvyCal.tsx

import { useEffect } from "react"

declare global {
    interface Window {
        SavvyCal: API
    }
}

interface API {
    (...args: any[]): void
}

export default function SavvyCal(props) {
    useEffect(() => {
        const embedScript = document.createElement("script")
        const firstScript =
            document.getElementsByTagName("script")[0] ||
            document.querySelector("body")
        embedScript.async = true
        embedScript.src = "https://embed.savvycal.com/v1/embed.js"

        embedScript.onload = () => {
            try {
                window.SavvyCal("init")
            } catch {}

            // Replace `link` with your scope/slug
            window.SavvyCal("inline", {
                link: "REPLACE_WITH_SCOPE/REPLACE_WITH_LINK",
                selector: "#booking-page",
            })
        }

        firstScript.parentNode.insertBefore(embedScript, firstScript)
    }, [])

    return <div id="booking-page"></div>
}

@derrickreimer I'm borrowing this to embed my scheduling page inside a web app. Two quick questions:

1. How is the height calculated? I'm seeing the iframe maxing out at 150px, regardless of how I set the height of the wrapping div (for example setting it to 600px high). For now I'm doing:

const iframe = document.querySelector("#booking-page iframe");
iframe?.setAttribute("height", "100%");

2. I can't get the hideBanner parameter to work. I'm assuming that's for hiding the panel on the left with the title, attendees, date picker etc? Is that broken, or am I doing something wrong?

return ( <div className={clsx("h-[600px] bg-green-500")} id="booking-page"></div> );

Hi @tomelliot, the height of the iframe is managed by the embed script itself (by passing messages between the parent window and the iframe). Looks like something is not quite working right here, but hard to tell what the culprit would be at first glance. By chance do you have a public page I can take a look at to inspect the source?

@derrickreimer unfortunately the webapp is a bit hard to share a link to - I've just submitted a support ticket with a screen share and some more info (and so you don't have to have this conversation in github comments).