> ## 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.

# Quickstart

> Embed our iFrames in one line of code

## iFrame Tag

You can iFrame a bubble map by simply setting the URL of the map in the `src` attribute of an `iframe` html tag, like this:

```html theme={null}
<iframe
  src="https://iframe.bubblemaps.io/map?address=FQgtfugBdpFN7PZ6NdPrZpVLDBrPGxXesi4gVu3vErhY&chain=solana&partnerId=demo"
  allow="clipboard-write"
></iframe>
```

Note the simple structure of the URL:

```text theme={null}
https://iframe.bubblemaps.io/map?chain=[chain_id]&address=[token_address]&partnerId=[partner_id]
```

<Check>
  `allow="clipboard-write"` is needed for the 'copy' buttons to work on the app
  (for example to copy the address of a holder).
</Check>

## Available Chains

Currently available chains are `solana`, `eth`, `bsc`, `tron`, `base`, `sonic`, `ton`, `avalanche`, `polygon`, `monad`, `aptos`, `arbitrum`, `hyperevm`, and `robinhood`.

<Info>
  We will keep this list updated. But if you want to get technical and
  dynamically update your iFrames as we release more chains, you could use our
  [Supported Chains](/data/api/chains/supported) API endpoint. Don't hesitate to
  ask.
</Info>

## Partner Id

If you don't have a dedicated partner id yet, you can use `demo` to test things out. More info in
the [pricing section](/iframe/pricing).

Otherwise, replace `demo` by your actual partner id. It will unlock the integration on your domains.

<Note>
  Your partner id is **not** a secret, so you can have it showing in clear in
  your frontend code. It only unlocks the integration on your domains, and can
  not be used to impersonate you.
</Note>

## Styling

Of course, you still have to style your iframe in terms of size and border to place it correctly in your layout.
Keep in mind that browsers usually apply a default border on iframes, which you'll have to remove. We also recommend using at least a 600px height.

```css theme={null}
iframe {
  width: 100%;
  height: 700px;
  border: none;
}
```

Exemple with inline styling:

```html theme={null}
<iframe
  src="https://iframe.bubblemaps.io/map?address=FQgtfugBdpFN7PZ6NdPrZpVLDBrPGxXesi4gVu3vErhY&chain=solana&partnerId=demo"
  allow="clipboard-write"
  style="width:100%;height:700px;border:none;"
></iframe>
```

<Note>
  **Custom color themes** are also available on-demand, no code change needed
  (the color theme is triggered by the partner id).
</Note>