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)