Neu WhatsApp chat - Kostenlos an die Community

  • Wichtiger Hinweis Liebe Kunden, solltet Ihr den DATEV Rechnungsdatenservice 2.0 nutzen, dann müsst Ihr bis zum 30.06.2024 JTL-Wawi 1.9 installieren. Danach wird die Schnittstelle für ältere Versionen nicht mehr unterstützt.

musaza

Aktives Mitglied
13. Januar 2018
59
11
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>
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: garifulin
Ähnliche Themen

Ähnliche Themen