<div id="quotesWidgetTicker"></div>
<script async type="text/javascript" data-type="quotes-widget" src="https://c.mql5.com/js/widgets/quotes/widget.js?v=3">
{"type":"ticker","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":"100%","height":50,"id":"quotesWidgetTicker","fw":"html"}
</script>
// QuotesWidgetTicker.jsx
import { useEffect, useRef, memo } from 'react';
function QuotesWidgetTicker() {
const container = useRef();
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://c.mql5.com/js/widgets/quotes/widget.js?v=3';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'quotes-widget';
script.innerHTML = `{"type":"ticker","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":"100%","height":50,"id":"quotesWidgetTicker","fw":"react"}`;
container.current?.appendChild(script);
}, []);
return (
<div ref={container}>
<div id="quotesWidgetTicker"></div>
<div className="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.ticker&utm_content=visit.mql5.quotes&utm_campaign=quotes.ticker.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
);
}
export default memo(QuotesWidgetTicker);
<!-- QuotesWidgetTicker.svelte -->
<script>
import { onMount } from 'svelte';
let container;
onMount(() => {
const script = document.createElement('script');
script.src = 'https://c.mql5.com/js/widgets/quotes/widget.js?v=3';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'quotes-widget';
script.innerHTML = `{"type":"ticker","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":"100%","height":50,"id":"quotesWidgetTicker","fw":"svelte"}`;
container.appendChild(script);
return () => {
if (script.parentNode) {
script.remove();
}
};
});
</script>
<div bind:this={container}>
<div id="quotesWidgetTicker"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.ticker&utm_content=visit.mql5.quotes&utm_campaign=quotes.ticker.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
<!-- QuotesWidgetTicker.vue -->
<script setup>
import { onMounted, ref } from 'vue';
const container = ref(null);
onMounted(() => {
if (!container.value) return;
const script = document.createElement('script');
script.src = 'https://c.mql5.com/js/widgets/quotes/widget.js?v=3';
script.type = 'text/javascript';
script.async = true;
script.dataset.type = 'quotes-widget';
script.innerHTML = `{"type":"ticker","filter":["EURUSD","USDJPY","GBPUSD","AUDUSD","USDCAD","USDCHF","NZDUSD"],"width":"100%","height":50,"id":"quotesWidgetTicker","fw":"vue"}`;
container.value.appendChild(script);
});
</script>
<template>
<div ref="container">
<div id="quotesWidgetTicker"></div>
<div class="qw-copyright"><a href="https://www.mql5.com/?utm_source=quotes.widget&utm_medium=link&utm_term=quotes.ticker&utm_content=visit.mql5.quotes&utm_campaign=quotes.ticker.widget" rel="noopener nofollow" target="_blank">MQL5 Algo Trading Community</a></div>
</div>
</template>
