I have incorporated this piece of JavaScript to integrate a chat box onto my website:
window.HFCHAT_CONFIG = {
EMBED_TOKEN: "XXXXX",
ACCESS_TOKEN: "XXXXX",
HOST_URL: "https://happyfoxchat.com",
ASSETS_URL: "https://XXXXX.cloudfront.net/visitor"
};
(function() {
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = window.HFCHAT_CONFIG.ASSETS_URL + '/js/widget-loader.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scriptTag, s);
})();
This is the HTML code that is being generated on my webpage:
<div id="hfc-embed-container" style="display: block;">
<div style="" id="hfc-cleanslate" class="hfc-chat-container">
<div class="chat-template">
<div id="hfc-badge" class="hfc-default-minimized-view hfc-page hfc-badge clearfix hfc-badge-bottom" style="background-color: rgb(255, 255, 255);">
<div class="hfc-proactive-notification">
<div class="hfc-proactive-message">Hi! This is a test message!</div>
</div>
<img alt="" class="hfc-badge-icon" id="hfc-badge-icon" src="https://d1l7z5ofrj6ab8.cloudfront.net/visitor/images/floating-widget-circle.png">
<h2 class="hfc-badge-title" style="color: rgb(0, 0, 0);">Leave us a message!</h2><span class="hfc-unread"></span>
</div>
</div>
</div>
</div>
If the text "Leave us a message" appears in the generated HTML, I would like to hide the hfc-embed-container by setting its display property to none.
Would it be possible for me to achieve this using JavaScript or should I consider exploring other options? Appreciate your input!