我可以添加一个自定义图标到twak.io部件不是从 Jmeter 板，但通过使用JavaScript和自定义CSS？

c9qzyr3d 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(152)

我可以twak.io使用JavaScript和自定义CSS而不是从 Jmeter 板向www.example.com小部件添加自定义图标吗？我试过了，但元素一旦创建就不会改变。

document.addEventListener("DOMContentLoaded", function() {
    var chatIconContainer = document.querySelector(".tawk-min-container");
    if (chatIconContainer) {
        chatIconContainer.style.display = "none";
        chatIconContainer.innerHTML = '<img src="path/to/your/image.jpg" alt="Custom Image">';
        chatIconContainer.style.display = "block";
    }
});

JavaScript

来源：https://stackoverflow.com/questions/76550363/can-i-add-a-custom-icon-to-twak-io-widget-not-from-dashboard-but-by-using-javasc

1条答案

按热度按时间

6tqwzwtp1#

问题出在试图更改chatIconContainer元素的innerHTML的那一行。更改innerHTML不会更新实际的图标，因为Tawk.to小部件是使用自己的JavaScript代码呈现的，直接修改HTML不会影响其功能。要自定义Tawk.to小部件图标，您需要使用官方的Tawk.to自定义选项。

<!DOCTYPE html>
<html>
<head>
    <title>Tawk.to Widget Customization</title>
    <style>
        
        .tawk-frame .tawk-to-widget i {
            
            background-image: url('WellYourImage.jpg');
        }
    </style>
</head>
<body>
   
    <script>
        var Tawk_API = Tawk_API || {};
        Tawk_API.onLoad = function() {
            Tawk_API.hideWidget();
            document.body.classList.add('tawk-widget-loaded');
        };
    </script>
    <script src="https://embed.tawk.to/YOUR_WIDGET_ID/default"></script>
</body>
</html>

标记中的CSS代码针对Tawk.to小部件图标，并允许您应用自定义样式。在此示例中，它使用background-image属性为图标设置自定义背景图像。
请记住，在要显示www.example.com小部件的HTML文件中包含此代码Tawk.to，并确保还包含必要的Tawk.to小部件脚本。

赞(0）回复(0）举报 2023-06-28

我来回答

我可以添加一个自定义图标到twak.io部件不是从 Jmeter 板，但通过使用JavaScript和自定义CSS？

1条答案

相关问题

热门标签

最新问答