**  PAGINA DE TESTE   **
<script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="blipchat.css" media="screen" />

<script>
function functionTT(param) {
	tt = param;
}
const WIDGET_CUSTOM_COMMON_URL = 'https://humanaseguros.chat.blip.ai/';
const url = window.location.href;
const BLIP_CHAT_CONTAINER_ID_SELECTOR = '#blip-chat-container';
const MESSAGE_BUBBLE_CLASS_SELECTOR = 'message-bubble';
const APP_KEY = "aHVtYW5hcm90ZWFkb3I6MzUwOTc5OGYtYjY1Mi00NGQyLTljNjAtYmY1Zjk5ODRjYTBk"

const bannerInPag = document.querySelectorAll('a[href*="#widget"]');
class BlipChatWidget {
	constructor(
		messages = [],
		messagesOption = [],
		messageDelay = 0,
		mainColor = '#0c4ec0',
		secondaryColor = '#FFFFFF',
		transparent = 'transparent'
	) {
		this.messages = messages;
		this.messagesOption = messagesOption;
		this.messageDelay = messageDelay;
		this.mainColor = mainColor;
		this.transparent = transparent;
		this.secondaryColor = secondaryColor;
	}

	closeBlipChat() {
		try {
			this.widget.destroy();
			this.widget = undefined;
		} catch (e) {
			return e;
		}
	}

	reload(params, keyword) {
		this.widget = new BlipChat();
		this.widget
			.withAppKey(APP_KEY)
			.withButton({
				color: this.transparent,
				icon: 'https://blipmediastore.blip.ai/public-medias/Media_edf48251-cd44-42c1-bc43-333ae51874ac'
			})
			.withCustomMessageMetadata({
				pageOrigin: url
			})
			.withCustomCommonUrl(WIDGET_CUSTOM_COMMON_URL)
			.withCustomStyle(this.customStyle)
			.withEventHandler(BlipChat.LOAD_EVENT, () => {
				this.widget.sendMessage({
					type: 'text/plain',
					content: params,
				});
			})
			.build();
		this.widget.toogleChat();
		document.getElementById('bubble').remove();
	}

	init() {
		this.setUpCustomCss();
		this.mount();
		this.addMessageBubbleIfAny();
		this.addOptionMessageIfAny();
		this.addContainerMessage();
		this.addOnclick();
	}

	mount() {
		this.widget = new BlipChat();
		this.widget
			.withAppKey(APP_KEY)
			.withButton({
				color: this.transparent,
				icon: 'https://blipmediastore.blip.ai/public-medias/Media_edf48251-cd44-42c1-bc43-333ae51874ac'
			})
			.withCustomMessageMetadata({
				pageOrigin: url,
			})
			.withCustomCommonUrl(WIDGET_CUSTOM_COMMON_URL)
			.withCustomStyle(this.customStyle)
			.withEventHandler(BlipChat.ENTER_EVENT, () => {
				if (!!this.addMessageBubbleTimeout) {
					clearTimeout(this.addMessageBubbleTimeout);
				}
				document.querySelector('#blip-chat-iframe').style.position = 'fixed';
			})
			.withEventHandler(BlipChat.LOAD_EVENT, () => {
				if (!!tt) {
					this.widget.sendMessage({
						type: 'text/plain',
						content: tt,
					});
				}
			})
			.build();
		this.widgetElement = document.querySelector(
			BLIP_CHAT_CONTAINER_ID_SELECTOR
		);
		const icon = document.getElementById('blip-chat-icon');
		icon.setAttribute('onClick', "functionTT('Oi')");
	}

	setUpCustomCss() {
		this.customStyle = `
		.blip-card .bubble.left, .blip-card .bubble.middle {
            color: #292929 !important;
         }
        .select .options li {
            color: ${this.mainColor} !important;
            background-color: ${this.secondaryColor} !important;
            border-color: ${this.mainColor} !important;
        }
    `;
	}
	addContainerMessage() {
		this.containerMessage = document.createElement('div');
		this.containerMessage.classList.add('containerMessage');

		function insertAfter(referenceNode, newNode) {
			referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
		}

		const div = document.getElementById('blip-chat-open-iframe');
		insertAfter(div, this.containerMessage);
	}

	addMessageBubbleIfAny() {
		if (!!this.messages && this.messages.length > 0) {
			this.addMessageBubbleTimeout = setTimeout(
				this.addMessageBubble.bind(this),
				this.messageDelay
			);
		}
	}

