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>;
    }
  }
}

Cross-Origin-Opener-Policy #

In order for a user to sign in to Cronofy to use the Embedded Scheduler we display the login flow in a popup window. This is because browsers implement security features to prevent setting of cookies within an iframe with a different origin than the host page. Because of this the Embedded Scheduler needs to communicate between the login popup and the Embedded Scheduler dialog popup.

This communication can fail if the Cross-Origin-Opener-Policy header has been set to a value of same-origin. As a result users will not be able to complete the login process and will be unable to make use of the Scheduler. Using a less restrictive setting such as same-origin-allow-popups will enable the Embedded Scheduler to work.