Anime Watching/Recommendation Widgets

This is a tutorial for how to add the anime watching and/or recommendation widgets from my site's homepage onto your own site. It requires an Anilist account with some activity and/or rated completed anime and basic HTML and CSS knowledge. Little to no Javascript knowledge is required.

The code here uses the Anilist API. The Anilist website is built on it, so basically anything you see on there can also be retrieved via the API.

If you're wondering what an API is, it stands for application programming interface which is a more general concept about defining how programs interact with each other. But in this case we're looking specifically at a GraphQL web API, which is basically a way for your computer to request and receieve specific pieces of raw data over the Internet. With all that said you don't really need to know anything about GraphQL or APIs for this tutorial so don't worry if you understood nothing in this paragraph, just want to give a little extra information for anyone who is curious.

HTML

Add a a div or divs for the watching and/or recommendation widgets onto your site with the ids "watching" and "recommendation" respectively. Note that ids need to be unique to the page, so if you already have some element with one of those ids for some reason you'll either have to rename it, or rename the widget div ids and go through the Javascript code to update the parameters passed to document.getElementById to the new names.

These divs should be empty because we're going to insert an image and caption into them with Javascript later, so if there's already other stuff in there it could mess things up.

<div id="watching"></div> <div id="recommendation"></div>

Javascript

!!! Be careful about copying random Javascript onto your website as there's always a possibility of something malicious being in there. Read through the code and make sure you know what it's doing first and/or make sure it's coming from a trusted source. Ironic cause that's what I'm telling you to do, but I would feel irresponsible doing that without at least giving a warning first lol. !!!

This is where most of the work is going to happen. We will query the Anilist API to get your activity and/or list data, perform any needed logic on it, and then insert the result into the divs we added to the page.

First you need to get your Anilist user id. As far as I know there's no way to get this information on Anilist itself so you'll have to grab it from the API. Go here and fill in your username where it says "YOUR USERNAME" on the left pane with quotes, then press the play button to run the query and you should see the id show up on the right.

Next you'll need to add the below Javascript to the page where you added the divs for the widget(s). You can either put it directly into the HTML inside a script tag, or put it in a separate .js file and link to it in the head tag of the HTML. Since there's a decent amount of Javascript here I would personally do the latter to keep things more organized, but it shouldn't make any difference to how the code actually runs. See here for more information on adding Javascript into HTML.

We need to make sure our Javascript doesn't run until all our HTML is loaded, otherwise the divs we added earlier won't be there yet when the script looks for them and nothing will happen. If using a script tag in the HTML you can put it at the bottom of the page to accomplish this. If you're linking to a separate Javascript file in the head tag of your HTML file, then you can add defer to it which will do the same thing: <script src="/path_to_your_script.js" defer></script>.

Replace YOUR_USER_ID_HERE with the id number you got from the API, not in quotes (ex. const ANILIST_USER_ID = 123;)

const ANILIST_USER_ID = YOUR_USER_ID_HERE; const queryAnilist = async (query, variables) => { const url = 'https://graphql.anilist.co'; const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, body: JSON.stringify({ query: query, variables: variables }) }; try { const response = await fetch(url, options); if (!response.ok) { throw new Error(`Error ${response.status}: ${response.statusText}`); } return response.json(); } catch (error) { console.log(error); } } const addAnimeToPage = (containerElement, imageUrl, caption) => { const captionElement = document.createElement("p"); captionElement.appendChild(document.createTextNode(caption)); const imageElement = document.createElement("img"); imageElement.src = imageUrl; containerElement.appendChild(imageElement); containerElement.appendChild(captionElement); }

Last watched

This widget will show the last piece of activity from your account. By default this includes all types of activity, but you can change it in your Anilist settings if you want. I only wanted activity to show up for things I was actually watching (episodes watched/rewatched and series completed), so I unchecked the planning, dropped, and paused boxes.

Add the following code underneath the Javascript you already added:

const lastWatched = async () => { const query = ` query ($userId: Int) { Activity(userId: $userId, type: ANIME_LIST, sort: ID_DESC) { ... on ListActivity { id status progress media { id title { userPreferred } coverImage { large } } } } } `; const variables = { userId: ANILIST_USER_ID }; const data = await queryAnilist(query, variables); const title = data.data.Activity.media.title.userPreferred; const status = data.data.Activity.status; const progress = data.data.Activity.progress; const image = data.data.Activity.media.coverImage.large; const watchingContainer = document.getElementById("watching"); const caption = progress === null ? `${title}: ${status}` : `${title}: ${status} ${progress}` addAnimeToPage(watchingContainer, image, caption); } lastWatched();

