```html
<!--
=========================================================
 REGEWALL TRAINING INSTITUTE
 WORLD-CLASS WHATSAPP TRAINING ASSISTANT
 WordPress / Elementor Custom HTML
=========================================================

 IMPORTANT:
 1. Replace WHATSAPP_NUMBER below with RTI's WhatsApp number.
 2. This is the FRONT-END interface.
 3. For real AI/site knowledge/appointments, connect the
    JavaScript functions to your WordPress REST API.
=========================================================
-->

<div id="rti-wa-assistant">

  <!-- LEFT VERTICAL WHATSAPP TAB -->
  <button class="rti-wa-tab" id="rtiOpenChat" aria-label="Open Regewall WhatsApp Assistant">
      <span class="rti-wa-icon">
        <svg viewBox="0 0 32 32" aria-hidden="true">
          <path d="M16 3C8.82 3 3 8.37 3 15c0 2.4.75 4.7 2.17 6.63L3.4 28.7l7.3-1.7A13.7 13.7 0 0 0 16 27c7.18 0 13-5.37 13-12S23.18 3 16 3Zm0 21.8c-1.85 0-3.65-.48-5.23-1.4l-.37-.22-4.33 1.01.92-3.98-.25-.39A10.4 10.4 0 0 1 5.2 15C5.2 9.58 10.04 5.2 16 5.2S26.8 9.58 26.8 15 21.96 24.8 16 24.8Zm6.02-7.72c-.33-.17-1.94-.95-2.24-1.06-.3-.11-.52-.17-.74.17-.22.33-.85 1.06-1.04 1.28-.19.22-.38.25-.71.08-.33-.17-1.4-.5-2.67-1.59-.99-.84-1.65-1.88-1.84-2.2-.19-.33-.02-.51.14-.68.15-.15.33-.38.49-.57.16-.19.22-.33.33-.55.11-.22.05-.41-.03-.57-.08-.17-.74-1.78-1.02-2.44-.27-.65-.55-.56-.74-.57h-.63c-.22 0-.57.08-.87.41-.3.33-1.14 1.11-1.14 2.72s1.17 3.15 1.33 3.37c.16.22 2.3 3.51 5.58 4.92.78.34 1.39.54 1.87.69.79.25 1.51.21 2.08.13.63-.09 1.94-.79 2.21-1.55.27-.76.27-1.41.19-1.55-.08-.14-.3-.22-.63-.38Z"/>
        </svg>
      </span>

      <span class="rti-wa-tab-text">WhatsApp</span>
  </button>


  <!-- CHAT WINDOW -->
  <section class="rti-chat" id="rtiChat" aria-hidden="true">

      <!-- HEADER -->
      <header class="rti-chat-header">

          <div class="rti-brand">
              <div class="rti-brand-logo">
                  RTI
              </div>

              <div>
                  <strong>Regewall Training Institute</strong>
                  <small>
                    <span class="rti-online-dot"></span>
                    Typically replies within minutes
                  </small>
              </div>
          </div>

          <button class="rti-close" id="rtiClose" aria-label="Close chat">
              ×
          </button>

      </header>


      <!-- CHAT BODY -->
      <main class="rti-chat-body" id="rtiMessages">

          <div class="rti-message rti-bot">

              <div class="rti-avatar">RTI</div>

              <div class="rti-bubble">
                  <strong>Welcome to Regewall Training Institute 👋</strong>

                  <p>
                    I can help you find professional training,
                    answer course questions, assist with registration
                    and arrange a consultation with our team.
                  </p>

                  <span class="rti-time">Now</span>
              </div>

          </div>


          <!-- QUICK ACTIONS -->
          <div class="rti-quick-title">
              How can we help you?
          </div>

          <div class="rti-quick-actions">

              <button data-action="courses">
                  🎓 Find a Course
              </button>

              <button data-action="calendar">
                  📅 Training Calendar
              </button>

              <button data-action="appointment">
                  🗓 Book Appointment
              </button>

              <button data-action="online">
                  💻 Online Training
              </button>

              <button data-action="corporate">
                  🏢 In-House Training
              </button>

              <button data-action="registration">
                  📝 Register
              </button>

              <button data-action="visa">
                  ✈️ Visa Assistance
              </button>

              <button data-action="whatsapp">
                  💬 Talk to RTI
              </button>

          </div>


          <!-- APPOINTMENT FORM -->
          <div class="rti-appointment" id="rtiAppointment">

              <div class="rti-form-title">
                  <span>🗓</span>
                  Book a Consultation
              </div>

              <p class="rti-form-description">
                  Tell us when you would like to speak with
                  the RTI team.
              </p>

              <label>Your Name</label>
              <input
                type="text"
                id="rtiName"
                placeholder="Your full name"
              >

              <label>Email Address</label>
              <input
                type="email"
                id="rtiEmail"
                placeholder="you@example.com"
              >

              <label>WhatsApp / Mobile</label>
              <input
                type="tel"
                id="rtiPhone"
                placeholder="+27..."
              >

              <label>What do you need help with?</label>

              <select id="rtiPurpose">

                  <option value="Course enquiry">
                      Course enquiry
                  </option>

                  <option value="Corporate training">
                      Corporate / In-House Training
                  </option>

                  <option value="Online training">
                      Online Training
                  </option>

                  <option value="Registration">
                      Registration
                  </option>

                  <option value="Training consultation">
                      Training Consultation
                  </option>

                  <option value="Other">
                      Other
                  </option>

              </select>


              <label>Preferred Date</label>

              <input
                type="date"
                id="rtiDate"
              >


              <label>Preferred Time</label>

              <select id="rtiTime">

                  <option>09:00</option>
                  <option>10:00</option>
                  <option>11:00</option>
                  <option>12:00</option>
                  <option>13:00</option>
                  <option>14:00</option>
                  <option>15:00</option>
                  <option>16:00</option>

              </select>


              <button class="rti-book-button" id="rtiBook">
                  Confirm Appointment
              </button>

          </div>

      </main>


      <!-- INPUT -->
      <footer class="rti-chat-footer">

          <input
            type="text"
            id="rtiInput"
            placeholder="Ask about courses, dates, fees..."
            autocomplete="off"
          >

          <button id="rtiSend" aria-label="Send">
              ➤
          </button>

      </footer>

      <div class="rti-footer-note">
          Regewall Training Institute • Developing Minds. Investing in Skills.
      </div>

  </section>

</div>



<style>

/* =====================================================
   RTI BRAND SYSTEM
===================================================== */

#rti-wa-assistant {

    --rti-orange: #C72F04;
    --rti-orange-dark: #9E2503;
    --rti-gold: #D4AF37;
    --rti-navy: #0A2342;
    --rti-blue: #0A56A8;
    --rti-green: #128C7E;
    --rti-white: #ffffff;
    --rti-light: #F5F7FA;
    --rti-border: #E5E7EB;
    --rti-text: #172033;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    position: relative;
    z-index: 999999;

}


/* =====================================================
   VERTICAL LEFT WHATSAPP BUTTON
===================================================== */

.rti-wa-tab {

    position: fixed;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 58px;
    height: 170px;

    border: none;

    border-radius:
        0
        16px
        16px
        0;

    background:
        linear-gradient(
            180deg,
            #16C47F,
            #0E9F67
        );

    box-shadow:
        0 10px 30px rgba(0,0,0,.20);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 12px;

    transition:
        width .25s ease,
        box-shadow .25s ease;

}


.rti-wa-tab:hover {

    width: 66px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.28);

}


.rti-wa-icon {

    width: 36px;
    height: 36px;

    background: rgba(255,255,255,.16);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.rti-wa-icon svg {

    width: 25px;
    height: 25px;

    fill: white;

}


.rti-wa-tab-text {

    color: white;

    font-size: 12px;

    font-weight: 800;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    letter-spacing: .5px;

}


/* =====================================================
   CHAT WINDOW
===================================================== */

.rti-chat {

    position: fixed;

    left: 76px;
    bottom: 24px;

    width: 390px;

    max-width:
        calc(100vw - 96px);

    height: 650px;

    max-height:
        calc(100vh - 48px);

    background: white;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 25px 80px rgba(10,35,66,.28);

    display: none;

    flex-direction: column;

    border: 1px solid rgba(0,0,0,.06);

}


.rti-chat.rti-open {

    display: flex;

    animation:
        rtiChatIn .3s ease;

}


@keyframes rtiChatIn {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =====================================================
   HEADER
===================================================== */

.rti-chat-header {

    min-height: 78px;

    padding:
        15px 17px;

    background:
        linear-gradient(
            135deg,
            var(--rti-navy),
            #123E69
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.rti-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.rti-brand-logo {

    width: 46px;
    height: 46px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--rti-orange),
            var(--rti-gold)
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;

    font-size: 14px;

    color: white;

    box-shadow:
        0 5px 15px rgba(0,0,0,.20);

}


.rti-brand strong {

    display: block;

    font-size: 14px;

}


.rti-brand small {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 4px;

    font-size: 11px;

    opacity: .82;

}


.rti-online-dot {

    width: 7px;
    height: 7px;

    background: #38E58B;

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(56,229,139,.15);

}


.rti-close {

    width: 34px;
    height: 34px;

    border: none;

    background:
        rgba(255,255,255,.10);

    color: white;

    border-radius: 10px;

    font-size: 25px;

    cursor: pointer;

}


/* =====================================================
   CHAT BODY
===================================================== */

.rti-chat-body {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

    background:
        #F7F9FC;

}


.rti-message {

    display: flex;

    gap: 9px;

    margin-bottom: 18px;

}


.rti-avatar {

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    border-radius: 9px;

    background:
        var(--rti-orange);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 900;

}


.rti-bubble {

    background: white;

    border-radius:
        4px
        16px
        16px
        16px;

    padding: 14px;

    max-width: 290px;

    box-shadow:
        0 4px 15px rgba(10,35,66,.06);

    color: var(--rti-text);

    font-size: 13px;

    line-height: 1.55;

}


.rti-bubble p {

    margin:
        7px 0 0;

}


.rti-time {

    display: block;

    margin-top: 8px;

    color: #98A2B3;

    font-size: 10px;

}


/* =====================================================
   QUICK ACTIONS
===================================================== */

.rti-quick-title {

    font-size: 12px;

    color: #667085;

    font-weight: 700;

    margin:
        12px 0 10px;

}


.rti-quick-actions {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

}


.rti-quick-actions button {

    border: 1px solid var(--rti-border);

    background: white;

    border-radius: 11px;

    padding: 11px 8px;

    font-size: 11px;

    font-weight: 700;

    color: var(--rti-navy);

    cursor: pointer;

    transition:
        all .2s ease;

}


.rti-quick-actions button:hover {

    border-color:
        var(--rti-orange);

    color:
        var(--rti-orange);

    transform:
        translateY(-1px);

}


/* =====================================================
   APPOINTMENT FORM
===================================================== */

.rti-appointment {

    display: none;

    margin-top: 18px;

    background: white;

    border-radius: 16px;

    padding: 17px;

    border:
        1px solid var(--rti-border);

}


.rti-appointment.active {

    display: block;

    animation:
        rtiFade .25s ease;

}


@keyframes rtiFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


.rti-form-title {

    font-weight: 900;

    color:
        var(--rti-navy);

    font-size: 15px;

}


.rti-form-title span {

    margin-right: 5px;

}


.rti-form-description {

    color: #667085;

    font-size: 11px;

    line-height: 1.5;

    margin:
        7px 0 14px;

}


.rti-appointment label {

    display: block;

    font-size: 10px;

    font-weight: 800;

    color:
        #344054;

    margin:
        10px 0 5px;

}


.rti-appointment input,
.rti-appointment select {

    width: 100%;

    box-sizing: border-box;

    border:
        1px solid #D0D5DD;

    background: white;

    border-radius: 9px;

    padding:
        10px 11px;

    font-size: 12px;

    outline: none;

}


.rti-appointment input:focus,
.rti-appointment select:focus {

    border-color:
        var(--rti-orange);

    box-shadow:
        0 0 0 3px rgba(199,47,4,.08);

}


.rti-book-button {

    width: 100%;

    margin-top: 16px;

    padding: 13px;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--rti-orange),
            #E34812
        );

    color: white;

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;

}


/* =====================================================
   INPUT FOOTER
===================================================== */

.rti-chat-footer {

    display: flex;

    gap: 8px;

    padding:
        11px 12px;

    background: white;

    border-top:
        1px solid #EAECF0;

}


.rti-chat-footer input {

    flex: 1;

    min-width: 0;

    border:
        1px solid #D0D5DD;

    border-radius: 12px;

    padding:
        11px 13px;

    outline: none;

    font-size: 12px;

}


.rti-chat-footer input:focus {

    border-color:
        var(--rti-orange);

}


.rti-chat-footer button {

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 12px;

    background:
        var(--rti-orange);

    color: white;

    cursor: pointer;

    font-size: 17px;

}


.rti-footer-note {

    text-align: center;

    padding:
        7px;

    font-size: 9px;

    color:
        #98A2B3;

    background: white;

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px) {

    .rti-wa-tab {

        top: auto;
        bottom: 20px;

        width: 58px;
        height: 58px;

        border-radius: 0 16px 16px 0;

        flex-direction: row;

    }

    .rti-wa-tab-text {

        display: none;

    }

    .rti-chat {

        left: 8px;
        right: 8px;

        bottom: 8px;

        width: auto;

        max-width: none;

        height:
            calc(100vh - 16px);

        max-height: none;

        border-radius: 20px;

    }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.rti-wa-tab:focus-visible,
.rti-close:focus-visible,
.rti-quick-actions button:focus-visible,
.rti-book-button:focus-visible,
.rti-chat-footer button:focus-visible {

    outline:
        3px solid
        rgba(10,86,168,.35);

    outline-offset: 2px;

}

</style>



<script>

(function(){

    "use strict";


    /* ================================================
       CONFIGURATION
    ================================================ */

    const WHATSAPP_NUMBER =
        "27683448359";

    /*
       Replace this with your actual WordPress REST API
       endpoint once the backend is installed.

       Example:

       const API_ENDPOINT =
          "/wp-json/rti-assistant/v1/chat";
    */

    const API_ENDPOINT =
        "/wp-json/rti-assistant/v1/chat";


    /* ================================================
       ELEMENTS
    ================================================ */

    const chat =
        document.getElementById("rtiChat");

    const openButton =
        document.getElementById("rtiOpenChat");

    const closeButton =
        document.getElementById("rtiClose");

    const messages =
        document.getElementById("rtiMessages");

    const input =
        document.getElementById("rtiInput");

    const send =
        document.getElementById("rtiSend");

    const appointment =
        document.getElementById("rtiAppointment");

    const book =
        document.getElementById("rtiBook");


    /* ================================================
       OPEN / CLOSE
    ================================================ */

    openButton.addEventListener("click", function(){

        chat.classList.add("rti-open");

        chat.setAttribute(
            "aria-hidden",
            "false"
        );

        setTimeout(function(){

            input.focus();

        },100);

    });


    closeButton.addEventListener("click", function(){

        chat.classList.remove("rti-open");

        chat.setAttribute(
            "aria-hidden",
            "true"
        );

    });


    /* ================================================
       ADD MESSAGE
    ================================================ */

    function addMessage(
        text,
        sender = "bot"
    ){

        const wrapper =
            document.createElement("div");

        wrapper.className =
            "rti-message " +
            (
                sender === "user"
                ? "rti-user"
                : "rti-bot"
            );

        if(sender === "bot"){

            wrapper.innerHTML = `

                <div class="rti-avatar">
                    RTI
                </div>

                <div class="rti-bubble">

                    ${text}

                    <span class="rti-time">
                        Now
                    </span>

                </div>

            `;

        } else {

            wrapper.innerHTML = `

                <div class="rti-bubble"
                     style="
                       margin-left:auto;
                       background:#C72F04;
                       color:white;
                       border-radius:16px 4px 16px 16px;
                     ">

                    ${escapeHTML(text)}

                </div>

            `;

        }

        messages.appendChild(wrapper);

        messages.scrollTop =
            messages.scrollHeight;

    }


    /* ================================================
       SAFE TEXT
    ================================================ */

    function escapeHTML(text){

        const div =
            document.createElement("div");

        div.textContent = text;

        return div.innerHTML;

    }


    /* ================================================
       QUICK ACTIONS
    ================================================ */

    document.querySelectorAll(
        ".rti-quick-actions button"
    ).forEach(function(button){

        button.addEventListener(
            "click",
            function(){

                const action =
                    this.dataset.action;

                handleAction(action);

            }
        );

    });


    function handleAction(action){

        switch(action){

            case "courses":

                addMessage(
                    "Show me your available training courses.",
                    "user"
                );

                askAssistant(
                    "Show me the most relevant training courses available from Regewall Training Institute."
                );

                break;


            case "calendar":

                addMessage(
                    "What training dates are available?",
                    "user"
                );

                askAssistant(
                    "Show me the current RTI training calendar and upcoming courses."
                );

                break;


            case "appointment":

                appointment.classList.add(
                    "active"
                );

                appointment.scrollIntoView({
                    behavior:"smooth",
                    block:"nearest"
                });

                break;


            case "online":

                addMessage(
                    "Do you offer online training?",
                    "user"
                );

                askAssistant(
                    "Explain RTI's online training options."
                );

                break;


            case "corporate":

                addMessage(
                    "I need corporate or in-house training.",
                    "user"
                );

                askAssistant(
                    "Explain RTI's customised corporate and in-house training options."
                );

                break;


            case "registration":

                window.location.href =
                    "https://regewallinstitute.co.za/apply-online/";

                break;


            case "visa":

                addMessage(
                    "Can RTI assist with a training visa?",
                    "user"
                );

                askAssistant(
                    "Explain RTI's visa assistance and Letter of Invitation process."
                );

                break;


            case "whatsapp":

                openWhatsApp(
                    "Hello Regewall Training Institute. I would like assistance with your training programmes."
                );

                break;

        }

    }


    /* ================================================
       CHAT REQUEST
    ================================================ */

    async function askAssistant(question){

        showTyping();

        try {

            /*
             * REAL BACKEND CONNECTION
             *
             * Your WordPress PHP plugin should create:
             *
             * /wp-json/rti-assistant/v1/chat
             *
             * and return:
             *
             * {
             *   "answer": "..."
             * }
             */

            const response =
                await fetch(
                    API_ENDPOINT,
                    {

                        method:"POST",

                        headers:{
                            "Content-Type":
                                "application/json"
                        },

                        body:JSON.stringify({
                            question:question,
                            page:
                                window.location.href
                        })

                    }
                );


            if(!response.ok){

                throw new Error(
                    "API unavailable"
                );

            }


            const data =
                await response.json();

            removeTyping();

            addMessage(
                data.answer ||
                "Please contact our RTI team on WhatsApp for assistance."
            );


        } catch(error){

            removeTyping();

            addMessage(`

                I can help you with RTI training,
                registration and consultations.

                <br><br>

                For immediate assistance,
                <strong>WhatsApp our team directly.</strong>

            `);

        }

    }


    /* ================================================
       TYPING INDICATOR
    ================================================ */

    function showTyping(){

        const typing =
            document.createElement("div");

        typing.id =
            "rtiTyping";

        typing.className =
            "rti-message rti-bot";

        typing.innerHTML = `

            <div class="rti-avatar">
                RTI
            </div>

            <div class="rti-bubble">
                <span>●</span>
                <span>●</span>
                <span>●</span>
            </div>

        `;

        messages.appendChild(typing);

        messages.scrollTop =
            messages.scrollHeight;

    }


    function removeTyping(){

        const typing =
            document.getElementById(
                "rtiTyping"
            );

        if(typing){

            typing.remove();

        }

    }


    /* ================================================
       SEND MESSAGE
    ================================================ */

    function sendMessage(){

        const question =
            input.value.trim();

        if(!question){

            return;

        }

        addMessage(
            question,
            "user"
        );

        input.value = "";

        askAssistant(question);

    }


    send.addEventListener(
        "click",
        sendMessage
    );


    input.addEventListener(
        "keydown",
        function(event){

            if(event.key === "Enter"){

                event.preventDefault();

                sendMessage();

            }

        }
    );


    /* ================================================
       APPOINTMENT
    ================================================ */

    book.addEventListener(
        "click",
        function(){

            const name =
                document.getElementById(
                    "rtiName"
                ).value.trim();

            const email =
                document.getElementById(
                    "rtiEmail"
                ).value.trim();

            const phone =
                document.getElementById(
                    "rtiPhone"
                ).value.trim();

            const purpose =
                document.getElementById(
                    "rtiPurpose"
                ).value;

            const date =
                document.getElementById(
                    "rtiDate"
                ).value;

            const time =
                document.getElementById(
                    "rtiTime"
                ).value;


            if(
                !name ||
                !email ||
                !phone ||
                !date
            ){

                alert(
                    "Please complete your name, email, WhatsApp/mobile number and preferred date."
                );

                return;

            }


            const message =

                "Hello Regewall Training Institute.%0A%0A" +

                "I would like to book a consultation.%0A%0A" +

                "Name: " +
                encodeURIComponent(name) +

                "%0AEmail: " +
                encodeURIComponent(email) +

                "%0AWhatsApp/Mobile: " +
                encodeURIComponent(phone) +

                "%0ARequest: " +
                encodeURIComponent(purpose) +

                "%0APreferred Date: " +
                encodeURIComponent(date) +

                "%0APreferred Time: " +
                encodeURIComponent(time);


            /*
             * Sends the appointment request
             * to WhatsApp.
             *
             * For a true appointment system,
             * replace this with your WordPress
             * REST API appointment endpoint.
             */

            window.open(
                "https://wa.me/" +
                WHATSAPP_NUMBER +
                "?text=" +
                message,
                "_blank"
            );


        }
    );


    /* ================================================
       WHATSAPP
    ================================================ */

    function openWhatsApp(message){

        window.open(

            "https://wa.me/" +
            WHATSAPP_NUMBER +
            "?text=" +
            encodeURIComponent(message),

            "_blank"

        );

    }


})();

</script>
```