客户服务组件 (SocialService)

SocialService 用于在页面中显示客户服务入口。桌面端显示为右侧服务栏，移动端显示为底部服务栏。

组件会根据网站后台已经配置的联系方式，自动显示 Email、WhatsApp、WeChat、Telephone、在线询盘等服务入口。

基本使用

在 Razor 页面中调用：

@Cms.SocialService()

默认情况下，桌面端和移动端都会显示图标和文字，并启用联系方式弹出内容。

参数

@Cms.SocialService(
    sideText: true,
    footText: true,
    popup: true，
    viewPath:null
)

常用示例

默认显示

@Cms.SocialService()

只显示图标

桌面端和移动端都不显示文字：

@Cms.SocialService(
    sideText: false,
    footText: false
)

移动端只显示图标

桌面端显示图标和文字，移动端只显示图标：

@Cms.SocialService(
    sideText: true,
    footText: false
)

关闭联系方式弹出内容

@Cms.SocialService(
    popup: false
)

修改组件样式

组件提供以下 CSS 变量。修改颜色或图标大小时，推荐直接覆盖这些变量。

修改桌面端样式

例如将桌面端服务栏修改为深色：

.side-share {
    --share-bg: #222;
    --share-color: #fff;
    --share-border-color: #333;
    --share-active-bg: #000;
    --share-active-color: #fff;
}

修改移动端样式

.foot-share {
    --share-bg: #fff;
    --share-color: #333;
    --share-border-color: #eee;
    --share-active-bg: #f5f5f5;
    --share-active-color: #111;
}

修改图标大小

桌面端和移动端可以分别设置：

.side-share {
    --share-icon-size: 20px;
}

.foot-share {
    --share-icon-size: 18px;
}

如果需要统一图标大小：

.side-share,
.foot-share {
    --share-icon-size: 20px;
}

联系方式 Popup

当 popup 为 true 时，支持弹出内容的服务项可以显示更多联系方式。

例如：

• Email：显示邮箱地址。
• WhatsApp：显示联系方式或二维码。
• WeChat：显示二维码及微信号。

注意： popup 控制的是联系方式弹出内容，不是在线询盘窗口。在线询盘是否可用由网站后台的询盘功能设置决定。

联系方式设置

组件会自动读取网站后台已经配置的联系方式。没有配置的联系方式通常不会显示对应入口。

例如未设置 WhatsApp 时，不会显示 WhatsApp 服务项；未设置 Telephone 时，移动端不会显示电话入口。

因此一般只需要在网站后台维护联系方式，不需要修改组件代码。

在线询盘

网站启用在线询盘功能后，组件会显示 Inquiry 入口。点击后打开询盘窗口。

询盘表单可以包含姓名、Email、电话、公司、询盘内容和验证码等字段，具体内容由网站当前配置决定。

自定义组件视图

如果只是修改颜色、图标大小等样式，建议直接使用 CSS 变量，不需要修改组件视图。

如果需要修改组件 HTML 结构或增加新的服务入口，可以通过 viewPath 指定其他视图：

@Cms.SocialService(
    sideText: true,
    footText: false,
    popup: true,
    viewPath: "Components/_CustomSocialService"
)

自定义视图使用以下 Model：

@model (bool SideText, bool FootText, bool Popup)

可以通过以下属性判断组件设置：

Model.SideText
Model.FootText
Model.Popup

使用建议

• 一般页面直接使用 @Cms.SocialService() 即可。
• 移动端空间有限时，可以设置 footText: false，只显示图标。
• 修改颜色和图标大小时，优先使用 --share-* CSS 变量。
• 只有需要修改 HTML 结构或增加服务类型时，才建议使用自定义 viewPath。
• 联系方式应优先在网站后台维护，避免直接写入组件模板。