Integrar Whatsapp en tu sitio web usando HTML, JavaScript y CSS

Hola amigos, en esta ocasión me gustaría compartir un fragmento de código para Integrar Whatsapp en tu sitio web usando HTML, JavaScript y CSS , este widget es perfecto si tu blog o sitio web tiene como propósito vender productos y/o servicios.

A continuación comparto el pequeño fragmento de código HTML, JavaScript y CSS. Lo he colocado en un solo archivo para facilitar su uso. Lo copia y pega el contenido de dicho archivo en el footer de tu sitio web y obtendrás el Widget, para que tus clientes puedan enviarte mensajes de texto desde tu sitio web a tu numero de teléfono de Whatsapp. No me enrollo mas y veamos el fragmento de código:

<div id='whatsapp-chat' class='hide'>
	<div class='header-chat'>
	<div class='head-home'><h3>Sistemas web</h3>
		<div class='info-avatar'><img src='https://sistemadecotizaciones.files.wordpress.com/2020/08/supportmale.png'/></div>
		
	</div>

	<div class='get-new'>
		<div id='get-label'>Soporte</div>
		<div id='get-nama'>Servicio al cliente</div>
		
	</div>
</div>

<div class='start-chat'>
<div class='first-msg'><span>¡Hola! ¿Qué puedo hacer por ti?</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='Escribe un mensaje' maxlength='120' row='1'></textarea>
<a href='#' onclick="enviar_mensaje();" id='send-it'>Enviar</a></div></div>
<div id='get-number'>50370707070</div><a class='close-chat' onclick="cerrar_chat();" href='#'>×</a>
</div>


<a class='blantershow-chat' onclick="mostrar_chat();" href='#' title='Show Chat'><svg width="20" viewBox="0 0 24 24"><defs/><path fill="#eceff1" d="M20.5 3.4A12.1 12.1 0 0012 0 12 12 0 001.7 17.8L0 24l6.3-1.7c2.8 1.5 5 1.4 5.8 1.5a12 12 0 008.4-20.3z"/><path fill="#4caf50" d="M12 21.8c-3.1 0-5.2-1.6-5.4-1.6l-3.7 1 1-3.7-.3-.4A9.9 9.9 0 012.1 12a10 10 0 0117-7 9.9 9.9 0 01-7 16.9z"/><path fill="#fafafa" d="M17.5 14.3c-.3 0-1.8-.8-2-.9-.7-.2-.5 0-1.7 1.3-.1.2-.3.2-.6.1s-1.3-.5-2.4-1.5a9 9 0 01-1.7-2c-.3-.6.4-.6 1-1.7l-.1-.5-1-2.2c-.2-.6-.4-.5-.6-.5-.6 0-1 0-1.4.3-1.6 1.8-1.2 3.6.2 5.6 2.7 3.5 4.2 4.2 6.8 5 .7.3 1.4.3 1.9.2.6 0 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.3-.6-.4z"/></svg> 
Chatea con nosotros</a>

<style>
body {
    font-family: "Lato", sans-serif;
    background: #f1f1f1;
}
a:link,
a:visited {
    color: #444;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
}
h1 {
    font-size: 20px;
    text-align: center;
    display: block;
    background: linear-gradient(to right top, #6f96f3, #164ed2);
    padding: 20px;
    color: #fff;
    border-radius: 50px;
}


/* CSS Whatsapp Chat */
#whatsapp-chat {
    position: fixed;
    background: #fff;
    width: 350px;
    border-radius: 10px;
    box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
    bottom: 90px;
    right: 30px;
    overflow: hidden;
    z-index: 99;
    animation-name: showchat;
    animation-duration: 1s;
    transform: scale(1);
}

a.blantershow-chat {
    /*   background: #009688; */
    background: #fff;
    color: #404040;
    position: fixed;
    display: flex;
    font-weight: 400;
    justify-content: space-between;
    z-index: 98;
    bottom: 25px;
    right: 30px;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
}

a.blantershow-chat svg {
    transform: scale(1.2);
    margin: 0 10px 0 0;
}

.header-chat {
    background: #095e54;
    color: #fff;
    padding: 20px;
}
.header-chat h3 {
    margin: 0 0 10px;
}
.header-chat p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}
.info-avatar {
    position: relative;
}
.info-avatar img {
    border-radius: 100%;
    width: 50px;
    float: left;
    margin: 0 10px 0 0;
}
.info-avatar:before {
    content: "\f232";
    z-index: 1;
    font-family: "Font Awesome 5 Brands";
    background: #23ab23;
    color: #fff;
    padding: 4px 5px;
    border-radius: 100%;
    position: absolute;
    top: 30px;
    left: 30px;
}

