在 Tidio 上，您可以在 Tidio 管理界面中更改右侧和左侧之间的小部件位置。如果您想将 Widget 移动和显示得更高或更低一点，您可以通过应用我们在本文中解释的自定义 CSS 代码来实现。
请注意，不同版本的 Tidio 小部件有不同的选项：桌面版、移动版和侧边栏。
在本文中，您将了解：
水平位置 （左/右）
您可以通过转到 Tidio 管理界面的“实时聊天>设置>”部分来更改台式计算机上聊天小部件的左/右位置，您可以在其中找到小部件位置选项（在“镜像”选项卡内）：
提示： 如果您希望 Widget 仅在一天中的特定时间出现在某一侧，则可以将重新定位与 JavaScript 脚本结合使用，该脚本将检查时间并相应地更新 CSS。
垂直位置 （高/低）
如果您想将我们的聊天图标移高或移低一点，则需要自定义 CSS 代码应用程序。应用代码 permitirá you 以调整后的空格数移动聊天小部件。
如果您不确定将代码放置在何处或访问您的代码源，我们建议您联系您的 Web 开发人员来帮助您使用该应用程序。
如何使用 CSS 代码
要移动小部件，请将下面显示的代码添加到网站标题中，就在括号标签 </标题> 上方。
第一行 #tidio Chat iframe 启用小组件在桌面和移动设备上的位置。
第二行和第三行仅允许小组件在移动设备上移动（它们绕过第一条规则），还允许您指定所需的屏幕大小。如果您只想移动移动设备的小部件，只需更改这些行，或者查看上面的代码（如果您只想在台式计算机上移动聊天）。
移动值由 ‘px’ 表示。
移动方向由括号 { } 中的第一个值定义：
top – 意思是 “远离顶部”
Bottom – 的意思是“远离底部”
left 的意思是“远离左侧”
right – 意思是“远离右侧”
使用负 px 值（例如，将其设置为 -100px）会将其向相反方向移动，因此如果您在代码底部键入 -100px，聊天将在网站上以 100px 向下移动。
实际示例：如果网站顶部有广告横幅，则可以使用 CSS 将构件向下移动，以便它不会隐藏横幅。
其他自定义
除了更改小部件的位置外，还有其他选项可用于自定义 Tidio 小部件。这些选项包括：
- 更改颜色： 您可以更改小部件颜色以匹配网站的整体设计。
- 调整大小： 您可以调整小组件的大小以适合放置它的位置。
- 添加 logo： 您可以将自己的个人 logo 添加到小部件中，以强化您的品牌。
- 设置欢迎消息： 您可以设置用户打开窗口小部件时接收的自定义欢迎消息。
颜色变化
要更改小部件的颜色，请转到管理界面的 LiveChat>Settings>部分。在那里，您可以为小部件的背景、文本和按钮选择不同的颜色。
调整
小部件大小调整也在同一部分中完成。您可以设置构件的高度和宽度，以适应您想要放置它的位置。
添加徽标
要添加徽标，请在 Tidio 管理界面中查找添加徽标的选项。上传您的 logo 并保存您的更改。
设置欢迎消息
要设置欢迎消息，请转到管理界面的 LiveChat Settings（实时聊天>设置>）部分。在那里，您可以添加用户将收到的自定义消息。
总结
更改 Tidio 小部件的位置和自定义是一个简单的过程，可以改善您网站上的用户体验。通过遵循本文中的准则，您可以自定义小组件以满足您的需求和用户的需求。
如果您有任何其他问题或需要更多帮助，请随时联系 Tidio 支持或专业的 Web 开发人员。