Crisp即时聊天附加CSS效果

在做外贸网站的时候需要使用到即使聊天工具,目前比较流行的即使聊天工具为Crisp。

Crisp是功能非常强大的网站在线聊天工具,他可以将页面进行截图,并将截图发送给客户或网站客服,甚至上还可以在线发送文件等信息,功能非常强大,并且还支持多国语言,具有根据访问者IP归属地,自动切换相应语言的功能。

Crisp免费版功能相对较少,只能满足基础的即时聊天需求,使用以下CSS样式效果可以起到美化聊天框的效果。

.crisp-client .cc-kv6t .cc-1xry .cc-ge4v .cc-qqzz .cc-5b24 .cc-19cg .cc-z2iy {
	display: none!important;
}
.cc-15mo {
	-webkit-transform: rotate(6deg);
}
@keyframes scaleDraw {
0% {
transform:scale(1);
}
25% {
transform:scale(1.1);
}
50% {
transform:scale(1);
}
75% {
transform:scale(1.1);
}
}
.crisp-client .cc-kv6t .cc-1xry .cc-unoo {
	bottom: 80px!important;
	-webkit-animation-name: scaleDraw;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;
}
@media (max-width: 960px) {
#scrollUp {
	z-index: 1!important;
}
.crisp-client .cc-kv6t[data-full-view=true] .cc-1xry .cc-unoo {
	bottom: 7em!important;
	right: 25px!important;
}
}

需要注意的是不同用户加载到网站上的Crisp即时聊天代码均不相同,因此需要对类名进行微微改动。

未经允许不得转载:西德SEO » Crisp即时聊天附加CSS效果

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