Alert Notifications

Welcome to the guide on integrating alert notifications into your webpage. This section will explain how to dynamically display alert notifications triggered by specific Discord commands, which are customizable via the API.

Integration Code Overview

Here is the basic script you will need to embed in your HTML to fetch and display alert notifications:

<script>
    window.onload = function () {
        // This is the username of your Discord Account
        // Go to settings > my account > username
        const username = "mhuzaifadev";

        // Fetch and display alert elements
        fetch(`https://api.quickalert.me/alert_element?username=${username}`)
            .then(response => response.text())
            .then(html => {
                const alertDiv = document.createElement("div");
                alertDiv.innerHTML = html;
                const alertArea = document.getElementById('alertArea');
                alertArea.appendChild(alertDiv);
                activateModal();
            });

        // Function to activate the modal display
        function activateModal() {
            var alertModal = document.getElementById("alert-modal");
            if (alertModal && alertModal.innerText.includes("No alert") === false) {
                alertModal.style.display = "flex";
                // Auto-hide the modal after a specified time (4000 ms = 4 seconds)
                setTimeout(() => {
                    alertModal.style.display = "none";
                }, 4000);
            }
        }
    };
</script>

Customizing Display Duration

The duration the alert is displayed can be adjusted by changing the setTimeout duration. The default value here is 4000 milliseconds (4 seconds). To change this:

• 1 Second Display: Change 4000 to 1000.
• 10 Second Display: Change 4000 to 10000.

This customization allows you to set how long the alert should stay visible based on the urgency or importance of the message.

Discord Commands and Color Coded Alerts

You can trigger different types of alerts through Discord by sending commands. Each type of alert is color-coded to signify its nature, enhancing visual recognition:

Command	Description	Color
ALERT INFO This is an info alert	Triggers an informational alert	Blue background (Info)
ALERT SUCCESS Operation successful	Indicates successful operations	Green background (Success)
ALERT WARNING Check this warning	Issues a warning	Orange background (Warning)
ALERT ERROR An error occurred	Alerts to errors	Red background (Error)
ALERT General notification	For general notifications	Purple background (General)

Color Coded Alerts Visual

This image shows the different colors associated with each alert type, giving you a visual reference of what users might see on their screen when an alert is triggered.

Deleting an Alert

To remove an active alert from the display, use the following Discord command:

• DELETE ALERT

This command will clear any displayed alert, maintaining a clean and updated user interface.

---