Cryptocurrency Price Widget for Website

Cryptocurrency Price Widget for Website
Code Snippet:Cryptocurrency Value Widget
Author: Anon
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 1,086
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X