Customization

To customize your page you can edit the downloaded index.html file from the Site Generator or create one from scratch.

You can view the template page for more info on how to customize your page.

Editing index.html

The body of the generated html file should look like this:

<div class="container-xl">
    <div class="container-lg d-flex flex-column justify-content-center align-items-center">
        <div class="container w-75">
            <h1>Company Name</h1>
            <p id="time">Updated TIME <a class="link-primary float-end" href="/">Refresh</a></p>
            <p>Refreshing in <span id="timerDisplay">01:00</span></p>
        </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Service</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>                
            <tr>
                <th scope="row">App 1</th>
                <th class="text-warning" id="1e1e634b-4173-4a09-83f0-474a38be9f46">
                    Pinging...
                </th>
            </tr>
            <tr>
                <th scope="row">App 2</th>
                <th class="text-warning" id="2b44e255-381f-45b0-a209-138756da6dda">
                    Pinging...
                </th>
            </tr>
        </tbody>
    </table>
</div>

Everything can inside the body can be edited. If you want keep using the script.js file you have to pay attention to a few things.

1. Editing the time output

The time output wil be placed in any html element that has the id time. Further you will have to put the word "TIME" inside the element because it will be replaced by the time.

Your code should look something like this:

<span id="time">Updated TIME</span>

2. Editing the timer display

The timer will be displayed in an html element that has the id timerDisplay.

Your code could look something like this:

<p>Refreshing in <span id="timerDisplay">01:00</span></p>

Note that the timer has to be enabled in data.json

3. Editing the status output

The status of an app will be placed inside an html element which has the same id as the app specified in data.json.

Your code could look something like this:

<p>My App Status: <span id="1e1e634b-4173-4a09-83f0-474a38be9f46">placeholder when loading</span></p>

Editing data.json

You can also edit the data.json file to accomplish some changes for your page. Some values are only used to load the page in the site generator and don't affect the page.

Field	Description	Affects the Page
apihost	The apihost is the domain for the api are beeing made to. This value should not be changed.
apps	An Array of Objects which includes the data for the apps
heading	Heading of the page
text	Text of the page
refreshTimer	This can be set to `true` or `false` and decides if the page should be reloaded after one minute.

The value for apihost should always be https://ismyapponline.vercel.app

Options for the apps:

Field	Description	Affects the Page
id	This value should be the same as the one for the HTML element
name	The name of the app
url	The url of the app
response	Sets the response type for the app

Response Types:

Response Type	JSON value	Description
Not Responding	nothing	The app is marked as offline if the server doesn't respond
Code 500	500	The app is marked as offline if the server responds with a code 500
Both	both	The app is marked as offline if one of the above states is true

data.json

{
    "apihost": "", //<- the api host goes here
    "apps": [
        {
            "id": "1e1e634b-4173-4a09-83f0-474a38be9f46",
            "name": "App 1",
            "url": "https://example.com",
            "response": "nothing"
        },
        {
            "id": "2b44e255-381f-45b0-a209-138756da6dda",
            "name": "App 2",
            "url": "https://app2.example.com",
            "response": "500"
        },
        {
            "id": "5907cbd7-cb59-40fa-9840-bfd33df1f5b6",
            "name": "App 3",
            "url": "https://app3.example.com",
            "response": "both"
        }
    ],
    "heading": "Company Name",
    "text": "This is a text",
    "refreshTimer": true
}

Creating your own page

If you want to create your own page just follow the instructions above when you want to use script.js.

You can download the minified script file here.

When you want to create your own script follow the guide for a custom script.