Adding weather widget to custom component

Hi,

I'm trying to insert a widget in an app but it does not load.
For instance a weather widget from https://weatherwidget.io/.
It does show a link in the app, but that's it.

I use a text box with 'render as html' enabled. What am I doing wrong?

Thanks!

Hey there @mm79 and welcome to the community! You can render your inputs as HTML for a textinput, but you can't import HTML from external sources. You could try doing this with a custom component though!

I was able to get it working pretty easily. Just drag a custom component onto the canvas, and paste the code from the site into the input (it's below).

<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>

You'll need to toggle the "allow popups to escape sandbox" to on for it to work.

Thank you very much Justin, it works perfectly! :smiley:

1 Like

Oh, one more question though…

Is it possible to change the value of the widget dynamically? For instance when I have a city selector, the widget code is adjusted depending on the city selector value?

Never mind, I found it in the docs:

https://docs.retool.com/docs/custom-react-components

1 Like