fbpx

Chèn nút chat Zalo lên website bằng code đơn giản

Như các bạn đã biết, hiện nay Zalo đã trở thành một trong những kênh liên hệ khá quen thuộc với bất kỳ ai, không những vậy nhiều doanh nghiệp chọn Zalo làm kênh chat hỗ trợ trực tuyến trên website. Để chèn nút chat Zalo lên website có nhiều cách được chia sẻ trên mạng, đó có thể là chèn bằng code, bằng cách cài plugin, chèn nút chat qua Zalo cá nhân, chèn nút chat sang Zalo OA,…

chèn zalo OA
Chèn nút chat Zalo lên website đơn giản và cực đẹp

Tham khảo thêm: Thêm video vào gallery sản phẩm Woocommerce

Hướng dẫn chèn nút chat Zalo lên website tuyệt đẹp

Việc Chèn nút chat Zalo lên website sẽ giúp cho khách hàng dễ dàng tương tác và việc tiếp cận các sản phẩm, dịch vụ của bạn sẽ trở nên dễ dàng hơn nhiều. Việc nút chat Zalo với tài khoản Official Account (Zalo OA) lên website thì đã Zalo đã có hỗ trợ, tuy nhiên việc cài đặt thông qua cấu hình của Zalo OA bằng SDK nhiều người không rành.

Chưa kể hiện nay đa số người kinh doanh tại Việt Nam vẫn chưa quen dùng Zalo OA, nhiều đơn vị/ cá nhân vẫn đang dùng Zalo cá nhân để tương tác với khách hàng, vì thế trong bài viết này mình sẽ hướng dẫn cách thêm nút chat Zalo cá nhân và Zalo OA vào website cực đẹp bằng code đơn giản mà ai cũng có thể làm được.

Chèn nút chat Zalo lên website bằng số điện thoại cá nhân

Tại bảng điều khiển Admin, bạn vào menu Giao diện => Chọn Theme File Editor => Chọn functions.php

gia san pham bien the 5

Các bạn chỉ việc thêm đoạn code sau đây vào cuối file functions.php của child theme mà bạn đang sử dụng là được.


