Free Crypto Widgets
Add real-time cryptocurrency data to your website with our free embeddable widgets. Choose a widget type, customize the settings, and copy the embed code.
Crypto Price Widget
Display a table of top cryptocurrencies with prices, market cap, volume, and optional sparkline charts.
Configuration
Embed Code
<div style="height:301px; background-color: #1B2030; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F; padding: 0px; margin: 0px; width: 100%;"> <div style="height:281px; padding:0px; margin:0px; width: 100%;"> <iframe src="https://coinlib.io/widget?type=full_v2&theme=dark&cnt=6&pref_coin_id=1505&graph=yes" width="100%" height="277px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe> </div> <div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"> <a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a> by Coinlib </div> </div>
Widget types & embed code
Crypto Price Widget
Display a table of top cryptocurrencies with prices, market cap, volume, and optional sparkline charts.
Show embed code
<div style="height:301px; background-color: #1B2030; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F; padding: 0px; margin: 0px; width: 100%;"> <div style="height:281px; padding:0px; margin:0px; width: 100%;"> <iframe src="https://coinlib.io/widget?type=full_v2&theme=dark&cnt=6&pref_coin_id=1505&graph=yes" width="100%" height="277px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe> </div> <div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"> <a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a> by Coinlib </div> </div>
Live Coin Chart
Interactive price chart for a single cryptocurrency with time range selector.
Show embed code
<div style="height:560px; background-color: #1B2030; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F; padding: 0px; margin: 0px; width: 100%;"> <div style="height:540px; padding:0px; margin:0px; width: 100%;"> <iframe src="https://coinlib.io/widget?type=chart&theme=dark&coin_id=859&pref_coin_id=1505" width="100%" height="536px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe> </div> <div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"> <a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a> by Coinlib </div> </div>
Single Coin Widget
Compact widget showing a single coin's price, changes, market cap, and volume.
Show embed code
<div style="height:240px; background-color: #1B2030; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F; padding: 0px; margin: 0px; width: 250px;"> <div style="height:220px; padding:0px; margin:0px; width: 100%;"> <iframe src="https://coinlib.io/widget?type=single_v2&theme=dark&coin_id=859&pref_coin_id=1505" width="250" height="216px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe> </div> <div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"> <a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a> by Coinlib </div> </div>
Crypto Converter
Cryptocurrency-to-fiat converter widget. Users can convert between crypto and fiat currencies.
Show embed code
<div style="height:350px; background-color: #1B2030; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F; padding: 0px; margin: 0px; width: 250px;"> <div style="height:330px; padding:0px; margin:0px; width: 100%;"> <iframe src="https://coinlib.io/widget?type=converter&theme=dark" width="250" height="326px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe> </div> <div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"> <a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a> by Coinlib </div> </div>
Horizontal Ticker
Scrolling marquee showing live prices of top cryptocurrencies.
Show embed code
<div style="height:62px; background-color: #1B2030; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F; padding: 0px; margin: 0px; width: 100%;"> <div style="height:42px; padding:0px; margin:0px; width: 100%;"> <iframe src="https://coinlib.io/widget?type=horizontal_v2&theme=dark&pref_coin_id=1505&invert_hover=" width="100%" height="42px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe> </div> <div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"> <a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a> by Coinlib </div> </div>
Frequently asked questions
Are Coinlib widgets free?
Yes. All Coinlib widgets are free to embed with no sign-up and no API key. The only requirement is keeping the small attribution link back to Coinlib in the widget footer.
How do I add a crypto price widget to my website?
Choose a widget above, customize the theme, coins and currency, then copy the embed code into your site's HTML. It works anywhere iframes are allowed, including WordPress, Wix, Squarespace and Blogger.
Can I customize the widgets?
Yes — every widget supports a light or dark theme and your display currency (USD, EUR, GBP, JPY and more). Depending on the widget you can also pick the coin, the number of coins shown, and the width.
Do the widgets update automatically?
Yes. Prices refresh automatically from Coinlib's live market data, so the embed code never needs updating.