Neu WhatsApp chat - Kostenlos an die Community

[musaza]

Hab da was programmiert. wem es gefällt soll sie weiter nutzen. wer Verbesserungen teilen mag, gerne hier euren Beitrag leisten.
VG Zafer

# nun zum Code; Und vorab gesagt, ist auf die Schnelle gemacht und sieht vielleicht nicht hübsch aus...
# Baut den nur ein, wenn ihr wisst, was ihr macht.
# In irgendein child einpflanzen... ich habe es im footer.tpl
# 491720123456789 im Script gegen eigene Nummer tauschen.. Landesvorwahl ohne 00 oder +
# Max Mustermann vielleicht auch ändern
# fertisch


<!-- WhatsApp Chat-Button -->
<a href="#whatsappChatModal" class="whatsapp-button btn" data-toggle="modal">
<i class="fab fa-whatsapp"></i>
</a>

<!-- Chat-Modal -->
<div id="whatsappChatModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal-Inhalt -->
<div class="modal-content">
<div class="modal-header" style="position: absolute;top: 0;left: 0;right: 0;background-color:#202c33;padding:15px">
<button type="button" class="close" data-dismiss="modal" style="margin:15px">&times;</button>
<h4 class="modal-title" style="color:#8696a0">WhatsApp</h4>
</div>
<div class="modal-body" style="margin-bottom:100px;margin-top:75px">
<span style="display:inline-block;background-color: #202c33; color: #e9edef; padding:10px;border-radius:5px">Hallo, mein Name ist Max Mustermann. Wie darf ich Ihnen helfen?</span>
</div>
<div class="modal-footer" style="background-color: #202c33; border:0; display: flex; align-items: center;">
<span style="color:#8696a0"> <svg viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" class="x23j0i4 xd7y6wv" version="1.1" x="0px" y="0px" enable-background="new 0 0 24 24"><title>smiley</title><path fill="currentColor" d="M9.153,11.603c0.795,0,1.439-0.879,1.439-1.962S9.948,7.679,9.153,7.679 S7.714,8.558,7.714,9.641S8.358,11.603,9.153,11.603z M5.949,12.965c-0.026-0.307-0.131,5.218,6.063,5.551 c6.066-0.25,6.066-5.551,6.066-5.551C12,14.381,5.949,12.965,5.949,12.965z M17.312,14.073c0,0-0.669,1.959-5.051,1.959 c-3.505,0-5.388-1.164-5.607-1.959C6.654,14.073,12.566,15.128,17.312,14.073z M11.804,1.011c-6.195,0-10.826,5.022-10.826,11.217 s4.826,10.761,11.021,10.761S23.02,18.423,23.02,12.228C23.021,6.033,17.999,1.011,11.804,1.011z M12,21.354 c-5.273,0-9.381-3.886-9.381-9.159s3.942-9.548,9.215-9.548s9.548,4.275,9.548,9.548C21.381,17.467,17.273,21.354,12,21.354z M15.108,11.603c0.795,0,1.439-0.879,1.439-1.962s-0.644-1.962-1.439-1.962s-1.439,0.879-1.439,1.962S14.313,11.603,15.108,11.603z"></path></svg> </span>

<input type="text" id="userInput" style="background-color: #2a3942; color: #e9edef; flex-grow: 1; margin-right: 10px; ; padding:10px;border-radius:5px;border:0" placeholder="Gib eine Nachricht ein.">
<button type="button" class="btn send-button" onclick="sendMessage()">
<svg viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 24 24">
<title>send</title>
<path fill="#7c8b95" d="M1.101,21.757L23.8,12.028L1.101,2.3l0.011,7.912l13.623,1.816L1.112,13.845 L1.101,21.757z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>

<script>
function sendMessage() {
var message = document.getElementById('userInput').value;
var whatsappUrl = "https://wa.me/491720123456789?text=" + encodeURIComponent(message);
window.open(whatsappUrl, '_blank');
}
</script>

<style>
.send-button {
background-color: transparent;/
border: none;
padding: 0;
color: #7c8b95;
}

.whatsapp-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
background-color: #25D366;
color: white;
border-radius: 50%;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none!important;
}

#whatsappChatModal .modal-content {
background-color: #0c1317;
}

.fa-whatsapp {
font-size: 24px; color: #FFF;
}

.modal-footer {
display: flex;
align-items: center;
padding: 8px;

position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #202c33;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

</style>