> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bubblemaps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive Demo

> Bubblemaps iFrame Integration

export const IframeDemo = () => {
  const [draftChain, setDraftChain] = useState("solana");
  const [draftAddress, setDraftAddress] = useState("FQgtfugBdpFN7PZ6NdPrZpVLDBrPGxXesi4gVu3vErhY");
  const [chain, setChain] = useState(draftChain);
  const [address, setAddress] = useState(draftAddress);
  const url = useMemo(() => `https://iframe.bubblemaps.io/map?address=${address}&chain=${chain}&partnerId=demo`, [address, chain]);
  const isStale = draftChain === chain && draftAddress === address;
  const handleApply = () => {
    if (isStale) return;
    setChain(draftChain);
    setAddress(draftAddress);
  };
  return <div className="my-6">
      <div className="flex flex-wrap items-center gap-3 mb-4">
        <select className="border rounded p-2" value={draftChain} onChange={e => setDraftChain(e.target.value)}>
          {[{
    value: "solana",
    label: "Solana"
  }, {
    value: "eth",
    label: "Ethereum"
  }, {
    value: "bsc",
    label: "BNB Chain"
  }, {
    value: "tron",
    label: "Tron"
  }, {
    value: "base",
    label: "Base"
  }, {
    value: "sonic",
    label: "Sonic"
  }, {
    value: "ton",
    label: "TON"
  }, {
    value: "avalanche",
    label: "Avalanche"
  }, {
    value: "polygon",
    label: "Polygon"
  }, {
    value: "monad",
    label: "Monad"
  }, {
    value: "aptos",
    label: "Aptos"
  }, {
    value: "arbitrum",
    label: "Arbitrum"
  }, {
    value: "hyperevm",
    label: "Hyperevm"
  }, {
    value: "robinhood",
    label: "Robinhood"
  }].map(c => <option key={c.value} value={c.value}>
              {c.label}
            </option>)}
        </select>

        <input className="border rounded p-2 flex-1 min-w-[260px]" type="text" value={draftAddress} onChange={e => setDraftAddress(e.target.value)} />

        <button disabled={isStale} onClick={handleApply} className={`rounded p-2 transition-colors ${isStale ? "bg-gray-300 text-gray-500 cursor-not-allowed" : "bg-pink-600 hover:bg-pink-700 text-white"}`}>
          Apply
        </button>
      </div>

      <iframe src={url} style={{
    width: "100%",
    height: 600,
    border: "none",
    borderRadius: "10px"
  }} />
    </div>;
};

Change the chain and token address to update the interactive demo below. Your iFrame integration will follow a similar pattern with chain and token address inputs, see the [quickstart section](/iframe/quickstart) for more details on how to actually integrate the iFrame.

<IframeDemo />