How to use the authentication hash

After generating the HASH for a corporate user, it can be used in the URL of the AnnAWeb component that will be embedded on the client’s page.

• Component URL: The query string will consist of the generated HASH and, if applicable, an AnnA command to be executed when the chat opens.

Example of HTML embedding on a client’s page

<div id="annaChat">
  <style>
    #annaChat .chat-window * {
      box-sizing: border-box;
    }

    #annaChat {
      font-family: "Roboto", Verdana;
    }

    #annaChat .open-chat {
      background-color: #555;
      color: white;
      padding: 16px 20px;
      border: none;
      cursor: pointer;
      opacity: 0.8;
      position: fixed;
      bottom: 23px;
      right: 28px;
      width: 10%;
      text-align: center;
    }

    #annaChat .chat-window {
      width: 450px;
      height: 650px;
      display: none;
      position: fixed;
      bottom: 0;
      right: 15px;
      border: 3px solid #f1f1f1;
      z-index: 9;
    }

    #annaChat .chat-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 5px;
      background-color: #fff;
    }

    #annaChat .cancel-btn {
      display: inline-block;
      background-color: transparent;
      font-size: 24px;
      font-weight: 900;
      color: #555;
      padding: 0 14px;
      border: none;
      cursor: pointer;
      opacity: 0.8;
      text-align: center;
    }

    #annaChat .chat-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 5px;
      font-size: 16px;
    }

    #annaChat .text-title {
      display: inline-block;
      font-weight: bold;
      font-size: 18px;
    }
  </style>
  <div class="open-chat" id="openChat" onclick="openChat()">Chat</div>
  <div class="chat-window" id="chatWindow">
    <div class="chat-container">
      <div class="chat-title">
        <div class="text-title">AnnA Chat</div>
        <div class="cancel-btn" onclick="closeChat()" title="Minimizar">-</div>
      </div>
    </div>
  </div>
  <script>
    function openChat() {
      document.getElementById("chatWindow").style.display = "block";
      document.getElementById("openChat").style.display = "none";
      var frame = document.createElement("iframe");
      frame.src = "YOUR_GENERATED_CHATURL";
      frame.id = "AnnAChatBox";
      frame.frameborder = "0";
      frame.style.width = "440px";
      frame.style.height = "600px";
      $(".chat-container").append(frame);
    }

    function closeChat() {
      document.getElementById("chatWindow").style.display = "none";
      document.getElementById("openChat").style.display = "block";
      $("#AnnAChatBox").detach();
    }
  </script>
</div>