For your website

<div data-ciro-embed="ciro_pk_YOUR_KEY"></div>
<script src="https://www.ciro-noise.de/ciro-embed/v1.js" async></script>

<div data-ciro-embed="ciro_pk_YOUR_KEY"></div>
<script src="https://www.ciro-noise.de/ciro-embed/v1.js" async></script>

'use client'
import { useEffect, useRef, useState } from 'react'

const CIRO_ORIGIN = 'https://www.ciro-noise.de'
const MIN_HEIGHT = 420

type BookedDetail = { startTime?: string; endTime?: string }

type CiroEmbedProps = {
  widgetKey: string
  title?: string
  onBooked?: (detail: BookedDetail) => void
  onSubmitted?: () => void
}

export function CiroEmbed({ widgetKey, title = 'CIRO', onBooked, onSubmitted }: CiroEmbedProps) {
  const frame = useRef<HTMLIFrameElement>(null)
  const [src, setSrc] = useState<string>()
  const handlers = useRef({ onBooked, onSubmitted })
  handlers.current = { onBooked, onSubmitted }

  // Build the URL in the browser: the frame needs the host origin and time zone.
  useEffect(() => {
    const query = new URLSearchParams({
      mode: 'inline',
      parent: window.location.origin,
      tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
    })
    setSrc(`${CIRO_ORIGIN}/embed/${encodeURIComponent(widgetKey)}?${query}`)
  }, [widgetKey])

  useEffect(() => {
    function onMessage(event: MessageEvent) {
      // Only trust messages from CIRO and from this very frame.
      const el = frame.current
      if (!el || event.origin !== CIRO_ORIGIN || event.source !== el.contentWindow) return
      const data = event.data
      if (!data || typeof data.type !== 'string') return

      if (data.type === 'ciro-embed-height' && typeof data.height === 'number') {
        el.style.height = `${Math.max(MIN_HEIGHT, Math.ceil(data.height))}px`
      }
      if (data.type === 'ciro-embed-booked') handlers.current.onBooked?.(data.detail ?? {})
      if (data.type === 'ciro-embed-submitted') handlers.current.onSubmitted?.()
    }
    window.addEventListener('message', onMessage)
    return () => window.removeEventListener('message', onMessage)
  }, [])

  if (!src) return <div style={{ minHeight: MIN_HEIGHT }} />

  return (
    <iframe
      ref={frame}
      src={src}
      title={title}
      loading="lazy"
      sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
      style={{ width: '100%', minHeight: MIN_HEIGHT, border: 0, display: 'block' }}
    />
  )
}

<div data-ciro-embed="ciro_pk_YOUR_KEY"></div>
<script src="https://www.ciro-noise.de/ciro-embed/v1.js" async></script>

'use client'
import { useState, type FormEvent } from 'react'

const ENDPOINT = 'https://www.ciro-noise.de/api/v1/support'
const TOKEN = 'ciro_pk_YOUR_KEY'

export function SupportForm() {
  const [state, setState] = useState<'idle' | 'sending' | 'sent'>('idle')
  const [error, setError] = useState<{ field?: string; message: string } | null>(null)

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const form = new FormData(event.currentTarget)
    setState('sending')
    setError(null)
    const res = await fetch(ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-Ciro-Token': TOKEN },
      body: JSON.stringify({
        subject: form.get('subject'),
        description: form.get('description'),
        customerName: form.get('name'),
        customerEmail: form.get('email'),
        language: navigator.language.slice(0, 2),
      }),
    })
    const data = await res.json().catch(() => ({}))
    if (!res.ok) {
      setState('idle')
      setError({ field: data.field, message: data.error ?? 'Error' })
      return
    }
    setState('sent')
  }

  if (state === 'sent') return <p>Thanks — we will get back to you.</p>

  return (
    <form onSubmit={onSubmit} noValidate>
      <input name="name" placeholder="Name" aria-invalid={error?.field === 'customerName'} />
      <input name="email" type="email" placeholder="Email" aria-invalid={error?.field === 'customerEmail'} />
      <input name="subject" placeholder="Subject" aria-invalid={error?.field === 'subject'} />
      <textarea name="description" placeholder="How can we help?" aria-invalid={error?.field === 'description'} />
      {error && <p role="alert">{error.message}</p>}
      <button type="submit" disabled={state === 'sending'}>Send</button>
    </form>
  )
}

'use client'
import { useState } from 'react'

const ENDPOINT = 'https://www.ciro-noise.de/api/v1/reports'
const TOKEN = 'ciro_pk_YOUR_KEY'
const MAX_SCREENSHOT = 3 * 1024 * 1024 // base64 limit of the endpoint

async function captureScreenshot(): Promise<string | undefined> {
  try {
    const { default: html2canvas } = await import('html2canvas-pro')
    const canvas = await html2canvas(document.body, {
      x: window.scrollX,
      y: window.scrollY,
      width: window.innerWidth,
      height: window.innerHeight,
    })
    const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
    return dataUrl.length <= MAX_SCREENSHOT ? dataUrl : undefined
  } catch {
    return undefined // report without a picture rather than not at all
  }
}

export function BugFlag({ product = 'webshop' }: { product?: string }) {
  const [open, setOpen] = useState(false)
  const [text, setText] = useState('')
  const [screenshot, setScreenshot] = useState<string>()
  const [result, setResult] = useState<string | null>(null)

  async function start() {
    setScreenshot(await captureScreenshot()) // before the dialog covers the page
    setOpen(true)
  }

  async function send() {
    const res = await fetch(ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-Ciro-Token': TOKEN },
      body: JSON.stringify({
        kind: 'bug',
        description: text,
        pageUrl: location.href,
        userAgent: navigator.userAgent,
        viewport: { width: innerWidth, height: innerHeight },
        product,
        screenshotBase64: screenshot,
      }),
    })
    const data = await res.json().catch(() => ({}))
    setResult(res.ok ? `Thanks — filed as ${data.key}` : (data.error ?? 'Error'))
    if (res.ok) setText('')
  }

  return (
    <>
      <button
        type="button"
        onClick={start}
        style={{ position: 'fixed', right: 0, top: '40%', writingMode: 'vertical-rl' }}>
        Report a bug
      </button>
      {open && (
        <div role="dialog" aria-modal="true" aria-label="Report a bug">
          <textarea aria-label="What went wrong?" value={text} onChange={(e) => setText(e.target.value)} />
          {result && <p role="status">{result}</p>}
          <button type="button" onClick={send}>Send</button>
          <button type="button" onClick={() => { setOpen(false); setResult(null) }}>Close</button>
        </div>
      )}
    </>
  )
}

window.addEventListener('ciro:booked', (event) => {
  // event.detail = { startTime, endTime } (ISO 8601)
  console.log('Booked', event.detail)
})

window.addEventListener('ciro:submitted', () => {
  // A support request was sent
})

// 200 OK
{
  "ticket": {
    "id": "…",
    "number": 1042,
    "pin": "…",
    "url": "https://…/ticket/…",
    "accessToken": "…"
  },
  "org": { "name": "Your company" }
}

// 400 Bad Request
{ "error": "…", "field": "customerEmail", "code": "contactRequired" }

// 201 Created
{ "key": "BUG-12", "url": "https://…/boards/…", "taskId": "…" }

// 400 Bad Request
{ "error": "description: …" }