COMO PONER UN CHATBOT INTERACTIVO EN TU BLOG!

 

 Holii, miercoles de tutoriales y hoy os traigo uno nuevo!

El tuto de hoy se para tener este chatbot interactivo (SIN IA) donde los visitantes de tu blog podrán saber donde y como encontrar/hacer algunas cosas, por ejemplo; si tienen sugerencias sobre que podrias hablar donde decirtelo... O simplemente para poder guiarse mejor...
Como siempre os voy a dejar el codigo + pasos.
RECORDAD: NO borrar mis codigos porfa:(

el codigo tendra otros colores, pero los mismos emojis y tamaño, podeis cambiar esas cosas al gusto<3

MOSTRAR CÓDIGO

<!-- =========================================
     ♡ CHAT INTERACTIVO ♡
     ========================================= -->

<div id="miChat">

  <div id="miChatTitulo">
    TU TÍTULO
  </div>

  <div id="miChatPantalla">
  </div>

  <div id="miChatOpciones">
  </div>

</div>


<style>

/* =========================================
   ♡ CONTENEDOR PRINCIPAL
   ========================================= */

#miChat {

  display: block;

  width: 290px;
  max-width: calc(100% - 20px);

  margin: 20px auto;
  padding: 15px;

  box-sizing: border-box;

  background-color: #TU_COLOR_FONDO;

  border: 3px dashed #TU_COLOR_BORDE;

  border-radius: 24px;

  box-shadow:
    0 6px 15px rgba(0,0,0,0.15);

  font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

  text-align: left;

  overflow: hidden;

}


/* =========================================
   ♡ TÍTULO
   ========================================= */

#miChat #miChatTitulo {

  display: block;

  width: 100%;

  margin: 0 0 12px 0;
  padding: 0;

  box-sizing: border-box;

  color: #TU_COLOR_TITULO;

  background: transparent;

  border: none;

  font-size: 13px;

  font-weight: bold;

  line-height: 1.4;

  text-align: center;

  letter-spacing: 0.8px;

}


/* =========================================
   ♡ PANTALLA DEL CHAT
   ========================================= */

#miChat #miChatPantalla {

  display: flex;

  width: 100%;

  height: 230px;

  min-height: 230px;
  max-height: 230px;

  box-sizing: border-box;

  margin: 0;
  padding: 10px;

  background-color: #TU_COLOR_PANTALLA;

  border: 2px solid #TU_COLOR_BORDE;

  border-radius: 14px;

  flex-direction: column;

  gap: 8px;

  overflow-x: hidden;
  overflow-y: auto;

}


/* =========================================
   ♡ ZONA DE OPCIONES
   ========================================= */

#miChat #miChatOpciones {

  display: flex;

  width: 100%;

  margin: 10px 0 0 0;
  padding: 0;

  box-sizing: border-box;

  flex-direction: column;

  gap: 6px;

}


/* =========================================
   ♡ BURBUJAS
   ========================================= */

#miChat .miBurbuja {

  display: block;

  box-sizing: border-box;

  width: fit-content;

  max-width: 85%;

  margin: 0;

  padding: 8px 12px;

  border-radius: 12px;

  font-size: 11px;

  line-height: 1.4;

  word-break: break-word;

  overflow-wrap: anywhere;

}


/* BURBUJA 1 */

#miChat .miBurbuja1 {

  align-self: flex-start;

  background-color: #TU_COLOR_BURBUJA_1;

  color: #TU_COLOR_TEXTO_1;

  border: 1px solid #TU_COLOR_BORDE;

  border-bottom-left-radius: 2px;

}


/* BURBUJA 2 */

#miChat .miBurbuja2 {

  align-self: flex-end;

  background-color: #TU_COLOR_BURBUJA_2;

  color: #TU_COLOR_TEXTO_2;

  border: 1px solid #TU_COLOR_BORDE;

  border-bottom-right-radius: 2px;

  font-weight: bold;

}


/* =========================================
   ♡ BOTONES
   ========================================= */

#miChat #miChatOpciones button {

  display: block;

  width: 100%;

  min-width: 0;

  min-height: 32px;

  margin: 0;

  padding: 7px 10px;

  box-sizing: border-box;

  background-color: #TU_COLOR_BOTON;

  color: #TU_COLOR_TEXTO_BOTON;

  border: 2px solid #TU_COLOR_BORDE;

  border-radius: 20px;

  font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

  font-size: 11px;

  font-weight: bold;

  line-height: 1.3;

  text-align: center;

  cursor: pointer;

  outline: none;

}


