Iframe Integration Guide

Use this method if you want the fastest production integration. Add one iframe, pass search params, and listen for resize messages.

Live Examplehttps://conft.app/cobridge

See a real production-style integration and UX flow using the iframe approach.

1. Search params

Configure behavior using query parameters on https://cobridge.xyz.

Param	Type	Example	Why use it
theme	"light" \| "dark"	theme=light	For visual matching with your website. Defaults to dark if not provided.
disabledHud	boolean as string	disabledHud=true	Hides extra widgets and shell UI so the bridge feels like a focused embedded widget.
fromTokenId	number	fromTokenId=1	Preselects source token on load. Useful when you want to guide users into a specific flow.
toTokenId	number	toTokenId=2	Preselects destination token on load. Works best with fromTokenId for one-click setup.

2. Copy-paste React example

This example is ready to paste into your own page, for example /cobridge.

import clsx from 'clsx'
import { useEffect, useMemo, useRef, useState } from 'react'

const COBRIDGE_ORIGIN = 'https://cobridge.xyz'

export default function CobridgeEmbedPage() {
  const iframeRef = useRef<HTMLIFrameElement>(null)
  const [isLoaded, setLoaded] = useState(false)

  const src = useMemo(() => {
    const url = new URL(COBRIDGE_ORIGIN)
    url.searchParams.set('theme', 'light')
    url.searchParams.set('disabledHud', 'true')
    // Optional token preselection:
    // url.searchParams.set('fromTokenId', '1')
    // url.searchParams.set('toTokenId', '2')
    return url.toString()
  }, [])

  useEffect(() => {
    const handler = (event: MessageEvent) => {
      if (event.origin !== COBRIDGE_ORIGIN) return
      if (event.data?.type !== 'widget:resize') return
      if (!iframeRef.current) return

      const height = Number(event.data.height)
      if (!Number.isFinite(height) || height <= 0) return

      iframeRef.current.style.height = `${height}px`
      setLoaded(true)
    }

    window.addEventListener('message', handler)
    return () => window.removeEventListener('message', handler)
  }, [])

  return (
    <div className="w-full mt-10 flex justify-center">
      <div className={clsx('w-full max-w-[504px] pb-10', { 'h-[800px]': !isLoaded })}>
        <iframe
          ref={iframeRef}
          title="cobridge.xyz"
          src={src}
          width="100%"
          height="100%"
          loading="lazy"
          className="border-none"
          referrerPolicy="strict-origin-when-cross-origin"
        />
      </div>
    </div>
  )
}

3. Essential lines

Build URL with URL and searchParams so configuration stays explicit.
Listen to window.message and only trust events from https://cobridge.xyz.
Update iframe height from widget:resize for seamless dynamic content and no inner scroll bars.
Keep a fallback height until the first resize event so layout does not jump while loading.

4. Domain allowlist and approval

Cobridge currently allows embedding only from approved partner domains. If your iframe does not load because of framing policy, request domain approval and include your full website origin.

Contact: [email protected]