@circlesquare/embedding-next

Next.js components for embedding your clubs events and court availability.

Installation

npm install @circlesquare/embedding-next
# or
yarn add @circlesquare/embedding-next

Usage

All components must be used in client components. Add 'use client' at the top of your file.

Config Provider (Optional)

'use client'
import { CircleSquareEmbeddingConfigProvider } from '@circlesquare/embedding-next'

export default function RootLayout({ children }) {
  return (
    <CircleSquareEmbeddingConfigProvider
      merchantId="your-merchant-id"
      backgroundColor="#FFFFFF"
      language="en"
    >
      <>{children}</>
    </CircleSquareEmbeddingConfigProvider>
  )
}

Note: When using React 19 wrapping children with <></> might be required

Provider Config

• merchantId (required): Your CircleSquare merchant ID
• backgroundColor (optional): Background color for the embedded content
• language (optional): Language of the embedded content (en / de). Will otherwise be selected automatically.

Events Component

'use client'
import { CSEvents, CsEventType } from "@circlesquare/embedding-next";

export default function EventsPage() {
  return (
    <div>
      <h1>Events</h1>
      <CSEvents
        merchantId="your-merchant-id"
        eventTypes={[CsEventType.OpenPlay, CsEventType.Training]}
        backgroundColor="#F5F5F5"
      />
    </div>
  )
}

CSEvents Config

• merchantId (optional if in provider): Your CircleSquare merchant ID
• hostId (optional): Filter events by host ID
• backgroundColor (optional): Background color for the embedded content
• language (optional): Language of the embedded content (en / de). Will otherwise be selected automatically.
• eventTypes (optional): Array of event types to filter
  • OpenPlay
  • Training
  • Other
  • League
  • Americano
  • AmericanoTournament
  • KnockOutTournament
  • RoundRobinTournament
• className (optional): Additional CSS class for the container
• fallback (optional): A component to display in case the embedding iframe can not be loaded or displayed. If not provided, the default component will be used.
• timeoutMs (optional): Time after which the fallback component is displayed. Defaults to 3000 (3 seconds)

Court Availability Component

'use client'
import { CSCourtAvailability } from '@circlesquare/embedding-next'

export default function CourtsPage() {
  return (
    <div>
      <h1>Court Availability</h1>
      <CSCourtAvailability
        merchantId="your-merchant-id"
        backgroundColor="#F5F5F5"
      />
    </div>
  )
}

CSCourtAvailability Config

• merchantId (optional if in provider): Your CircleSquare merchant ID
• language (optional): Language of the embedded content (en / de). Will otherwise be selected automatically.
• backgroundColor (optional): Background color for the embedded content
• className (optional): Additional CSS class for the container
• fallback (optional): A component to display in case the embedding iframe can not be loaded or displayed. If not provided, the default component will be used.
• timeoutMs (optional): Time after which the fallback component is displayed. Defaults to 3000 (3 seconds)