Skip to main content

​
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: 
<iframe
  src="https://iframe.bubblemaps.io/map?address=FQgtfugBdpFN7PZ6NdPrZpVLDBrPGxXesi4gVu3vErhY&chain=solana&partnerId=demo"
></iframe>
Note the simple structure of the URL: 
https://iframe.bubblemaps.io/map?chain=[chain_id]&address=[token_address]&partnerId=[partner_id]

​
Available Chains

Currently available chains are solana, eth, bsc, tron, base, apechain, sonic, ton, avalanche, polygon, and monad.
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 API endpoint. Don’t hesitate to ask.

​
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. Otherwise, replace demo by your actual partner id. It will unlock the integration on your domains.
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.

​
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. 
iframe {
  width: 100%;
  height: 700px;
  border: none;
}
Exemple with inline styling: 
<iframe
  src="https://iframe.bubblemaps.io/map?address=FQgtfugBdpFN7PZ6NdPrZpVLDBrPGxXesi4gVu3vErhY&chain=solana&partnerId=demo"
  style="width:100%;height:700px;border:none;"
></iframe>
Custom color themes are also available on-demand, no code change needed (the color theme is triggered by the partner id).