FAQs ^BETA

Server Side Rendering (SSR) Caveats #

The cronofy-scheduler-button is implemented as a web component. This makes the component framework agnostic however it does require the DOM to work. Some JavaScript frameworks that perform server side rendering (such as NextJS, Nuxt, and SvelteKit) may produce an error such as HTMLElement is not defined when trying to server side render the scheduler button element.

In order to work around this you will need to disable SSR for the button component. This is usually achieved by moving the button into its own component and tagging it as client renderable only. This is done with the "use client" directive in NextJS, the <ClientOnly> property in Nuxt, and by using export const ssr = false; in SvelteKit.

Component TypeScript definition for React #

If you are using React with TypeScript as your frontend stack you will get an error Property 'cronofy-scheduler-button' does not exist on type 'JSX.IntrinsicElements'. when using the button component.

You can save the following as cronofy-scheduler-button.d.ts to add the required types for the button element to your project:

import type { DetailedHTMLProps, HTMLAttributes } from "react";

declare interface CronofySchedulerButton extends HTMLElement {
  ["embed-token"]: string,
  ["correlation-id"]: string,
  ["recipient-email"]: string,
  ["recipient-name"]: string,
  ["recipient-organization-name"]: string,
  ["event-summary"]: string,
  ["event-duration-minutes"]: string
}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ['cronofy-scheduler-button']: DetailedHTMLProps<HTMLAttributes<CronofySchedulerButton>, HTMLElement>;
    }
  }
}