Random daily recommendation

This widget will grab all completed anime on your list above a certain score, and randomly choose one to display. It will also stash the recommendation along with the current day in the user's browser's localStorage. If they return to your site later it will check the current day against the stashed day, and if the days are the same it'll use the stashed recommendation, otherwise it'll pick a new one.

There are a couple options you get to pick here. You can choose the minimum score you would consider for a recommendation, I have mine at 7.5 / 10. You can also choose which lists to pick from: by default it uses from your Completed list, but you can further narrow it down to only pick from completed anime off one or more custom lists. I have a list where I put just the first seasons of shows that I've finished so I don't randomly recommend a season 4 or something.

Add the following code below the other code you've already added.

Change the MINIMUM_RECOMMENDABLE_SCORE if you'd like, make sure it's not in quotes.

If you don't want any custom lists than leave it as is. If you want to add one then put it in between the brackets of RECOMMENDABLE_CUSTOM_LISTS in quotes. Make sure the name is exactly the same as in your settings including capitalization/spaces/punctuation/etc (ex. ["My amazing custom list :)"]). To add multiple custom lists just put each name in quotes and separate with commas within the brackets (ex. ["list", "list again", "listy list"]).

const MINIMUM_RECOMMENDABLE_SCORE = 7.5; const RECOMMENDABLE_CUSTOM_LISTS = []; const getRandomInt = (max) => { return Math.floor(Math.random() * max); } const getRecommendation = async () => { const query = ` query ($userId: Int, $page: Int) { Page(page: $page, perPage: 50) { mediaList(userId: $userId, type: ANIME, status: COMPLETED, sort: SCORE_DESC) { media { title { userPreferred } coverImage { large } } score customLists } pageInfo { hasNextPage } } } `; const animeArray = []; let page = 1; let isLastPage = false; while (!isLastPage) { const variables = { userId: ANILIST_USER_ID, page } const data = await queryAnilist(query, variables); animeArray.push(...data.data.Page.mediaList); const lastAnime = animeArray[animeArray.length - 1]; isLastPage = !data.data.Page.pageInfo.hasNextPage || lastAnime.score < MINIMUM_RECOMMENDABLE_SCORE; page++; } const isRecommendable = (anime) => anime.score >= MINIMUM_RECOMMENDABLE_SCORE && (RECOMMENDABLE_CUSTOM_LISTS.length ? RECOMMENDABLE_CUSTOM_LISTS.some(list => anime.customLists[list]) : true); const recommendableAnime = animeArray.filter((anime) => isRecommendable(anime)); return recommendableAnime[getRandomInt(recommendableAnime.length)].media; } const randoRecommendation = async () => { const lastRecommendationDate = localStorage.getItem('recommendationDate'); const lastRecommendation = localStorage.getItem('recommendation'); const today = new Date().toISOString().slice(0, 10); const getNewRecommendation = lastRecommendation === null || lastRecommendation === undefined || lastRecommendation === "undefined" || today > lastRecommendationDate; const recommendation = getNewRecommendation ? await getRecommendation() : JSON.parse(localStorage.getItem('recommendation')); const recommendationContainer = document.getElementById("recommendation"); const title = recommendation.title.userPreferred; const image = recommendation.coverImage.large; addAnimeToPage(recommendationContainer, image, title); if (getNewRecommendation) { localStorage.clear(); localStorage.setItem('recommendation', JSON.stringify(recommendation)); localStorage.setItem('recommendationDate', today); } } randoRecommendation();

CSS

With the HTML and Javascript in place you should be seeing anime poster images and titles showing up on your page. It's up to you to style them however you want. Since the image and paragraph elements used for the anime poster and caption are inserted with Javascript and don't have any ids or classes associated with them, I'd recommend using the CSS descendent selector like so to select descendents of the container elements:

#watching img { styles here } #watching p { styles here }

And if you have both widgets and want to style them the same way, I'd put the same class on both of them and replace the id selector with the class name selector.

All done! Yay!

If you have any issues and need some help OR if you don't and get this up and running on your site, either way I'd love to know! Thanks :D