1. Insert the webring widget into your website (See How to embed widget below). The widget can be added to your webpage's footer, sidebar or wherever you prefer.

2. Before you get accepted you'll see the message "Site not found in webring." which is normal and indicates you've sucessfully embedded the widget

3. Head to the GitHub page and Fork or clone the repository.

4. Add your entry at the bottom of the webring.json using these name valued pairs:

{
    "name": "Enter Your Name",
    "url": "https://your_website.here",
    "urlText": "☆｡･ﾟ✧ Welcome to My Website ✧･｡☆",
    "graduating_year": "20xx",
    "program": "Your current enrolled program",
    "description": "A short description of your website",
    "background": "https://background_img.gif or #00b34d",
    "nameColor": "white", 
    "programColor": "white",
    "gradYearColor": "white",
    "descriptionColor": "#dedede",
    "urlColor": "white",
    "fontFamily": "monospace"
}
                    

5. Open a pull request with your addition.

6. Once accepted, the widget will update and you'll be officially part of the webring!

webring.json format

Property	Description
"name"	Your name or alias. Example: "John Doe".
"url"	URL to your website. Example: "https://your_website.here".
"urlText"	Text to display for the website link. Example: "Click Me!".
"graduating_year"	Your graduating/graduated year. Example: "2020".
"program"	The program you are enrolled in. Example: "Health Science".
"description"	A short description of your website. Example: "My personal blog..".
"background"	Background image URL or color. Example: "https://background_img.gif" or "#00b34d".
"nameColor"	Text color for the name. Example: "white".
"programColor"	Text color for the program. Example: "white".
"gradYearColor"	Text color for the graduation year. Example: "white".
"descriptionColor"	Text color for the description. Example: "#dedede".
"urlColor"	Text color for the URL. Example: "white".
"fontFamily"	Font family used in the display. Example: "monospace".

Note: You can leave entries blank by having the values be "". By default, all the color keys will have a default value if all of them have a blank entry. This will display the default profile card appearance.

You can quickly embed the webring widget into your website by adding the following components to your HTML file. The widget allows for basic customization, but full customization options are available.

HTML Embedding

<link rel="stylesheet" href="https://jacobl04.github.io/Western-Webrings/webring.css">

<!-- Default Style -->
<div id="western-webring"
    data-style="default"
    data-color="blue"
    data-show-list="true"
    data-show-random="true"
    data-random-text="[?]"
    data-arrow-prev="< Prev"
    data-arrow-next="Next >"
    >
</div>

<script src="https://jacobl04.github.io/Western-Webrings/webring.js" async></script>
                    

React (JSX) Embedding

import React, { useEffect } from 'react';

const WesternWebring = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://jacobl04.github.io/Western-Webrings/webring.js';
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return (
    <!-- Default Style -->
    <div id="western-webring"
        data-style="default"
        data-color="blue"
        data-show-list="true"
        data-show-random="true"
        data-random-text="[?]"
        data-arrow-prev="< Prev"
        data-arrow-next="Next >"
    ></div>
  );
};

export default WesternWebring;
                    

To fully customize the widget to match your website's theme, I recommend downloading the webring.css file and integrating it directly into your website. You can change things like button styles, text colors, font families and more.

Profile Card Preview

Generate JSON

JSON Format