Streaming live at 10am (PST)

Add price chart to website


#1

Hello!
I would need a bit of help with adding a gold price chart to my website.
I am taking the chart from here (it´s the best i could find, although it´s still branded. if any suggestion on better charts, much appreciated): https://www.moneymetals.com/precious-metals-charts/gold-price

According to the instructions there are 2 steps:
1) copy this script in the head tag
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script type="text/javascript" src="https://www.moneymetals.com/api/charts/embed.js"></script>
<script defer type="text/javascript">
$(document).ready(function()
{
$("#ilb-display-chart" ).MoneyMetals({default_metal:'gold',chart_width: 780,body_width: 850});
});
</script>
`

--> i did it

2) copy the following code where i want the chart to be placed (Anchor link is required)
<div id="ilb-display-chart" >
<a href="https://www.moneymetals.com/buy/gold"></a>
</div>

--> here i have a bit difficulties... i added the custom code to the divblock and assigned ID: ilb-display-chart to the divblock.
I must be doing something wrong since when i publish the website, i cannot see the chart.
Anyone could give me a quick feedback? @sabanna you are usually my savior... can i ask for one more help from you?
thanks!
Francesca


Here is my public share link: LINK
(how to access public share link)


#2

You will want to copy step two into an embed widget.


#3

Hi @AlexN,
thanks for your quick reply!
I think i actually did it, meaning that i selected the div, dropped in the embed code widget, and pasted the code 2) into the code editor

so i wonder if anything else that i am missing?
thanks!
F


#4

That should be everything. You should see it when you publish the site.


#5

Hi @francikina,

I'm sorry to hear you have trouble with custom embeds.

  1. The problem with your code is, it includes another jQuery script when Webflow already includes one by default, creating a conflict between the two libraries as they use the same namespace.

  2. Also, you cannot paste jQuery ready code in the header without adjustments, as Webflow scripts have to run first to properly load your site.

In Step 1, here is the code you need to change to:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('https://www.moneymetals.com/api/charts/embed.js', function() {
    $("#ilb-display-chart" ).MoneyMetals({default_metal:'gold',chart_width: 780,body_width: 850});
  });
});
</script>

If you need further help, do let us know.

Have a good day.


#6

Hi @samliew,
thanks a lot!
This change was a bit beyond my current abilities, so your help has been much appreciated :)grin:

have a good day too
F


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.