//chèn code zalo vào website
add_action("wp_footer","add_zalo_personal");
function add_zalo_personal(){
		//thay số zalo của bạn tại đây
		$zalo_chat_phone = "0949339222";
		?>
        <a href="https://chat.zalo.me/?phone=<?php echo $zalo_chat_phone; ?>" id="linkzalo" target="_blank" rel="noopener noreferrer"><div id="fcta-zalo-tracking" class="fcta-zalo-mess">
<span id="fcta-zalo-tracking">Zalo</span></div><div class="fcta-zalo-vi-tri-nut"><div id="fcta-zalo-tracking" class="fcta-zalo-nen-nut"><div id="fcta-zalo-tracking" class="fcta-zalo-ben-trong-nut"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460.1 436.6"><path fill="currentColor" class="st0" d="M82.6 380.9c-1.8-.8-3.1-1.7-1-3.5 1.3-1 2.7-1.9 4.1-2.8 13.1-8.5 25.4-17.8 33.5-31.5 6.8-11.4 5.7-18.1-2.8-26.5C69 269.2 48.2 212.5 58.6 145.5 64.5 107.7 81.8 75 107 46.6c15.2-17.2 33.3-31.1 53.1-42.7 1.2-.7 2.9-.9 3.1-2.7-.4-1-1.1-.7-1.7-.7-33.7 0-67.4-.7-101 .2C28.3 1.7.5 26.6.6 62.3c.2 104.3 0 208.6 0 313 0 32.4 24.7 59.5 57 60.7 27.3 1.1 54.6.2 82 .1 2 .1 4 .2 6 .2H290c36 0 72 .2 108 0 33.4 0 60.5-27 60.5-60.3v-.6-58.5c0-1.4.5-2.9-.4-4.4-1.8.1-2.5 1.6-3.5 2.6-19.4 19.5-42.3 35.2-67.4 46.3-61.5 27.1-124.1 29-187.6 7.2-5.5-2-11.5-2.2-17.2-.8-8.4 2.1-16.7 4.6-25 7.1-24.4 7.6-49.3 11-74.8 6zm72.5-168.5c1.7-2.2 2.6-3.5 3.6-4.8 13.1-16.6 26.2-33.2 39.3-49.9 3.8-4.8 7.6-9.7 10-15.5 2.8-6.6-.2-12.8-7-15.2-3-.9-6.2-1.3-9.4-1.1-17.8-.1-35.7-.1-53.5 0-2.5 0-5 .3-7.4.9-5.6 1.4-9 7.1-7.6 12.8 1 3.8 4 6.8 7.8 7.7 2.4.6 4.9.9 7.4.8 10.8.1 21.7 0 32.5.1 1.2 0 2.7-.8 3.6 1-.9 1.2-1.8 2.4-2.7 3.5-15.5 19.6-30.9 39.3-46.4 58.9-3.8 4.9-5.8 10.3-3 16.3s8.5 7.1 14.3 7.5c4.6.3 9.3.1 14 .1 16.2 0 32.3.1 48.5-.1 8.6-.1 13.2-5.3 12.3-13.3-.7-6.3-5-9.6-13-9.7-14.1-.1-28.2 0-43.3 0zm116-52.6c-12.5-10.9-26.3-11.6-39.8-3.6-16.4 9.6-22.4 25.3-20.4 43.5 1.9 17 9.3 30.9 27.1 36.6 11.1 3.6 21.4 2.3 30.5-5.1 2.4-1.9 3.1-1.5 4.8.6 3.3 4.2 9 5.8 14 3.9 5-1.5 8.3-6.1 8.3-11.3.1-20 .2-40 0-60-.1-8-7.6-13.1-15.4-11.5-4.3.9-6.7 3.8-9.1 6.9zm69.3 37.1c-.4 25 20.3 43.9 46.3 41.3 23.9-2.4 39.4-20.3 38.6-45.6-.8-25-19.4-42.1-44.9-41.3-23.9.7-40.8 19.9-40 45.6zm-8.8-19.9c0-15.7.1-31.3 0-47 0-8-5.1-13-12.7-12.9-7.4.1-12.3 5.1-12.4 12.8-.1 4.7 0 9.3 0 14v79.5c0 6.2 3.8 11.6 8.8 12.9 6.9 1.9 14-2.2 15.8-9.1.3-1.2.5-2.4.4-3.7.2-15.5.1-31 .1-46.5z"></path></svg></div><div id="fcta-zalo-tracking" class="fcta-zalo-text">Chat ngay</div></div></div></a>
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%40keyframes%20zoom%7B0%25%7Btransform%3Ascale(.5)%3Bopacity%3A0%7D50%25%7Bopacity%3A1%7Dto%7Bopacity%3A0%3Btransform%3Ascale(1)%7D%7D%40keyframes%20lucidgenzalo%7B0%25%20to%7Btransform%3Arotate(-25deg)%7D50%25%7Btransform%3Arotate(25deg)%7D%7D.jscroll-to-top%7Bbottom%3A100px%7D.fcta-zalo-ben-trong-nut%20svg%20path%7Bfill%3A%23fff%7D.fcta-zalo-vi-tri-nut%7Bposition%3Afixed%3Bbottom%3A24px%3Bright%3A20px%3Bz-index%3A999%7D.fcta-zalo-nen-nut%2Cdiv.fcta-zalo-mess%7Bbox-shadow%3A0%201px%206px%20rgba(0%2C0%2C0%2C.06)%2C0%202px%2032px%20rgba(0%2C0%2C0%2C.16)%7D.fcta-zalo-nen-nut%7Bwidth%3A50px%3Bheight%3A50px%3Btext-align%3Acenter%3Bcolor%3A%23fff%3Bbackground%3A%230068ff%3Bborder-radius%3A50%25%3Bposition%3Arelative%7D.fcta-zalo-nen-nut%3A%3Aafter%2C.fcta-zalo-nen-nut%3A%3Abefore%7Bcontent%3A%22%22%3Bposition%3Aabsolute%3Bborder%3A1px%20solid%20%230068ff%3Bbackground%3A%230068ff80%3Bz-index%3A-1%3Bleft%3A-20px%3Bright%3A-20px%3Btop%3A-20px%3Bbottom%3A-20px%3Bborder-radius%3A50%25%3Banimation%3Azoom%201.9s%20linear%20infinite%7D.fcta-zalo-nen-nut%3A%3Aafter%7Banimation-delay%3A.4s%7D.fcta-zalo-ben-trong-nut%2C.fcta-zalo-ben-trong-nut%20i%7Btransition%3Aall%201s%7D.fcta-zalo-ben-trong-nut%7Bposition%3Aabsolute%3Btext-align%3Acenter%3Bwidth%3A60%25%3Bheight%3A60%25%3Bleft%3A10px%3Bbottom%3A25px%3Bline-height%3A70px%3Bfont-size%3A25px%3Bopacity%3A1%7D.fcta-zalo-ben-trong-nut%20i%7Banimation%3Alucidgenzalo%201s%20linear%20infinite%7D.fcta-zalo-nen-nut%3Ahover%20.fcta-zalo-ben-trong-nut%2C.fcta-zalo-text%7Bopacity%3A0%7D.fcta-zalo-nen-nut%3Ahover%20i%7Btransform%3Ascale(.5)%3Btransition%3Aall%20.5s%20ease-in%7D.fcta-zalo-text%20a%7Btext-decoration%3Anone%3Bcolor%3A%23fff%7D.fcta-zalo-text%7Bposition%3Aabsolute%3Btop%3A6px%3Btext-transform%3Auppercase%3Bfont-size%3A12px%3Bfont-weight%3A700%3Btransform%3AscaleX(-1)%3Btransition%3Aall%20.5s%3Bline-height%3A1.5%7D.fcta-zalo-nen-nut%3Ahover%20.fcta-zalo-text%7Btransform%3AscaleX(1)%3Bopacity%3A1%7Ddiv.fcta-zalo-mess%7Bposition%3Afixed%3Bbottom%3A29px%3Bright%3A58px%3Bz-index%3A99%3Bbackground%3A%23fff%3Bpadding%3A7px%2025px%207px%2015px%3Bcolor%3A%230068ff%3Bborder-radius%3A50px%200%200%2050px%3Bfont-weight%3A700%3Bfont-size%3A15px%7D.fcta-zalo-mess%20span%7Bcolor%3A%230068ff!important%7D%0Aspan%23fcta-zalo-tracking%7Bfont-family%3ARoboto%3Bline-height%3A1.5%7D.fcta-zalo-text%7Bfont-family%3ARoboto%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Aif(%20%2FAndroid%7CwebOS%7CiPhone%7CiPad%7CiPod%7CBlackBerry%7CIEMobile%7COpera%20Mini%2Fi.test(navigator.userAgent)%20)%0A%7Bdocument.getElementById(%22linkzalo%22).href%3D%22https%3A%2F%2Fzalo.me%2F%3C%3Fphp%20echo%20%24zalo_chat_phone%3B%20%3F%3E%22%3B%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
 
        <?php
	}

 

