I am currently working on a prototype for the flair provided by Stack Exchange and can't seem to get the API to work with CodePen. It continuously returns the following error on the SE.init call:

Uncaught channelUrl must be under the current domain.

But I really just want to fetch from routes like /users/{ids}/associated Is there a way to successfully implement the API on sites like JSFiddle or Codepen?

I don't need any special authentication.

Note I tried the "Javascript SDK":

    clientId: 16131,
    key: 's29XM)Eqn2x3YxhjLgFwBQ((',
    channelUrl: 'codepen.io/PerpetualJ/blank', // Issue is here, this isn't a valid path.
    complete: function (data) { fetch(); }
function fetch() {
    var info = SE.users('9893154');

which gave the above error.

Is it possible to use the API with sites like JSFiddle or Codepen for rapid web debugging and demonstrations?

  • Note that the SDK only does one thing, and not at all well. It helps slightly with OAuth2 authentication. That's it. Since you don't need OAuth, there's no point in using the SDK. Commented Sep 9, 2019 at 22:22

1 Answer 1


This is not the most educated answer, but through trial and error I have found a way to get the information I'm needing for my project. However, the biggest downside to this method seems to be the throttles that are in place. Websites like Codepen can easily exceed this, especially if you're using a debug window and a live/full screen view side by side for quick debugging.

The implementation is very straightforward, and for my purposes it works very well:

var accountID = "13342919";
var reputation = 0;
var goldBadges = 0;
var silverBadges = 0;
var bronzeBadges = 0;

var data = null;
var request = new XMLHttpRequest();
    "https://api.stackexchange.com/2.2/users/" + accountID + "/associated",
request.onload = function() {
    data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
        for (var i = 0; i < data.items.length; i++) {
            goldBadges += data.items[i].badge_counts.gold;
            silverBadges += data.items[i].badge_counts.silver;
            bronzeBadges += data.items[i].badge_counts.bronze;
            reputation += data.items[i].reputation;

        document.getElementById("reputation").innerHTML = reputation;
        document.getElementById("gold-badges").innerHTML = goldBadges;
        document.getElementById("silver-badges").innerHTML = silverBadges;
        document.getElementById("bronze-badges").innerHTML = bronzeBadges;

Feel free to check it out over on Codepen or JSFiddle.

  • @BrockAdams I explicitly state in the question that I'd like to use anonymous authentication since it'll be on public sites like Codepen and JSFiddle.
    – Taco
    Commented Sep 9, 2019 at 22:04
  • @BrockAdams Removed authentication tag for future readers, and my apologies. I'm still new to the API.
    – Taco
    Commented Sep 9, 2019 at 22:12
  • 1
    Sorry, I got a bit cross there. I really should have hammered until I got a concrete example of your actual goal, then I'd have realized the XY factor. But the initial problem was pretty interesting, and there may yet be a way... Commented Sep 9, 2019 at 22:16
  • As far as codepen and throttles, change your pen settings to disable Auto-Updating Preview. Commented Sep 9, 2019 at 22:18
  • @BrockAdams Just didn't want to step on anyone's toes being new to the community is all. I will gladly welcome an answer that can solve it the other way as I believe that is a cleaner implementation anyways. Also, thanks for the tip on Auto-Updating Preview, I still have 80k seconds left lol
    – Taco
    Commented Sep 9, 2019 at 22:36
  • 1
    I wasn't referring to "another way". I thought your question was about an exponentially harder problem. ... If you are quota'd out for today, you can probably get around that by adding your key to the URL. Commented Sep 9, 2019 at 22:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .