Readymag is a great no-code frontend tool for making websites. Their examples are always stunningly beautiful and modern, so I’m glad to finally be using it for this new webradio I’m building in Lima.
I want to keep it short and sweet so I’m just going to share the basics of how to use javascript to add extra functionality to Readymag widgets.
Add a custom function to a button widget
Step 1: Create a button widget
This is just a basic button with the play triangle. It has a fade in/out animation that changes the opacity when clicked.
Step 2: Open developer tools and find the data-id tag
Each widget in Readymag has its unique data-id so they can all be extended with code. There are probably limitations on what can be done so take your own precautions. Note: Readymag does not assist with custom code issues.
Step 3: Write the script
var audio = new Audio("https://audiostream:8000/radio.mp3");function togglePlay() {
return audio.paused ? audio.play() : audio.pause();
};
$('div.common-button[data-id="60a82bac81106c005dbc6668"]').click( togglePlay );
This code creates an audio object with the target radio stream. The togglePlay function simply toggles .play() / .pause() methods on the audio object. Finally, I’m using JQuery to get the specific div with className=”common-button” and with the specific data-id that I wanted, and I’m binding the togglePlay function to the click event.
For extra JQuery functionality just check out their documentation!
Step 4: Create a code widget
Just wrap the javascript code inside <script> tags and include it in the Widget Code area. There’s no need to import JQuery manually, Readymag uses it internally so it’s already available.
Done. That’s it.
Wrapping up
In essence this is basic jquery stuff, but it took me a while to figure how to integrate it inside of Readymag. I hope this can save somebody 30 minutes or so of going over the documentation.
Thanks for reading!