Loading...

The Official Webster API is a small API that allows users to display cute, randomly generated images of their favorite web designer, Webster!

Example

Click the image to cycle!

Usage

To use this API on your website, you will need to do the following:

1. Copy the code from the script and paste it into your website's JavaScript file, or include it in a script tag on your HTML page.

2. Make sure you have an element on your page with an ID of "websterPics" that you want to update with the response. For example, you might have an `img` element like this: `<img id="websterPics">`

3. If you want to change the element that is updated with the response, you can modify the line of code that sets the `src` attribute.

4. If you want to change the length of time before the request is retried after an error, you can modify the value passed to `setTimeout`.

The Script:


    async function updateWebsterPics() {
      try {
        // Show a loading state or placeholder image while the request is being made
        document.getElementById("websterPics").src = "loading.gif";
    
        // Make a request to the specified URL
        const res = await fetch("https://webster.lunareclipse.studio");
    
        // If the request was not successful, throw an error
        if (!res.ok) {
          throw new Error(`Request failed with status ${res.status}`);
        }
    
        // Parse the response as JSON
        const data = await res.json();
    
        // If the response does not have a URL, throw an error
        if (!data.url) {
          throw new Error("Response is missing the 'url' property");
        }
    
        // Update the src attribute of the element with the URL
        document.getElementById("websterPics").src = data.url;
      } catch (error) {
        // Log the error to the console
        console.error(error);
        // Display an error message to the user
        document.getElementById("websterPics").src = "https://cdn.lunareclipse.studio/img/projects/webster-api/gallery/error.webp";
        // Retry the request after 5 seconds
        setTimeout(updateWebsterPics, 5000);
      }
    }
    
    // Call the function to start the process
    updateWebsterPics();
                                            

Credits