Nuestra Institución

  
    <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asistente Virtual Estudiantil</title>

<style>

:root{
    --color1:#0b3d91;
    --color2:#f5b700;
    --color3:#ffffff;
    --sombra:0 10px 30px rgba(0,0,0,.25);
}

body{
    font-family:Arial, Helvetica, sans-serif;
}

/* BOTÓN FLOTANTE */

.chat-button{
    position:fixed;
    bottom:20px;
    right:20px;
    width:70px;
    height:70px;
    border-radius:50%;
    background:var(--color1);
    color:white;
    border:none;
    font-size:32px;
    cursor:pointer;
    box-shadow:var(--sombra);
    z-index:9999;
}

/* VENTANA CHAT */

.chat-container{
    position:fixed;
    bottom:100px;
    right:20px;
    width:380px;
    max-width:95%;
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--sombra);
    display:none;
    z-index:9999;
}

/* ENCABEZADO */

.chat-header{
    background:linear-gradient(135deg,var(--color1),#1457c7);
    color:white;
    text-align:center;
    padding:15px;
}

.chat-header h2{
    margin:0;
    font-size:20px;
}

.chat-header p{
    margin-top:5px;
    font-size:13px;
}

/* CARRUSEL */

.slider{
    position:relative;
    height:220px;
    overflow:hidden;
}

.slide{
    display:none;
    width:100%;
    height:220px;
}

.slide img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.active{
    display:block;
}

/* CHAT */

.chat-box{
    padding:15px;
}

.chat-box iframe{
    width:100%;
    height:350px;
    border:none;
    border-radius:10px;
}

/* PIE */

.chat-footer{
    text-align:center;
    padding:10px;
    background:#f4f4f4;
    font-size:12px;
    color:#555;
}

/* RESPONSIVE */

@media(max-width:768px){

.chat-container{
    width:95%;
    right:2.5%;
}

}

</style>
</head>
<body>

<button class="chat-button" onclick="toggleChat()">💬</button>

<div class="chat-container" id="chatWindow">

    <div class="chat-header">
        <h2>Asistente Virtual</h2>
        <p>Institución Educativa Técnica Comercial de Jenesano</p>
    </div>

    <!-- CARRUSEL -->

    <div class="slider">

        <div class="slide active">
            <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f" alt="">
        </div>

        <div class="slide">
            <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7" alt="">
        </div>

        <div class="slide">
            <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b" alt="">
        </div>

    </div>

    <!-- CHATBOT -->

    <div class="chat-box">

        <!-- Reemplazar por el iframe de tu chatbot -->

        <iframe
        src="https://www.chatbase.co/chatbot-iframe/TU_CHATBOT_ID">
        </iframe>

    </div>

    <div class="chat-footer">
        Pregunta sobre horarios, matrícula, manual de convivencia,
        proyectos, docentes y servicios institucionales.
    </div>

</div>

<script>

function toggleChat(){
    let chat=document.getElementById("chatWindow");

    if(chat.style.display==="block"){
        chat.style.display="none";
    }else{
        chat.style.display="block";
    }
}

/* Carrusel automático */

let slideIndex=0;

function mostrarSlides(){

    let slides=document.getElementsByClassName("slide");

    for(let i=0;i<slides.length;i++){
        slides[i].classList.remove("active");
    }

    slideIndex++;

    if(slideIndex>slides.length){
        slideIndex=1;
    }

    slides[slideIndex-1].classList.add("active");

    setTimeout(mostrarSlides,4000);
}

mostrarSlides();

</script>

</body>
</html>
  
Elaborado con cuidado para elevar lo que más importa.
Trabaja con nosotros
Síguenos en redes

Solicitar información

ENLACES RÁPIDOS

TRASPARENCIA

CONTACTANOS

SÍGUENOS
