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>