2

estoy intentando implementar este boton en mi web https://github.com/rafaelbotazini/floating-whatsapp

Hago todo correctamente, vinculo todos los archivos los .css y el script pero no me aparece el boton de whatsapp en la web, pienso que hay algo que le esta dando prioridad a mi hoja de estilos o algun position que esta influyendo. Estoy usando Html, Bootstrap, css y algo de JS

Este es mi head

<!--Floating WhatsApp css-->  
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="floating-wpp.css">
<script type="text/javascript" src="floating-wpp.js"></script> 
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">

Este es el body

<div id="myButton"></div>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="bootstrap/dist/js/bootrstap.min.js"></script>

El app.js

//Whatsapp Button   
$(function () {
    $('#myButton').floatingWhatsApp({
        phone: '5491133359850',
        popupMessage: 'Hello, how can we help you?',
        message: "I'd like to order a pizza",
        showPopup: true,
        showOnIE: false,
        headerTitle: 'Welcome!',
        headerColor: 'crimson',
        backgroundColor: 'crimson',
        position: 'left',
        buttonImage: '<img src="whatsapp.svg" />'
    });
});

Mi hoja de estilos

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@font-face {
    font-family: 'Burbank Big Cd Bd';
    src: url('font/BurbankBigCondensed-Bold.woff') format('woff2'),
        url('font/BurbankBigCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
body {
    font-family: 'Roboto', sans-serif;
    
}

#jumbo1{
    background: url(images/aspot-groot.png);
    background-repeat: no-repeat;
}

#jumbo2 {
    opacity: 0.9;
    border-radius: 10px;
}

#jumbo3 {
    background-image: url("images/bgjumbo.png");
    background-repeat: no-repeat;
    margin-bottom: -10px;
}

.navbar {
    font-family: 'Open Sans', sans-serif;
}

.myNavItems {
    font-size:1.4rem;
    z-index: 1;
}

.myNavItems:hover {    
    
    
}

h1, h2, h3, figure {
    font-family: 'Burbank Big Cd Bd';
}

#time {
    font-family: 'Burbank Big Cd Bd';
    font-size: 24px;
}



.imagenes {
    /* background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 0%, rgba(9,15,125,1) 74%, rgba(9,9,121,1) 100%); /Gradiente azul, celeste con blanco en el centro/
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(142,143,158,1) 0%, rgba(0,0,0,1) 100%, rgba(216,216,232,1) 100%);
    border-radius: 5px;
}

.cont1:hover {
    opacity: 0.5;
    
}

figure {
    font-size: 26px;
}

.mybtn {
    border-radius: 10px;
    font-size: 28px;
    
}

h3 {
    border-radius: 5px;
    padding: 5px;
}

#footer {
    font-family: 'Open Sans', sans-serif;
}

#footer2 {  
    font-family: 'Open Sans', sans-serif;
    background: #1f1f1f;
}


@media(max-width: 768px) {
    .navbar {
        background: #1f1f1f;
    
    }
} 

@media(max-width: 768px) {
    .nav-link:hover {
        border-bottom: none;
    
    }
}

Si necesitan que publiquen algun otro dato no hay problema, no estoy incluyendo todo el html completo de ser necesario edito el post y lo agrego.

Muchas gracias

EDIT1: Esto me arroja la consola

2bootrstap.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-3.3.1.min.js:2 jQuery.Deferred exception: $(...).floatingWhatsApp is not a function TypeError: $(...).floatingWhatsApp is not a function
    at HTMLDocument.<anonymous> (http://127.0.0.1:5501/app.js:22:20)
    at l (http://127.0.0.1:5501/jquery-3.3.1.min.js:2:29375)
    at c (http://127.0.0.1:5501/jquery-3.3.1.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).floatingWhatsApp is not a function
    at HTMLDocument.<anonymous> (app.js:22)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)
2
  • La consola arroja algún error? Si es así comparte también esa información
    – nashvent
    el 11 sep. 2020 a las 2:11
  • Edite el post con lo que arroja la consola
    – Roque
    el 11 sep. 2020 a las 3:03

1 respuesta 1

1

Hay un par de problemas que pueden resultar el error por el cuál no te funciona el plugin:

  • bootrstap.min.js está fallando al cargar, verificá que tengas bien la ruta o el nombre del archivo
  • En el <head> estás colocando la extensión de whatsapp antes de que cargue jQuery, para que funcione correctamente debería cargar primero jQuery y por debajo floating-wpp.js.
2
  • Perfecto, con eso se soluciono el primer error de la consola, ahora solamente me aparece esto Uncaught ReferenceError: $ is not defined at app.js:21 En esa linea arranca la funcion del boton
    – Roque
    el 11 sep. 2020 a las 15:19
  • Muchisimas gracias! Ya esta solucionado, estaba mal la linea de la carga del archivo de bootstrap y el jQuery mal ubicado
    – Roque
    el 11 sep. 2020 a las 15:34

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.