HTML Widget

Contents

• Example
• Getting Started
• Select a size
• Copy & add custom code

Main info

Showcase wind data directly on your apps & websites using the WindLive HTML widget. It's like having your own mini version of WindLive, available to all, on your own website.

This is useful for local websites that wish to display live wind readings. Here's an example of what it looks like:

Example

Here's an example of what a widget looks like:

👋 Getting started

If you're using an editor such as WordPress, Wix, Squarespace or similar, you'll have to create a custom HTML code embed. In your editor, look for an option or a 'block' that allows you to add custom code.
‍

📏 Select a size

Chose the widget sizing that fits your website. You can come back here and change it anytime.
‍

<div style="position:relative;padding-bottom:30%;">
<iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" src="https://api.windlive.mu/widgets/?loc=lmb2">
</iframe>
</div>

<div style="width:400px;height:122px">
<div style="position:relative;padding-bottom:30%;">
<iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" src="https://api.windlive.mu/widgets/?loc=lmb2">
</iframe>
</div></div>

<div style="width:300px;height:91px">
<div style="position:relative;padding-bottom:30%;">
<iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" src="https://api.windlive.mu/widgets/?loc=lmb2">
</iframe>
</div></div>

<div style="width:250px;height:76px">
<div style="position:relative;padding-bottom:30%;">
<iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" src="https://api.windlive.mu/widgets/?loc=lmb2">
</iframe>
</div></div>

</> Copy and paste code

Copy & paste the above HTML code below into your project.

If you're coding your site by hand (you probably know what you're doing), paste the code where you'd like the widget to be displayed. Note that if you've chosen 'adaptive' sizing, you'll have to manually set the width of the code's parent element (the max width is 767px).
‍

✅ You're set

That's it! You now have your very own widget. Keep an eye out as we'll be adding more styles in the near future. Enjoy 🎉