我想把下面的聊天机器人html代码添加到WordPress站点的索引(主)文件中,我该怎么做呢

时间:2021-11-30 作者:Aymal

它在我的系统上本地工作,但如何在WordPress中工作。它甚至没有出现在WordPress中可能是因为重叠

 <html lang="en">
    <head>
      <style>
        @keyframes slideInRight {
          from {
            transform: translate3d(100%, 0, 0);
            visibility: visible;
          }
        
          to {
            transform: translate3d(0, 0, 0);
          }
        }
        
        button.chatLauncher {
          animation-duration: 0.5s;
          transition-duration: 0.5s;
          position: fixed;
          bottom: 32px;
          right: 32px;
          z-index: 9999;
          border: 4px solid #981f25;
          padding: 1em;
          border-radius: 8px;
          margin: 0;
          text-decoration: none;
          background-color: #ffffff;
          color: #454545;
          font-family: sans-serif;
          font-size: 1rem;
          cursor: pointer;
          text-align: left;
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 264px;
          opacity: 0;
        }
    
        button.chatLauncher.open {
          animation-name: slideInRight;
          opacity: 1;
        }
    
        button.chatLauncher:hover,
        button.chatLauncher:focus {
          background-color: rgb(225, 225, 254);
          border: 4px solid #0053ba;
        }
        
        button.chatLauncher:focus {
          outline: 1px solid #0053ba;
          outline-offset: -4px;
        }
      </style>
    </head>
    <body>
    <!-- We want to hide this element initially, because web chat isn\'t ready yet. -->
    <button type="button" class="chatLauncher" style="display:none;">
      <div>
        Metal Roof Virtual Assistant.
      </div>
      <div>
        <strong>Powered By NextGen</strong>
      </div>
    </button>
    <script>
      window.watsonAssistantChatOptions = {
        integrationID: "5689411d-538c-44c2-87c5-f7dd2bc156be", // The ID of this integration.
          region: "us-south", // The region your integration is hosted in.
          serviceInstanceID: "f6c21fcb-341c-4546-aa96-1587230b3fec", // The ID of your service instance.
    
        showLauncher: false,
        onLoad: function(instance) {
          // Select the button element from the page.
          const button = document.querySelector(\'.chatLauncher\');
      
          // Add the event listener to open your web chat.
          button.addEventListener(\'click\', function clickListener() {
            instance.openWindow();
          });
      
          // Render the web chat. Nothing appears on the page, because the launcher is
          // hidden and the web chat window is closed by default.
          instance.render().then(function() {
            // Now that web chat has been rendered (but is still closed), we make the
            // custom launcher button visible.
            button.style.display = \'block\';
            button.classList.add(\'open\');
          });
        }
      };
    
      setTimeout(function(){const t=document.createElement(\'script\');t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || \'latest\') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
    </script>
    </body>
    </html>

1 个回复
SO网友:Vishal Valand

只在页脚中添加按钮HTML代码和脚本代码。php文件并进行检查,请确保您的按钮已加载到前端。您可能还需要在该按钮上执行一些CSS,以便正确放置。