Chèn nút chat Zalo lên website bằng ID tài khoản Official Account

Để chèn nút chat Zalo lên website bạn cần lấy được ID tài khoản Official Account, ID sẽ có dạng như hình sau:

chèn zalo OA

Tại bảng điều khiển Admin, bạn vào menu Giao diện => Chọn Theme File Editor => Chọn functions.php

Tương tự cách chèn nút chat Zalo cá nhân ở trên, nhưng lần này bạn chèn đoạn code sau đây:


//Chèn code Zalo OA bằng số ID tài khoản Official Account
add_action("wp_footer","add_zalo_personal");
function add_zalo_personal(){
		//Thay số ID zalo OA của bạn tại đây
		$zalo_chat_oa = "3888912360968674567";
		?>
        <a href="https://zalo.me/<?php echo $zalo_chat_oa; ?>" id="linkzalo"  target="_blank" rel="noopener noreferrer"><div id="fcta-zalo-tracking" class="fcta-zalo-mess">
<span id="fcta-zalo-tracking">Zalo</span></div><div class="fcta-zalo-vi-tri-nut"><div id="fcta-zalo-tracking" class="fcta-zalo-nen-nut"><div id="fcta-zalo-tracking" class="fcta-zalo-ben-trong-nut"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460.1 436.6"><path fill="currentColor" class="st0" d="M82.6 380.9c-1.8-.8-3.1-1.7-1-3.5 1.3-1 2.7-1.9 4.1-2.8 13.1-8.5 25.4-17.8 33.5-31.5 6.8-11.4 5.7-18.1-2.8-26.5C69 269.2 48.2 212.5 58.6 145.5 64.5 107.7 81.8 75 107 46.6c15.2-17.2 33.3-31.1 53.1-42.7 1.2-.7 2.9-.9 3.1-2.7-.4-1-1.1-.7-1.7-.7-33.7 0-67.4-.7-101 .2C28.3 1.7.5 26.6.6 62.3c.2 104.3 0 208.6 0 313 0 32.4 24.7 59.5 57 60.7 27.3 1.1 54.6.2 82 .1 2 .1 4 .2 6 .2H290c36 0 72 .2 108 0 33.4 0 60.5-27 60.5-60.3v-.6-58.5c0-1.4.5-2.9-.4-4.4-1.8.1-2.5 1.6-3.5 2.6-19.4 19.5-42.3 35.2-67.4 46.3-61.5 27.1-124.1 29-187.6 7.2-5.5-2-11.5-2.2-17.2-.8-8.4 2.1-16.7 4.6-25 7.1-24.4 7.6-49.3 11-74.8 6zm72.5-168.5c1.7-2.2 2.6-3.5 3.6-4.8 13.1-16.6 26.2-33.2 39.3-49.9 3.8-4.8 7.6-9.7 10-15.5 2.8-6.6-.2-12.8-7-15.2-3-.9-6.2-1.3-9.4-1.1-17.8-.1-35.7-.1-53.5 0-2.5 0-5 .3-7.4.9-5.6 1.4-9 7.1-7.6 12.8 1 3.8 4 6.8 7.8 7.7 2.4.6 4.9.9 7.4.8 10.8.1 21.7 0 32.5.1 1.2 0 2.7-.8 3.6 1-.9 1.2-1.8 2.4-2.7 3.5-15.5 19.6-30.9 39.3-46.4 58.9-3.8 4.9-5.8 10.3-3 16.3s8.5 7.1 14.3 7.5c4.6.3 9.3.1 14 .1 16.2 0 32.3.1 48.5-.1 8.6-.1 13.2-5.3 12.3-13.3-.7-6.3-5-9.6-13-9.7-14.1-.1-28.2 0-43.3 0zm116-52.6c-12.5-10.9-26.3-11.6-39.8-3.6-16.4 9.6-22.4 25.3-20.4 43.5 1.9 17 9.3 30.9 27.1 36.6 11.1 3.6 21.4 2.3 30.5-5.1 2.4-1.9 3.1-1.5 4.8.6 3.3 4.2 9 5.8 14 3.9 5-1.5 8.3-6.1 8.3-11.3.1-20 .2-40 0-60-.1-8-7.6-13.1-15.4-11.5-4.3.9-6.7 3.8-9.1 6.9zm69.3 37.1c-.4 25 20.3 43.9 46.3 41.3 23.9-2.4 39.4-20.3 38.6-45.6-.8-25-19.4-42.1-44.9-41.3-23.9.7-40.8 19.9-40 45.6zm-8.8-19.9c0-15.7.1-31.3 0-47 0-8-5.1-13-12.7-12.9-7.4.1-12.3 5.1-12.4 12.8-.1 4.7 0 9.3 0 14v79.5c0 6.2 3.8 11.6 8.8 12.9 6.9 1.9 14-2.2 15.8-9.1.3-1.2.5-2.4.4-3.7.2-15.5.1-31 .1-46.5z"></path></svg></div><div id="fcta-zalo-tracking" class="fcta-zalo-text">Chat ngay</div></div></div></a>
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%40keyframes%20zoom%7B0%25%7Btransform%3Ascale(.5)%3Bopacity%3A0%7D50%25%7Bopacity%3A1%7Dto%7Bopacity%3A0%3Btransform%3Ascale(1)%7D%7D%40keyframes%20lucidgenzalo%7B0%25%20to%7Btransform%3Arotate(-25deg)%7D50%25%7Btransform%3Arotate(25deg)%7D%7D.jscroll-to-top%7Bbottom%3A100px%7D.fcta-zalo-ben-trong-nut%20svg%20path%7Bfill%3A%23fff%7D.fcta-zalo-vi-tri-nut%7Bposition%3Afixed%3Bbottom%3A35px%3Bright%3A20px%3Bz-index%3A999%7D.fcta-zalo-nen-nut%2Cdiv.fcta-zalo-mess%7Bbox-shadow%3A0%201px%206px%20rgba(0%2C0%2C0%2C.06)%2C0%202px%2032px%20rgba(0%2C0%2C0%2C.16)%7D.fcta-zalo-nen-nut%7Bwidth%3A50px%3Bheight%3A50px%3Btext-align%3Acenter%3Bcolor%3A%23fff%3Bbackground%3A%230068ff%3Bborder-radius%3A50%25%3Bposition%3Arelative%7D.fcta-zalo-nen-nut%3A%3Aafter%2C.fcta-zalo-nen-nut%3A%3Abefore%7Bcontent%3A%22%22%3Bposition%3Aabsolute%3Bborder%3A1px%20solid%20%230068ff%3Bbackground%3A%230068ff80%3Bz-index%3A-1%3Bleft%3A-20px%3Bright%3A-20px%3Btop%3A-20px%3Bbottom%3A-20px%3Bborder-radius%3A50%25%3Banimation%3Azoom%201.9s%20linear%20infinite%7D.fcta-zalo-nen-nut%3A%3Aafter%7Banimation-delay%3A.4s%7D.fcta-zalo-ben-trong-nut%2C.fcta-zalo-ben-trong-nut%20i%7Btransition%3Aall%201s%7D.fcta-zalo-ben-trong-nut%7Bposition%3Aabsolute%3Btext-align%3Acenter%3Bwidth%3A60%25%3Bheight%3A60%25%3Bleft%3A10px%3Bbottom%3A25px%3Bline-height%3A70px%3Bfont-size%3A25px%3Bopacity%3A1%7D.fcta-zalo-ben-trong-nut%20i%7Banimation%3Alucidgenzalo%201s%20linear%20infinite%7D.fcta-zalo-nen-nut%3Ahover%20.fcta-zalo-ben-trong-nut%2C.fcta-zalo-text%7Bopacity%3A0%7D.fcta-zalo-nen-nut%3Ahover%20i%7Btransform%3Ascale(.5)%3Btransition%3Aall%20.5s%20ease-in%7D.fcta-zalo-text%20a%7Btext-decoration%3Anone%3Bcolor%3A%23fff%7D.fcta-zalo-text%7Bposition%3Aabsolute%3Btop%3A6px%3Btext-transform%3Auppercase%3Bfont-size%3A12px%3Bfont-weight%3A700%3Btransform%3AscaleX(-1)%3Btransition%3Aall%20.5s%3Bline-height%3A1.5%7D.fcta-zalo-nen-nut%3Ahover%20.fcta-zalo-text%7Btransform%3AscaleX(1)%3Bopacity%3A1%7Ddiv.fcta-zalo-mess%7Bposition%3Afixed%3Bbottom%3A39px%3Bright%3A58px%3Bz-index%3A99%3Bbackground%3A%23fff%3Bpadding%3A7px%2025px%207px%2015px%3Bcolor%3A%230068ff%3Bborder-radius%3A50px%200%200%2050px%3Bfont-weight%3A700%3Bfont-size%3A15px%7D.fcta-zalo-mess%20span%7Bcolor%3A%230068ff!important%7D%0Aspan%23fcta-zalo-tracking%7Bfont-family%3ARoboto%3Bline-height%3A1.5%7D.fcta-zalo-text%7Bfont-family%3ARoboto%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Aif(%20%2FAndroid%7CwebOS%7CiPhone%7CiPad%7CiPod%7CBlackBerry%7CIEMobile%7COpera%20Mini%2Fi.test(navigator.userAgent)%20)%0A%7Bdocument.getElementById(%22linkzalo%22).href%3D%22https%3A%2F%2Fzalo.me%2F%3C%3Fphp%20echo%20%24zalo_chat_phone%3B%20%3F%3E%22%3B%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
 
        <?php
	}

