请选择 进入手机版 | 继续访问电脑版

有赞新零售社区

发帖
运营杂谈»有赞店铺实现全局悬浮窗

有赞店铺实现全局悬浮窗

dahaidhl 2015-04-05 58378 浏览 92 评论 | [显示全部楼层] [打印]  
打开一个店铺的有赞后台,在顶部导航找到【店铺】,进入【店铺】选项后,在左侧导航找到【公共广告设置】,在【公共广告设置】页面,添加【富文本】编辑框,在编辑框随意输入几个字符,例如“浮窗”。(操作要点如图①—④)

0.png
2
鼠标移动到左侧空白处,如图⑤的位置,鼠标【右键】选择【审查元素】,鼠标移动到网页代码区域,按快捷键Ctrl+F,调出网页元素搜索框,在搜索框输入contenteditable。
0(1).png
3
鼠标选中contenteditable这行元素,然后【右键】鼠标,在选项框中选择【Edit  as HTML】;
0(2).png
4
代码编辑框中选中你在富文本编辑框中写的字符,例如“<p>浮窗</p>”注意:<p></p>字符也要全部选中,然后替换成下图后面的代码;
0(3).png

选中<p>浮窗</p>,替换成如下代码
<div style="position:fixed;right:10px;bottom:60px;"><div id="to_user_list" style="color:#323232;outline-style:none;text-decoration:none;width:78px;display:block;height:16px;padding:7px 7px 8px;border-top-left-radius:25px;border-top-right-radius:25px;border-bottom-right-radius:25px;border-bottom-left-radius:25px;box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 2px 0px;background-color:#00BC06;"><div id="to_user_list_icon_div" class="rel left" style="float:left;position:relative;width:20px;height:16px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;background-color:#FFFFFF;"><span class="to_user_list_icon_em_a abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:2px;height:2px;border-top-left-radius:1px;border-top-right-radius:1px;border-bottom-right-radius:1px;border-bottom-left-radius:1px;top:8px;left:4px;background-color:#00BA0A;"><a href="http://wpa.qq.com/msgrd?v=3&uin=646105732&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span><span class="to_user_list_icon_em_b abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:2px;height:2px;border-top-left-radius:1px;border-top-right-radius:1px;border-bottom-right-radius:1px;border-bottom-left-radius:1px;top:8px;left:9px;background-color:#00BA0A;"><a href="http://wpa.qq.com/msgrd?v=3&uin=646105732&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span><span class="to_user_list_icon_em_c abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:2px;height:2px;border-top-left-radius:1px;border-top-right-radius:1px;border-bottom-right-radius:1px;border-bottom-left-radius:1px;top:8px;right:4px;background-color:#00BA0A;"><a href="http://wpa.qq.com/msgrd?v=3&uin=646105732&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span><span class="to_user_list_icon_em_d abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:0px;height:0px;border-style:solid;border-width:4px;top:14px;left:6px;border-color:#FFFFFF transparent transparent;"><a href="http://wpa.qq.com/msgrd?v=3&uin=646105732&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span></div><p id="to_user_list_txt" class="left" style="margin-top:0px;margin-bottom:0px;padding:0px 3px 0px 4px;list-style:none;float:left;color:#FFFFFF;font-size:12px;line-height:16px;"><a href="http://wpa.qq.com/msgrd?v=3&uin=646105732&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;">联系我们</span></a></p></div></div>
代码替换完成后,鼠标离开网页元素区域,在任意空白处,点击鼠标,我们就发现网页出现了【联系我们】的浮窗,鼠标【左键】单击富文本编辑框区域的【联系我们】,即可修改浮窗跳转的链接。默认链接是调动QQ对话窗口,你可以替换里面的QQ号646105732为你的QQ号码,也可以把此链接改成,其它第三方平台的客服系统,例如:快商通、商务通等。当然,你也可以替换其它链接,带用户去你设定的地址。
0(4).png

Q:“联系我们”四个字可以改吗?
A:当然可以改了,你在复制代码的时候,替换成你想要的字即可!

Q:悬浮窗的样式可以改吗?
A:可以的,只要你懂代码,你可以做成其它样式。PS:这个样式挺好看,和微信也很搭。

所有的的都搞定后,保存即可。注意:保存后不可再修改,若要修改,请按照步骤,从头操作,熟练后,不要半分钟就能操作完成!

此种方法也同样适合在有赞【富文本】实现更多图文排版的样式,在秀米排版好内容,复制到ueditor编辑器中,点击ueditor编辑器的HTML选项,把得到源代码复制进来即可。

按照步骤来,操作过程中遇到问题可以在我微信公众号:najiaxiaodian_dhl 62071576-6afd-4994-8a05-e0a4573542b3.gif 那家小店公众号二维码.jpg

本帖最后由 dahaidhl 于 2015-4-4 18:19 编辑
    channoway   游客   2015-07-07 显示全部楼层

      lelws/贝维诗 发表于 2015-4-12 11:49
      联系我们的标志,会被店铺产品图片覆盖了,用户手机浏览点击也没反应,请大神指导下哈,多谢了 ...


      怎么图标显示出来了,可是点击后页面不停的闪动,无法跳转到聊天窗口!!!!

        尛麦   青铜   2015-07-09 显示全部楼层
        朋友六号买的东西至今还没有发货,这是怎么回事?

          提示: 作者被禁止或删除 内容自动屏蔽

            提示: 作者被禁止或删除 内容自动屏蔽

              浮动窗口客服设置好了,电脑上可以一键和客服聊天,手机上却打不开,怎么回事,请指教

                箱包国 发表于 2015-5-30 19:50
                设置好了谢谢有赞集团~


                我的设置好了,手机客户端打不开,可以请教吗

                  BOBOclub 发表于 2015-6-18 14:57
                  哇!!学习了!!  出来了  完美显示   正常使用  谢谢


                  浮动窗口客服设置好了,电脑上可以一键和客服聊天,手机上却打不开,怎么回事,请指教

                    为什么代码替换后没有出现联系我们的字样

                      聚美街   游客   2015-08-01 显示全部楼层
                      太坑了,这么复杂,不能简单一点啊

                        123456789跳至
                        您需要登录后才可以回帖 登录 | 立即注册

                        本版积分规则

                        复制链接
                        新浪微博
                        QQ空间
                        微信扫码
                        • 回复

                        • 评分

                        客服工作时间是9:00-18:00,客服妹子当前不在线,若不能及时回复请谅解。试试右上角的搜索吧,论坛有丰富的经验贴、公告贴,相信一定能够帮到您~

                        复制成功