Cryptocurrency Price Widget for Website

This code embeds a dynamic widget displaying real-time cryptocurrency price charts on your website. The widget provides essential market data for popular cryptocurrencies (BTC, ETH, XRP, BCH, etc), helping your audience track price fluctuations easily.

This widget adds value by keeping your audience informed about cryptocurrency prices without leaving your site. It provides visitors with up-to-date cryptocurrency market information, enhancing their user experience.

How to Embed Cryptocurrency Price Widget on Your Website

First, think about where you want to place the cryptocurrency widget on your website. It could be on your homepage, a dedicated cryptocurrency page, or any other location of your choice.

Once you’ve chosen the location, copy and paste the following code into your HTML file at that spot.

<div class="widget">
		<h2>Bitcoin Price Chart Widget</h2>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
  {
  "title_raw": "Cryptocurrencies",
  "belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
  "gridLineColor": "rgba(233, 233, 234, 1)",
  "scaleFontColor": "rgba(218, 221, 224, 1)",
  "title": "Cryptocurrencies",
  "tabs": [
    {
      "title_raw": "Overview",
      "symbols": [
        {
          "s": "BITFINEX:BTCUSD"
        },
        {
          "s": "BITFINEX:ETHUSD"
        },
        {
          "s": "BITFINEX:XRPUSD"
        },
        {
          "s": "COINBASE:BCHUSD"
        },
        {
          "s": "COINBASE:LTCUSD"
        },
        {
          "s": "BITFINEX:IOTUSD"
        }
      ],
      "title": "Overview"
    },
    {
      "title_raw": "Bitcoin",
      "symbols": [
        {
          "s": "BITFINEX:BTCUSD"
        },
        {
          "s": "COINBASE:BTCEUR"
        },
        {
          "s": "COINBASE:BTCGBP"
        },
        {
          "s": "BITFLYER:BTCJPY"
        },
        {
          "s": "WEX:BTCRUR"
        },
        {
          "s": "CME:BTC1!"
        }
      ],
      "title": "Bitcoin"
    },
    {
      "title_raw": "Ripple",
      "symbols": [
        {
          "s": "BITFINEX:XRPUSD"
        },
        {
          "s": "KRAKEN:XRPEUR"
        },
        {
          "s": "KORBIT:XRPKRW"
        },
        {
          "s": "BITSO:XRPMXN"
        },
        {
          "s": "BINANCE:XRPBTC"
        },
        {
          "s": "BITTREX:XRPETH"
        }
      ],
      "title": "Ripple"
    },
    {
      "title_raw": "Ethereum",
      "symbols": [
        {
          "s": "COINBASE:ETHUSD"
        },
        {
          "s": "KRAKEN:ETHEUR"
        },
        {
          "s": "KRAKEN:ETHGBP"
        },
        {
          "s": "KRAKEN:ETHJPY"
        },
        {
          "s": "POLONIEX:ETHBTC"
        },
        {
          "s": "WEX:ETHLTC"
        }
      ],
      "title": "Ethereum"
    },
    {
      "title_raw": "Bitcoin Cash",
      "symbols": [
        {
          "s": "COINBASE:BCHUSD"
        },
        {
          "s": "BITSTAMP:BCHEUR"
        },
        {
          "s": "CEXIO:BCHGBP"
        },
        {
          "s": "POLONIEX:BCHBTC"
        },
        {
          "s": "HITBTC:BCHETH"
        },
        {
          "s": "WEX:BCHLTC"
        }
      ],
      "title": "Bitcoin Cash"
    }
  ],
  "plotLineColorFalling": "rgba(255, 74, 104, 1)",
  "plotLineColorGrowing": "rgba(60, 188, 152, 1)",
  "showChart": true,
  "title_link": "/markets/cryptocurrencies/prices-all/",
  "locale": "en",
  "symbolActiveColor": "rgba(242, 250, 254, 1)",
  "belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
  "height": 660,
  "width": 640
}
  </script>
</div>
<!-- TradingView Widget END -->
</div>

2. If you want to customize the widget, you can use additional CSS. You can use the CSS classes and IDs from the widget’s HTML structure to style it as desired.

.widget{
    width: 640px;
    margin: 0 auto;
}

.widget h2 { 
font-size: 28px; /* Customize the font size */ 
}
.tradingview-widget-container__widget {
 background-color: #f0f0f0; /* Customize the background color */
}

That’s it! You’ve successfully added a real-time cryptocurrency widget to your website. Your visitors can now stay updated on cryptocurrency prices conveniently while browsing your site. This enhances user engagement and keeps your website content fresh and informative. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.