<script>

(() => {

'use strict';

const version = '3.0.0';

const widgetId = 'hisense-mx-support-chat';

const styleId = `${widgetId}-styles`;

const statusId = `${widgetId}-status`;

const chatUrl = 'https://tpclient-hisense.tpmex.com/TPChat_Hisense/Hisense/ChatQuestion_TPHisense.aspx';

const iconUrl = 'https://hisense.com.mx/images/hisense-bit.png';

const popupWidth = 400;

const popupHeight = 520;

function mountChat() {

const previous = document.getElementById(widgetId);

if (previous && previous.dataset.mxChatVersion === version) return;

const style = document.createElement('style');

style.id = styleId;

style.textContent = `

#${widgetId} {

position: fixed;

right: calc(24px + env(safe-area-inset-right, 0px));

bottom: calc(24px + env(safe-area-inset-bottom, 0px));

z-index: 1000;

display: inline-flex;

align-items: center;

gap: 10px;

box-sizing: border-box;

appearance: none;

width: auto;

min-width: 0;

max-width: calc(100vw - 32px);

height: 44px;

min-height: 44px;

margin: 0;

padding: 0 16px 0 0;

border: 0;

border-radius: 999px;

background: #009684;

color: #fff;

font: 700 13px/1.2 Arial, Helvetica, sans-serif;

text-align: left;

text-decoration: none;

text-transform: none;

letter-spacing: normal;

white-space: nowrap;

box-shadow: 0 3px 12px rgb(0 0 0 / 18%);

cursor: pointer;

}

#${widgetId}:hover { background: #007f70; color: #fff; }

#${widgetId}:focus-visible {

outline: 3px solid #00584e;

outline-offset: 5px;

}

#${widgetId} .mx-chat-icon {

display: flex;

flex: 0 0 52px;

align-items: center;

justify-content: center;

box-sizing: border-box;

width: 52px;

height: 52px;

overflow: hidden;

border-radius: 50%;

background: #fff;

}

#${widgetId} .mx-chat-icon img {

display: block;

width: 70%;

height: 70%;

margin: 0;

padding: 0;

border: 0;

border-radius: 0;

object-fit: contain;

}

#${widgetId} .mx-chat-fallback {

display: none;

width: 32px;

height: 32px;

}

#${widgetId} .mx-chat-icon.mx-chat-image-error img { display: none; }

#${widgetId} .mx-chat-icon.mx-chat-image-error .mx-chat-fallback {

display: block;

}

#${statusId} {

position: fixed;

right: calc(24px + env(safe-area-inset-right, 0px));

bottom: calc(92px + env(safe-area-inset-bottom, 0px));

z-index: 1000;

box-sizing: border-box;

width: 300px;

max-width: calc(100vw - 48px);

margin: 0;

padding: 12px 16px;

border: 1px solid #007f70;

border-radius: 12px;

background: #fff;

color: #183330;

font: 14px/1.5 Arial, Helvetica, sans-serif;

white-space: normal;

box-shadow: 0 3px 12px rgb(0 0 0 / 18%);

}

#${statusId}[hidden] { display: none; }

@media (max-width: 600px) {

#${widgetId}, #${statusId} {

right: calc(16px + env(safe-area-inset-right, 0px));

}

#${widgetId} {

bottom: calc(16px + env(safe-area-inset-bottom, 0px));

gap: 8px;

padding-right: 14px;

}

#${widgetId} .mx-chat-desktop { display: none; }

}

`;

// A real button avoids the site's capture-phase handler for external links.

const button = document.createElement('button');

button.id = widgetId;

button.type = 'button';

button.lang = 'es-MX';

button.dataset.mxChatVersion = version;

button.title = 'Chat Soporte T\u00e9cnico';

button.setAttribute('aria-label', 'Chat Soporte T\u00e9cnico (abre una nueva ventana)');

button.setAttribute('aria-describedby', statusId);

const status = document.createElement('div');

status.id = statusId;

status.lang = 'es-MX';

status.setAttribute('role', 'status');

status.setAttribute('aria-live', 'polite');

status.hidden = true;

const icon = document.createElement('span');

icon.className = 'mx-chat-icon';

icon.setAttribute('aria-hidden', 'true');

icon.innerHTML = `

<svg class="mx-chat-fallback" viewBox="0 0 32 32" focusable="false">

<path d="M6 4h20a3 3 0 0 1 3 3v15a3 3 0 0 1-3 3H14l-7 5v-5H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3Z" fill="#009684"/>

<circle cx="10" cy="15" r="2" fill="#fff"/>

<circle cx="16" cy="15" r="2" fill="#fff"/>

<circle cx="22" cy="15" r="2" fill="#fff"/>

</svg>

`;

const image = document.createElement('img');

image.alt = '';

image.width = 36;

image.height = 36;

image.referrerPolicy = 'no-referrer';

image.addEventListener('error', () => {

icon.classList.add('mx-chat-image-error');

console.warn('[Hisense MX Chat v3] Robot image unavailable; showing the chat icon.', iconUrl);

}, { once: true });

image.src = iconUrl;

icon.prepend(image);

const label = document.createElement('span');

label.append(document.createTextNode('Chat Soporte'));

const desktopLabel = document.createElement('span');

desktopLabel.className = 'mx-chat-desktop';

desktopLabel.textContent = ' T\u00e9cnico';

label.append(desktopLabel);

button.append(icon, label);

button.addEventListener('click', (event) => {

event.preventDefault();

status.hidden = true;

status.textContent = '';

const width = Math.min(popupWidth, window.screen.availWidth);

const height = Math.min(popupHeight, window.screen.availHeight);

const left = (window.screen.availLeft || 0) +

Math.max(0, Math.round((window.screen.availWidth - width) / 2));

const top = (window.screen.availTop || 0) +

Math.max(0, Math.round((window.screen.availHeight - height) / 2));

const popup = window.open(

chatUrl,

'_blank',

`popup=yes,width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`

);

if (!popup) {

console.warn('[Hisense MX Chat v3] Popup blocked. No fallback tab was opened.');

status.textContent = 'Permite las ventanas emergentes de este sitio y vuelve a intentar.';

status.hidden = false;

return;

}

try {

popup.resizeTo(width, height);

popup.moveTo(left, top);

} catch (error) {

if (!(error instanceof DOMException)) throw error;

console.warn('[Hisense MX Chat v3] Browser restricted window positioning or sizing.', error);

status.textContent = 'El chat se abri\u00f3. Tu navegador controla el tama\u00f1o de la ventana.';

status.hidden = false;

} finally {

popup.opener = null;

}

});

document.getElementById(styleId)?.remove();

document.getElementById(statusId)?.remove();

document.head.append(style);

if (previous) {

previous.replaceWith(button);

} else {

document.body.append(button);

}

document.body.append(status);

}

if (document.readyState === 'loading') {

document.addEventListener('DOMContentLoaded', mountChat, { once: true });

} else {

mountChat();

}

})();

</script>