# FAQs

### Server Side Rendering (SSR) Caveats
The `cronofy-scheduler-button` is implemented as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). 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](https://nextjs.org/), [Nuxt](https://nuxt.com/), and [SvelteKit](https://kit.svelte.dev/)) 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 `&quot;use client&quot;` directive in [NextJS](https://nextjs.org/docs/getting-started/react-essentials#client-components), the `<ClientOnly>` property in [Nuxt](https://nuxt.com/docs/api/components/client-only), and by using `export const ssr = false;` in [SvelteKit](https://kit.svelte.dev/docs/page-options#ssr).

### Component TypeScript definition for React
If you are using [React](https://react.dev/) with [TypeScript](https://www.typescriptlang.org/) 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:

```typescript
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`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/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.



---
[Read in HTML](/developers/embedded-scheduler/faqs/)