Như vậy chỉ với cách đơn giản trên, bạn đã có thể tự chèn nút chat Zalo cá nhân hoặc Zalo OA vào website bằng code một cách đơn giản rồi phải không nào. Bạn có thể xem thành quả của đoạn code trên website mà BALICO thiết kế tại địa chỉ: Điện lạnh Hanara

Lưu ý: bài viết này được chia sẻ dựa trên kinh nghiệm thực tế mà mình đã triển khai trên website của khách hàng, tuy nhiên đoạn code trên do mình tìm kiếm và tham khảo trên internet chứ không phải do mình viết ra, mình chỉ điều chỉnh và bổ sung lại một số phần cho phù hợp và đẹp hơn mà thôi. Chúc các bạn thành công !

Trịnh Bảo

Với 12 năm kinh nghiệm: Thiết kế web, SEO từ khóa, Adwords,… Tôi thành lập BALICO với mục tiêu mang đến những giải pháp chuyển đổi số trong kinh doanh dành cho doanh nghiệp vừa và nhỏ (SME), nâng cao năng lực cạnh tranh, đồng hành cùng khách hàng tự tin bước vào kỷ nguyên công nghệ 4.0

Kết nối với tôi:  Facebook | Tiktok | Twitter | Linkedin | Youtube | Blog