轻松搞定企业网站上的获客专用贴片

原创

半夜喝可乐

发布于 2023-12-27 16:37:43

2172

发布于 2023-12-27 16:37:43

文章被收录于专栏：小轻论坛小轻论坛

很多人都通过建站获取公域流量上的用户，不断的做排名和优化，但是学会承接流量也是必备技能，比如我们今天要讲的获客专用贴片，用来让用户一言就能知道怎么联系我们，虽然很多人都习惯用一些付费的在线聊天工具，但是每年的服务费也比较昂贵的，没有必要。

这个侧边栏的效果是可以展示四个手机号和微信二维码，点击手机号可以自动复制手机号到剪切板。

这个代码并不复杂，使用到的代码只有三个部分：

html：

<div class="right-service">
	<a href="#"><div class="cbtn cbtn1 blink-animation" data-text="18888888888" title="点击复制手机号">18888888888</div></a>
	<a href="#"><div class="cbtn cbtn2 blink-animation" data-text="18888888888" title="点击复制手机号">18888888888</div></a>
	<a href="#"><div class="cbtn cbtn3 blink-animation" data-text="18888888888" title="点击复制手机号">18888888888</div></a>
	<a href="#"><div class="cbtn cbtn4 blink-animation" data-text="18888888888" title="点击复制手机号">18888888888</div></a>
	<div class="goBackTop" onclick="gotoTop();return false;"></div>
</div>

css：

/*客服 */
.right-service{width: 140px;height: 520px;position: fixed;right: 15px;top: 50%;transform: translateY(-50%);z-index: 9999;background: url(../images/pc-lianxi.png);}
.right-service .cbtn{
	width: 110px;
    height: 36px;
    position: absolute;
    line-height: 36px;
    left: 16px;
text-align: center;
}
@media (max-width: 600px) {  
  .right-service {  
    display: none;  
  }  
}
.right-service .cbtn1{top: 140px;}
.right-service .cbtn2{top: 188px;}
.right-service .cbtn3{top: 236px;}
.right-service .cbtn4{top: 286px;}
.right-service .goBackTop{position: absolute;width: 26px;height: 13px;left: 59px;top: 493px;cursor: pointer;}

js：

<script>
    function copyTextToClipboard(text) {
      var tempInput = document.createElement("input");
      tempInput.value = text;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand("copy");
      document.body.removeChild(tempInput);
    
      alert("手机号已复制：" + text);
    }
    
    var copyButtons = document.getElementsByClassName("cbtn");
    for (var i = 0; i < copyButtons.length; i++) {
      copyButtons[i].addEventListener("click", function() {
        var textToCopy = this.getAttribute("data-text");
        copyTextToClipboard(textToCopy);
      });
    }
</script>

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网站建设