▼
Streaming live at 10am (PST)

Trigger js <script> on mouse click for Mixcloud Widget

Design help Animations & Interactions
#1

How do I activate the an embedded javascript on the click of a button on my site?

I want to embed a Mixcloud widget API for radio shows which stream from Mixcloud within my site.

I can do this easily by embedding the script on the page but how do I trigger the javascript on the click of a button?

#2

Hey!

You can place your widget code inside a JavaScript function that only activates when that button is clicked. Here’s an example:

<script type="text/javascript">
  document.getElementById("mixcloudButton").onclick = function () { 
    var promise = Mixcloud.FooterWidget("/username/show/");
    promise.then(function(widget) {
        // Put code that interacts with the widget here e.g.
        widget.events.pause.on(pauseListener);
    });
  };
</script>

And of course you’d need the other script tag on the page too (before the above)!

#3

Thanks Sarwech,

So do I have to give the WF button a class name of mixcloudButton?

I have already set the CMS and a field which has the URL of the mixcloud radio show but how do I get the username/show ID to change when a particular show link is selected?

#4

Using that code, you would need to give it an ID which can be found in the 2nd tab of the right hand side panel.

I haven’t actually used Mixcloud myself so I’m not sure what you’re trying to do with it in this case. If you can share a read-only link then I can try to take a look and help :slight_smile:

#5

Hi Mark,
I am trying to do this exact same thing and I have not been able to figuring out how to get the mixcloud widget to change the show ID when a show link is clicked. I’ve been stuck on this for a week because there is so little documentation on the mixcloud widget and how to implement it. Were you able to figure this out?? Please let me know if you came up with a solution. Thanks so much!