	addMessageBubble() {
		this.messageBubble = document.createElement('div');
		this.messageBubble.classList.add(MESSAGE_BUBBLE_CLASS_SELECTOR);
		this.messageBubble.setAttribute('id', 'bubble');
		const icon = document.getElementById('blip-chat-icon');

		function parseHTML(html) {
			var t = document.createElement('template');
			t.innerHTML = html;
			return t.content;
		}

		this.messages.forEach((m) => {
			const message = document.createElement('div');
			message.classList.add('textContainer');
			message.append(
				parseHTML(`<span onClick="functionTT('Oi')" id="text-bubble">` + m + `</span>`)
			);
			this.messageBubble.appendChild(message);
		});

		const closeButton = document.createElement('span');
		closeButton.classList.add('close-button');
		this.messageBubble.appendChild(closeButton);

		const removeBubble = (e) => {
			if (!!e) {
				e.stopPropagation();
			}
			if (!!this.messageBubble) {
				this.messageBubble.remove();
				delete this.messageBubble;

				this.messageOptionContainer.remove();
				delete this.messageOptionContainer;
			}
			if (!!this.OptionMessage) {
				this.OptionMessage.remove();
				delete this.OptionMessage();
			}
		};

		var widgetOpened = document.getElementById('blip-chat-open-iframe');

		const removeBubbleAndStartChat = () => {
			if (widgetOpened.classList.contains('opened') === true) {
			} else {
				this.widget.toogleChat();
				removeBubble();
			}
		};

		this.messageBubble.addEventListener(
			'click',
			removeBubbleAndStartChat.bind(this)
		);
		this.widgetElement.addEventListener('click', removeBubble.bind(this));

		closeButton.addEventListener('click', removeBubble.bind(this));
	}

	addOptionMessageIfAny() {
		if (!!this.messagesOption && this.messagesOption.length > 0) {
			this.addOptionMessageTimeout = setTimeout(
				this.addOptionMessage.bind(this),
				this.messageDelay
			);
		} else {
			this.addOptionMessageTimeout = setTimeout(
				this.addOptionMessage.bind(this),
				this.messageDelay
			);
			console.log('working');
			var x = document.querySelectorAll('#blip-chat-open-iframe');
			x[0].style.setProperty('margin-top', '90px', 'important');
		}
	}

	addOptionMessage() {
		this.messageOptionContainer = document.createElement('div');
		this.messageOptionContainer.classList.add('option-message');

		function parseHTML(html) {
			var t = document.createElement('template');
			t.innerHTML = html;
			return t.content;
		}

		this.messagesOption.forEach((i) => {
			const message = document.createElement('li');
			message.append(
				parseHTML(
					`<a onClick="functionTT(\'${i}\')" id=messages-option>` + i + `</a>`
				)
			);
			this.messageOptionContainer.appendChild(message);
		});

		const removeOptionMessage = (e) => {
			if (!!e) {
				e.stopPropagation();
			}
			if (!!this.messageOptionContainer) {
				this.messageOptionContainer.remove();
				delete this.messageOptionContainer;
			}
		};

		const removeOptionMessageAndStartChat = () => {
			this.widget.toogleChat();
			removeOptionMessage();
		};

		this.messageOptionContainer.addEventListener(
			'click',
			removeOptionMessageAndStartChat.bind(this)
		);
		this.widgetElement.addEventListener(
			'click',
			removeOptionMessage.bind(this)
		);

		this.containerMessage.appendChild(this.messageBubble);
		this.containerMessage.appendChild(this.messageOptionContainer);

		// closeButton.addEventListener('click', removeOptionMessage.bind(this));
	}
	addOnclick() {
		if (bannerInPag != null) {
			bannerInPag.forEach((b) => {
				if (b.hash == '#widget_falarComVendas') {
					b.setAttribute(
						'onclick',
						`destroyAndStart("Falar com especialista","${b.hash}")`
					);
				} else {
					b.setAttribute(
						'onclick',
						`destroyAndStart("Quero baixar meu material","${b.hash}")`
					);
				}
			});
		}
	}
}

chat = new BlipChatWidget(
	['Oi, eu sou a <b>Ana</b> como posso te ajudar ?'],
	['Iniciar atendimento'],
	10
);
window.onload = () => chat.init();

function destroyAndStart(params, keyword) {
	chat.closeBlipChat();
	chat.reload(params, keyword);
}
</script>