.info-chat span {
    display: block;
}
#get-label,
span.chat-label {
    font-size: 12px;
    color: #888;
}
#get-nama,
span.chat-nama {
    margin: 5px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}
#get-label,
#get-nama {
    color: #fff;
}
span.my-number {
    display: none;
}
.blanter-msg {
    color: #444;
    padding: 20px;
    font-size: 12.5px;
    text-align: center;
    border-top: 1px solid #ddd;
}
textarea#chat-input {
    border: none;
    font-family: "Arial", sans-serif;
    width: 100%;
    height: 20px;
    outline: none;
    resize: none;
}
a#send-it {
    color: #555;
    width: 40px;
    margin: -5px 0 0 5px;
    font-weight: 700;
    padding: 8px;
    background: #eee;
    border-radius: 10px;
}
.first-msg {
    background: #f5f5f5;
    padding: 30px;
    text-align: center;
}
.first-msg span {
    background: #e2e2e2;
    color: #333;
    font-size: 14.2px;
    line-height: 1.7;
    border-radius: 10px;
    padding: 15px 20px;
    display: inline-block;
}
.start-chat .blanter-msg {
    display: flex;
}
#get-number {
    display: none;
}
a.close-chat {
    position: absolute;
    top: 5px;
    right: 15px;
    color: #fff;
    font-size: 30px;
}
@keyframes showhide {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
}
@keyframes showchat {
    from {
        transform: scale(0);
        opacity: 0;
    }
}
@media screen and (max-width: 480px) {
    #whatsapp-chat {
        width: auto;
        left: 5%;
        right: 5%;
        font-size: 80%;
    }
}
.hide {
    display: none;
    animation-name: showhide;
    animation-duration: 1.5s;
    transform: scale(1);
    opacity: 1;
}
.show {
    display: block;
    animation-name: showhide;
    animation-duration: 1.5s;
    transform: scale(1);
    opacity: 1;
}


</style>

<script>

function enviar_mensaje(){
	var a = document.getElementById("chat-input");
    if ("" != a.value) {
        var b = document.getElementById("get-number").innerHTML,c = document.getElementById("chat-input").value, d = "https://web.whatsapp.com/send", e = b,  f = "&text=" + c;
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) var d = "whatsapp://send";  var g = d + "?phone=" + e + f;  window.open(g, "_blank");
    }
}

const whatsapp_chat =document.getElementById("whatsapp-chat");
   
   function cerrar_chat(){
		whatsapp_chat.classList.add("hide");
		whatsapp_chat.classList.remove("show");
	   
   }
   
   function mostrar_chat(){
	    whatsapp_chat.classList.add("show");
		whatsapp_chat.classList.remove("hide");
   }
    
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

<div class='head-home'><h3>Sistemas web</h3>

</div>

<div id='get-label'>Soporte</div>

<div id='get-nama'>Servicio al cliente</div>

</div>

<div class='first-msg'><span>¡Hola! ¿Qué puedo hacer por ti?</span></div>

<a href='#' onclick="enviar_mensaje();" id='send-it'>Enviar</a></div></div>

</div>

Chatea con nosotros</a>

<style>

body {

font-family: "Lato", sans-serif;

background: #f1f1f1;

}

a:link,

a:visited {

color: #444;

text-decoration: none;

transition: all 0.4s ease-in-out;

}

h1 {

font-size: 20px;

text-align: center;

display: block;

background: linear-gradient(to right top, #6f96f3, #164ed2);

padding: 20px;

color: #fff;

border-radius: 50px;

}

/* CSS Whatsapp Chat */

#whatsapp-chat {

position: fixed;

background: #fff;

width: 350px;

border-radius: 10px;

box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);

bottom: 90px;

right: 30px;

overflow: hidden;

z-index: 99;

animation-name: showchat;

animation-duration: 1s;

transform: scale(1);

}

a.blantershow-chat {

/* background: #009688; */

background: #fff;

color: #404040;

position: fixed;

display: flex;

font-weight: 400;

justify-content: space-between;

z-index: 98;

bottom: 25px;

right: 30px;

font-size: 15px;

padding: 10px 20px;

border-radius: 30px;

box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);

}

