Eutropia Trade Widget Integration Example
Note: This is a demonstration page showing how to embed the Eutropia trade widget on any website.
How to Embed the Widget
To embed the Eutropia trade widget on your website, simply add the following iframe code to your HTML:
<iframe
src="https://eutropia.app/embed/trade"
width="450"
height="800"
style="border: none; border-radius: 12px; overflow: hidden;"
scrolling="no"
title="Eutropia Trade Widget">
</iframe>Customization Options
You can customize the widget by adjusting the following parameters:
- width - Change the width of the widget (default: 450px)
- height - Change the height of the widget (default: 800px)
- style - Add additional CSS styles to the iframe
Responsive Integration
For a responsive implementation, you can use CSS to make the widget adapt to different screen sizes:
<div style="max-width: 450px; width: 100%; margin: 0 auto;">
<iframe
src="https://eutropia.app/embed/trade"
width="100%"
height="800"
style="border: none; border-radius: 12px; overflow: hidden;"
scrolling="no"
title="Eutropia Trade Widget">
</iframe>
</div>Advanced Implementation
For advanced users, you can also communicate with the widget using the postMessage API. The widget emits events that you can listen for:
window.addEventListener('message', function(event) {
// Ensure the message is from our widget
if (event.origin === 'https://eutropia.app') {
const data = event.data;
// Handle different message types
if (data.type === 'OrderComplete') {
console.log('Order completed with ID:', data.orderId);
// You can perform actions based on order completion
}
if (data.type === 'Resize') {
// The widget is requesting a resize
const iframe = document.getElementById('eutropia-widget');
if (iframe) {
iframe.style.height = data.height + 'px';
}
}
}
});