How to Embed the Google Finance Widget on Your Website?

Having trouble with embedding the Google Finance widget on your website? Here's how to properly embed the widget.

How to Embed the Google Finance Widget on Your Website?
Photo by Austin Distel / Unsplash

If you're running a finance website and you want to show the price of a certain stock, you should be using the Google Finance widget. It's really easy to embed the Google Finance widget on your website and can be done by:

To embed the Google Finance widget, you have to follow three steps. First, you need to choose your widget, then customize it, and lastly copy and paste the HTML code on your website.

Seems pretty easy, right? Well, let's dive a little deeper into how the whole Google Finance widget can be embedded on your super sexy website. I'll also take a look at three other finance widgets that might catch your attention.

The infamous Google Finance widget

If you want your website to look super cool with lots of numbers and stock tickers, then your best bet would probably be the Google Finance widget. It provides real-time stock information with beautiful charts and quotes. Heck, it even comes with stock news and currency conversions.

You can customize the charts for all of your stocks and put them on your website with ease. It really doesn't get any simpler than that, eh? Let's go more in-depth with how you can embed the widget on your website, shall we?

How to embed the Google Finance widget

The embedding process of the Google Finance widget is quite easy. It can be done in only three steps and doesn't require any top-secret programming skills. Heck, it just takes a couple minutes.

First, head over to the Google Chrome Web Store and search for the Google Finance widget (or click here, duuuh).

Then, customize the charts so they look like something taken out of a Zac Efron movie (any girls can relate). Include the features you want your chart to include and proceed to the next step.

Last step is to simply copy the code the widget provides you with. The code can be found below the widget and is written in HTML. Then, go ahead and paste it on your website using something like an HTML WordPress block.

That's it. You've now embedded the Google Finance widget on your website.

The Market Overview widget

The Market Overview Widget is a quite convenient tool for following the latest market activity over various sectors. This widget allow your users to take a quick glance into the stock market directly from your website.

It looks MUCH better than the Google Finance widget in my opinion. If I were to choose a finance widget for my website, I'd definitely choose the Market Overview widget. No doubt.

It also allows you to choose the time frame of the stock price, the tabs you want the widget to show, or hide the chart altogether. It's completely up to you.

How to embed the Market Overview widget

Head over to Trading View's Market Overview widget and customize it to your liking. You can change the ticker symbol, colors of the chart, whether you want a grid or not, and many other options.

Once you think your chart looks awesome, scroll a bit down and copy the HTML code under the headline "Embed code". It looks something like this:

Then go ahead and paste it on your website using a HTML block. That's basically it. Pretty darn simple, eh?

The Stock Market widget

The Stock Market widget is also a widget that's created by Trading View and it looks just as amazing as the Market Overview widget. It's a tad more simple and doesn't come with as many features. Perfect for a minimalist!

How to embed the Stock Market widget

To embed the Stock Market widget, head over to the Stock Market widget website and customize the chart to your liking. Once you think it looks amazing, then copy the code in the "Embed code" section below the chart.

Head over to your own website and paste it using an HTML block. That's basically it. You've now featured your website with a stunning looking widget.

The Elfsight stocks widget

One look at the Elfsight Stocks widget website will make you fall in love and forget everything about all the other widgets. It looks stunning and comes with a ton of features that you can play with.

Elfsight has made a bunch of other widgets but this stock widget is definitely one of the best widgets they've made so far. It only takes about a minute to get started with and is really easy to customize.

How to embed the Elfsight Stocks widget

The setup process is piece of cake. Head over to the website and sign up for Elfsight. You're then taken through a setup process and after that you're able to customize the widget.

Once you've customized the background color, symbols, etc. then copy the code and paste it on your website. That's basically it.

Key takeaways

I hope this blog post gave you a somewhat sense of the best finance widgets out there — and how to embed the Google Finance widget.

If I were to choose a widget for my website, then I'd definitely go with the Elfisight Stocks widget or one of the Trading View widgets since their UI is much more user friendly than Google's old school looks.

That's just my two cents.