a.blantershow-chat svg {

transform: scale(1.2);

margin: 0 10px 0 0;

}

.header-chat {

background: #095e54;

color: #fff;

padding: 20px;

}

.header-chat h3 {

margin: 0 0 10px;

}

.header-chat p {

font-size: 14px;

line-height: 1.7;

margin: 0;

}

.info-avatar {

position: relative;

}

.info-avatar img {

border-radius: 100%;

width: 50px;

float: left;

margin: 0 10px 0 0;

}

.info-avatar:before {

content: "\f232";

z-index: 1;

font-family: "Font Awesome 5 Brands";

background: #23ab23;

color: #fff;

padding: 4px 5px;

border-radius: 100%;

position: absolute;

top: 30px;

left: 30px;

}

.info-chat span {

display: block;

}

#get-label,

span.chat-label {

font-size: 12px;

color: #888;

}

#get-nama,

span.chat-nama {

margin: 5px 0 0;

font-size: 15px;

font-weight: 700;

color: #222;

}

#get-label,

#get-nama {

color: #fff;

}

span.my-number {

display: none;

}

.blanter-msg {

color: #444;

padding: 20px;

font-size: 12.5px;

text-align: center;

border-top: 1px solid #ddd;

}

textarea#chat-input {

border: none;

font-family: "Arial", sans-serif;

width: 100%;

height: 20px;

outline: none;

resize: none;

}

a#send-it {

color: #555;

width: 40px;

margin: -5px 0 0 5px;

font-weight: 700;

padding: 8px;

background: #eee;

border-radius: 10px;

}

.first-msg {

background: #f5f5f5;

padding: 30px;

text-align: center;

}

.first-msg span {

background: #e2e2e2;

color: #333;

font-size: 14.2px;

line-height: 1.7;

border-radius: 10px;

padding: 15px 20px;

display: inline-block;

}

.start-chat .blanter-msg {

display: flex;

}

#get-number {

display: none;

}

a.close-chat {

position: absolute;

top: 5px;

right: 15px;

color: #fff;

font-size: 30px;

}

@keyframes showhide {

from {

transform: scale(0.5);

opacity: 0;

}

@keyframes showchat {

from {

transform: scale(0);

opacity: 0;

}

@media screen and (max-width: 480px) {

#whatsapp-chat {

width: auto;

left: 5%;

right: 5%;

font-size: 80%;

}

.hide {

display: none;

animation-name: showhide;

animation-duration: 1.5s;

transform: scale(1);

opacity: 1;

}

.show {

display: block;

animation-name: showhide;

animation-duration: 1.5s;

transform: scale(1);

opacity: 1;

}

</style>

function enviar_mensaje(){

var a = document.getElementById("chat-input");

if ("" != a.value) {

var b = document.getElementById("get-number").innerHTML,c = document.getElementById("chat-input").value, d = "https://web.whatsapp.com/send", e = b, f = "&text=" + c;

}

const whatsapp_chat =document.getElementById("whatsapp-chat");

function cerrar_chat(){

whatsapp_chat.classList.add("hide");

whatsapp_chat.classList.remove("show");

}

function mostrar_chat(){

whatsapp_chat.classList.add("show");

whatsapp_chat.classList.remove("hide");

}

</script>

Copia y pega el código anterior tal cual, en el footer de tu pagina web, lo única configuración que debes hacer es buscar el div que tenga la clase “get-number” y colocar tu numero de teléfono. Incluye el código de área de tu país y luego tu numero de teléfono, todo ello sin espacios.

<div id='get-number'>50370707070</div>

1	<div id='get-number'>50370707070</div>

Listo espero que este fragmento te sea de utilidad :D, no olvides que puedes seguirme en facebook: facebook.com/sistemasweb.la

Blog

Integrar Whatsapp en tu sitio web usando HTML, JavaScript y CSS

También te puede interesar:

Integración de APIs REST con Fetch API, PHP y MySQL

Autenticación de Usuarios con Google OAuth en PHP

Crea tu propio CMS-Builder similar a STRAPI con PHP-MySQL

Suscríbete a nuestro boletín de noticias

Sobre Mi

Productos

Enlaces importantes

Blog

También te puede interesar:

Integración de APIs REST con Fetch API, PHP y MySQL

Autenticación de Usuarios con Google OAuth en PHP

Crea tu propio CMS-Builder similar a STRAPI con PHP-MySQL

Sobre Mi

Productos

Enlaces importantes

Sistema para Gestión de Archivos con PHP