/* HOVER */

#miChat #miChatOpciones button:hover {

  background-color: #TU_COLOR_HOVER;

  color: #TU_COLOR_TEXTO_HOVER;

}


/* =========================================
   ♡ SCROLLBAR
   ========================================= */

#miChat #miChatPantalla::-webkit-scrollbar {

  width: 6px;

}

#miChat #miChatPantalla::-webkit-scrollbar-track {

  background: #TU_COLOR_SCROLL;

}

#miChat #miChatPantalla::-webkit-scrollbar-thumb {

  background: #TU_COLOR_SCROLL_BARRA;

  border-radius: 10px;

}

</style>


<script>

(function () {

  function iniciarChat() {

    var pantalla =
      document.getElementById("miChatPantalla");

    var opciones =
      document.getElementById("miChatOpciones");


    if (!pantalla || !opciones) {

      setTimeout(
        iniciarChat,
        100
      );

      return;

    }


    /* ========================================
       ♡ MOSTRAR MENSAJE
       ======================================== */

    function mostrarMensaje(texto, tipo) {

      var burbuja =
        document.createElement("div");

      burbuja.className =
        "miBurbuja " + tipo;

      burbuja.textContent =
        texto;

      pantalla.appendChild(burbuja);

      pantalla.scrollTop =
        pantalla.scrollHeight;

    }


    /* ========================================
       ♡ CREAR BOTÓN
       ======================================== */

    function crearBoton(texto, funcion) {

      var boton =
        document.createElement("button");

      boton.type =
        "button";

      boton.textContent =
        texto;

      boton.onclick =
        funcion;

      opciones.appendChild(boton);

    }


    /* ========================================
       ♡ OPCIONES
       ======================================== */

    function mostrarOpciones() {

      opciones.innerHTML = "";


      crearBoton(
        "TU OPCIÓN 1",
        function () {

          mostrarMensaje(
            "TU RESPUESTA 1",
            "miBurbuja2"
          );

        }
      );


      crearBoton(
        "TU OPCIÓN 2",
        function () {

          mostrarMensaje(
            "TU RESPUESTA 2",
            "miBurbuja2"
          );

        }
      );


      crearBoton(
        "TU OPCIÓN 3",
        function () {

          mostrarMensaje(
            "TU RESPUESTA 3",
            "miBurbuja2"
          );

        }
      );

    }


    /* ========================================
       ♡ MENSAJE INICIAL
       ======================================== */

    mostrarMensaje(
      "TU MENSAJE INICIAL",
      "miBurbuja1"
    );


    setTimeout(
      mostrarOpciones,
      600
    );

  }


  /* ========================================
     ♡ INICIAR
     ======================================== */

  if (
    document.readyState === "loading"
  ) {

    document.addEventListener(
      "DOMContentLoaded",
      iniciarChat
    );

  } else {

    iniciarChat();

  }

})();

</script>


<!-- =========================================
     ♡ MARCA DE AGUA ♡
     ========================================= -->

<div style="text-align:center; font-family:Arial, sans-serif; font-size:12px; line-height:1.2;">

  <a href="https://dulcemundodelala.blogspot.com/" target="_blank" style="text-decoration:none;">

    <span style="color:#8b6aaa; font-weight:bold;">
      by @traumaticlalaloopsy
    </span>

    <br />

    <span style="color:#a98fbd;">
      ~ click ~
    </span>

  </a>

</div>

MOSTRAR PASOS

♡ PASO 1:
Copia todo el código que aparece en la caja de MOSTRAR CÓDIGO.

♡ PASO 2:
Ve a la entrada o página de Blogger donde quieras colocar tu chat.

♡ PASO 3:
Abre la vista de HTML y pega el código en el lugar donde quieras que aparezca.

♡ PASO 4:
Personaliza el título y los textos del chat cambiando los apartados que aparecen como TU TÍTULO, TU OPCIÓN y TU MENSAJE.

♡ PASO 5:
Personaliza los colores sustituyendo los valores que aparecen como #TU_COLOR... por los colores que quieras utilizar.

♡ PASO 6:
Puedes modificar, añadir o eliminar botones y respuestas para crear tu propio chat interactivo.

♡ PASO 7:
Si quieres cambiar la marca de agua, modifica el texto y el enlace que aparecen al final del código.

♡ PASO 8:
Guarda los cambios y prueba el chat para comprobar que todo funciona correctamente. :3