(function () { window.config = { url: 'https://mirabot.tenten.vn' }; function escapeHtml(text) { const div = document.createElement('div'); div.innerText = text; return div.innerHTML; } makeBot(); function makeBot(langBot = 'en') { const link = window.config.url; let svg_avt; let svg_ic; let nt_type; let user_info = ''; let width = '130.17'; let height = '53'; const div = document.createElement('div'); const languages = { vi: { today: "Hôm nay", placeholder: "Tôi có thể giúp gì cho bạn?", name: "Tên", nameRequire: "Vui lòng nhập tên", email: "Email", emailRequire: "Vui lòng nhập emai", phone: "Số điện thoại", phoneRequire: "Vui lòng nhập số điện thoại", start: "Bắt đầu", message: "Tin nhắn", messageRequire: "Vui lòng nhập tin nhắn", back: "Quay lại", send: "Gửi", confirm: "Hệ thống đã tiếp nhận thông tin và sẽ liên lạc lại với quý khách sớm nhất có thể!", }, en: { today: "Today", placeholder: "What can I do for you?", name: "Name", nameRequire: "Please enter a name", email: "Email", emailRequire: "Please enter email", phone: "Phone number", phoneRequire: "Please enter the phone number", start: "Start", message: "Message", messageRequire: "Please enter message", back: "Back", send: "Send", confirm: "The system has received the information and will contact you as soon as possible!", }, jp: { today: "今日", placeholder: "お手伝いできることはありますか？", name: "お名前", nameRequire: "お名前を入力してください", email: "メール", emailRequire: "メールアドレスを入力してください", phone: "電話番号", phoneRequire: "電話番号を入力してください", start: "始める", message: "メッセージ", messageRequire: "メッセージを入力してください", back: "戻る", send: "送信", confirm: "システムは情報を受け取り、できるだけ早くお客様にご連絡いたします！", }, }; div.id = 'tenten-iframe-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 9); div.classList.add('tenten-iframe'); document.body.appendChild(div); const style = document.createElement("style"); nt_type = 'right'; const __ = function (key) { if (languages[langBot] && languages[langBot][key]) { return languages[langBot][key]; } else { return ``; } } let email = ''; let name = ''; let phone = ''; let client = ''; let status = ''; style.innerHTML = ".tenten-iframe { position: fixed; " + nt_type + ": 30px; bottom: 30px; z-index: 9999; }"; const head = document.head || document.getElementsByTagName("head")[0]; head.appendChild(style); const iframe = document.createElement('iframe'); iframe.classList.add('iframe-tenten-bot'); iframe.style.border = 'none'; iframe.style.setProperty('width', `${width}px`, 'important'); iframe.style.setProperty('height', `${height}px`, 'important'); div.appendChild(iframe); const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; svg_ic = 'src="' + link + '/assets/images/bt-chatmira01.svg"'; svg_avt = 'src="' + link + '/assets/images/chat-bot1.svg"'; iframeDocument.open(); iframeDocument.write( '' + ' ' + ' Chat Bot' + ' ' + ' ' + '
\n' + '
\n' + ' \n' + ' \n' + ' \n' + '
\n' + '
\n' + '
\n' + '
\n' + '

Update required

\n' + '
\n' + ' \n' + '
\n' + '
' + ' ' + '' ); let source_css = 'none'; let brand_css = 'none'; let btn_chatbox_gap = '0px'; const cssRules = ':root { --primary-color: #441cab; }\n' + 'html { padding: 0px; margin: 0px; overflow-x: hidden; }\n' + 'body { font-style: normal; font-size: 18px; font-family: \'Roboto\', sans-serif; color: rgba(19, 19, 19, 1); margin: 0px; }\n' + '* { box-sizing: border-box; }\n' + 'svg { font-size: 0; }\n' + 'ul, ol { margin: 0; padding: 0; list-style: none; }\n' + 'a { text-decoration: none !important; }\n' + 'a:hover, a:focus { text-decoration: none !important; }\n' + ':focus, :hover { outline: none !important; }\n' + '::-webkit-input-placeholder { font-style: italic; }\n' + ':-moz-placeholder { font-style: italic; }\n' + '::-moz-placeholder { font-style: italic; }\n' + ':-ms-input-placeholder { font-style: italic; }\n' + 'img { max-width: 100%; }\n' + 'figure { margin: 0px; font-size: 0px; }\n' + 'p { margin: 0px 0px 10px 0px; }\n' + '.mc_chatbox_mirabot { position: fixed; bottom: 0; ' + nt_type + ': 0; }\n' + '.mc_start_form_chatbot { display: none; }\n' + '.mc_chatbox_form.active .mc_start_form_chatbot { display: block; }\n' + '.mc_start_form_support { display: none; }\n' + '.mc_chatbox_form.customer .mc_start_form_support { display: block; }\n' + '.mc_chatbox_form.customer .mc_message_chatbot { display: none; }\n' + '.mc_chatbox_form.active .mc_message_chatbot { display: none; }\n' + '.mc_start_form_confirm { display: none; }\n' + '.mc_chatbox_form.confirm .mc_start_form_confirm { display: block; }\n' + '.mc_chatbox_form.confirm .mc_message_chatbot { display: none; }\n' + '.mc_confirm { padding-top: 32px; text-align: center; }\n' + '.mc_confirm_back { display: flex; padding: 25px; color: #2B92E4; gap: 10px; justify-content: center; align-items: center; }\n' + '.close-help-chatbot { display: none; }\n' + '.mc_btn_help_chatbox { border-radius: 50px; background: var(--primary-color); padding: 15px; font-size: 18px; display: flex; align-items: center; width: max-content; gap: ' + btn_chatbox_gap + '; color: #fff; cursor: pointer; min-width: 48px; text-wrap: nowrap; }\n' + '.mc_powerby { display: ' + brand_css + '; }\n' + '.mc_powerby a { position: relative; }\n' + '.mc_powerby a:hover { color: #441CAB; }\n' + '.mc_powerby a::before { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; background: #ffffff; height: 1px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }\n' + '.mc_powerby a:hover::before { right: 0px; background: #441CAB; }\n' + '.active .mc_content_chatbox { display: block; }\n' + '.mc_content_chatbox { background-color: #fff; width: 400px; border-radius: 10px; position: absolute; bottom: 70px; ' + nt_type + ': 0; display: none; border: 1px solid rgba(0, 0, 0, 0.10); }\n' + '.mc_header_content_chatbox { border-radius: 10px 10px 0px 0px; background: #FFFFFF; padding: 16px 24px; display: flex; gap: 8px; align-items: center; box-shadow: 0px 0px 5px 0px #6666660D; }\n' + '.mc_header_content_chatbox h4 { color: var(--primary-color); font-size: 16px; font-weight: 600; line-height: 19px; letter-spacing: 0em; text-align: left; margin: 0px; padding: 0px; }\n' + '.mc_header_content_chatbox figure img { height: 30px; }\n' + '.avatar_chatbox-update { max-width: 26px; width: 100%; }\n' + '.link-file-update1123 { color: #2B92E4; font-size: 14px; font-weight: 400; display: flex; gap: 8px; margin-bottom: 13px; overflow-x: hidden; text-overflow: ellipsis; }\n' + '.show-onkey-chat { display: none !important; }\n' + '.Sources-update1123 { display: table; font-weight: 700; cursor: pointer; position: relative; }\n' + '.source-list { display: none; margin-top: 10px; transition: width 2s ease-in-out; }\n' + '.source-list.active { display: block; }\n' + '.mc_body_content_chatbox { padding: 24px 24px 12px 24px; height: 400px; overflow-y: auto; background: #F7F6FC; position: relative; }\n' + '.mc_input_chatbox { padding: 16px; width: 100%; border-radius: 10px; border: 1px solid var(--primary-color); }\n' + '.chat_content_chatbox-send { display: flex; align-items: stretch; }\n' + '.chat_content_chatbox-send ~ .mc_powerby { margin: 12px 0px 0px 0px; }\n' + '.mc_powerby.input_full { grid-column: span 2; margin: 74px 0px 0px 0px; }\n' + '.mc_btn_send_chatbox { background: var(--primary-color); padding: 12px 12px; border-radius: 10px; border: 1px solid var(--primary-color); margin-left: 8px; min-width: 50px; min-height: 50px; display: flex; align-items: center; justify-content: center; }\n' + '.mc_chat_content_chatbox { box-shadow: 0px -10px 10px 0px #6666660D; background: #F7F6FC; display: flex; flex-direction: column; padding: 10px 16px 12px 16px; border-radius: 10px; height: 97px; }\n' + '.mc_spbox_inner.mc_txt_chatbox { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; width: fit-content; margin-right: 0px; margin-top: 20px; }\n' + '.mc_body_content_chatbox a img { margin-left: 8px; }\n' + '.mc_txt_chatbox { padding: 12px; font-size: 14px; border-radius: 10px; background: #ffffff; box-shadow: 0px 5px 5px 0px #6666660D; position: relative; margin-right: 20px; overflow-x: auto; }\n' + '.mc_txt_chatbox img { max-height: 20px; padding: 1.5px 5px; }\n' + '.mc_txt_chatbox .mc_source_2410 { display: ' + source_css + '; }\n' + '.conversation_source { margin: 16px 0px 0px 0px; padding: 8px 16px; background: #E9E8E8; border-radius: 8px; }\n' + '.mc_react_chat { z-index: 5; }\n' + '.show-help-chatbot { width: 23px; }\n' + '.mc_action_react { cursor: pointer; }\n' + '.mc_list_react_chat { font-size: 0; z-index: 4; display: flex; margin-top: 20px; }\n' + '.mc_react_chat.active .mc_list_react_chat { display: flex; }\n' + '.mc_react_happy, .mc_react_unhappy { cursor: pointer; }\n' + '.mc_list_react_chat div svg path { fill: #ccc; }\n' + '.mc_list_react_chat .mc_react_happy:hover svg path { fill: #08B94F; }\n' + '.mc_list_react_chat .mc_react_unhappy:hover svg path { fill: #F90000; }\n' + '.mc_list_react_chat .mc_react_happy svg.active path { fill: #08B94F; }\n' + '.mc_list_react_chat .mc_react_unhappy svg.active path { fill: #F90000; }\n' + '.mc_react_position { position: absolute; top: 20px; right: -6px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10); padding: 5px; border-radius: 50%; font-size: 0; }\n' + '.mc_react_chat.active .mc_list_react_chat { display: flex; }\n' + '.mc_line_box { display: flex; align-items: flex-start; gap: 10px; }\n' + '.mc_suggest_chatbox { text-align: right; margin-top: 16px; }\n' + '.mc_suggest_chatbox ul { display: flex; flex-direction: column; align-items: flex-end; }\n' + '.mc_suggest_chatbox li { border: 1px solid #E9E9E9; border-radius: 5px; padding: 12px; font-size: 14px; color: #441CAB; display: block; margin-bottom: 8px; cursor: pointer; width: fit-content; }\n' + '.mc_suggest_chatbox li:last-child, .mc_line_people_chat:last-child { margin-bottom: 0; }\n' + '.mc_suggest_chatbox li:hover { border: 1px solid #441CAB; }\n' + '.mc_line_people_chat { padding: 12px; color: #fff; margin-bottom: 4px; font-size: 14px; display: block; width: fit-content; border-radius: 10px; background: var(--primary-color); }\n' + '.mc_people_chat { text-align: left; margin-top: 24px; display: flex; flex-direction: column; align-items: flex-end; word-break: break-word; }\n' + '.mc_line_box { margin-top: 24px; }\n' + '.mc_line_box:first-child { margin-top: 0; }\n' + '.mc_line_box:last-child { margin-bottom: 24px; }\n' + '.mc_txt_chatbox p { margin-top: 0; margin-bottom: 0; }\n' + '.mc_txt_chatbox p:first-child { margin-top: 0; }\n' + '.mc_powerby { font-size: 14px; color: #D3C3FC; width: 100%; text-align: center; left: 0; margin: 30px 0px 0px 0px; flex-grow: 1; }\n' + '.mc_suggest_contact { border: 1px solid #E9E9E9; padding: 12px; font-size: 14px; color: #898989; width: fit-content; margin-top: 16px; border-radius: 5px; }\n' + '.date-today1124 { font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: 0em; text-align: center; color: #999999; padding-top: inherit; }\n' + '.mc_suggest_contact p { margin-bottom: 5px; }\n' + '.mc_body_content_chatbox a { color: #2B92E4; font-size: 14px; word-break: break-all; }\n' + '.mc_powerby a { color: #9D9D9D; font-size: 12px; }\n' + '.mc_body_content_chatbox::-webkit-scrollbar { width: 5px; }\n' + '.mc_body_content_chatbox::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #fff; border-radius: 10px; }\n' + '.mc_body_content_chatbox::-webkit-scrollbar-thumb { background: #D9D9D9; border-radius: 10px; }\n' + '.mc_body_content_chatbox::-webkit-scrollbar-thumb:hover { background: #D9D9D9; }\n' + '.mc_form_info { display: grid; grid-gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n' + '.mc_start_chatbot { height: 501; padding: 24px 24px 12px 24px; border-radius: 0px 0px 10px 10px; overflow-y: auto; background: #F7F6FC; }\n' + '.mc_form_input_chatbot.input_full { grid-column: span 2; }\n' + '.mc_form_input_chatbot label { margin: 0px 0px 8px 0px; font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: 0em; text-align: left; display: block; }\n' + '.mc_form_input_chatbot label .color-red-11232023 { color: #FF0000; }\n' + '.mc_form_input_chatbot input { border: 1px solid #CCCCCC; border-radius: 10px; padding: 18px 16px; font-size: 16px; width: 100%; }\n' + '.mc_form_input_chatbot p, #msg_error { margin-top: 5px; margin-bottom: 0; font-size: 13px; color: #FF0000; display: none; }\n' + 'a.mc_form_btn { display: block; font-weight: 400; padding: 16px; color: #fff; background-color: var(--primary-color); border-radius: 10px; margin-top: 32px; text-align: center; cursor: pointer; }\n' + 'a.mc_support_form_btn { display: block; font-weight: 400; padding: 16px; color: #fff; background-color: var(--primary-color); border-radius: 10px; margin-top: 32px; text-align: center; cursor: pointer; }\n' + 'a.mc_back_btn { display: block; font-weight: 400; padding: 16px; color: #000; background-color: fff; border-radius: 10px; margin-top: 32px; text-align: center; cursor: pointer; border: 1px solid #ccc; }\n' + '.mc_start_form_support .mc_form_submit { display: flex; justify-content: space-around; }\n' + '.mc_start_form_support a { width: 40%; }\n' + '.mc_form_input_chatbot input::placeholder { font-size: 16px; font-weight: 400; line-height: 19px; text-align: left; color: #00000033; }\n' + '.loading-spinner { width: 18px; height: 18px; border-radius: 50%; border: 4px solid rgba(231, 231, 231, 1); border-top: 4px solid var(--primary-color); animation: spin 1s linear infinite; margin-right: 5px; display: none; }\n' + '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }'; const styleElement = iframeDocument.createElement('style'); styleElement.innerHTML = cssRules; iframeDocument.head.appendChild(styleElement); const scripts = function () { const divTenOpenButton = document.querySelector('.mc_btn_help_chatbox'); const divTenOpenButtonParent = divTenOpenButton.parentElement; const buttonTenten = document.querySelector('.mc_btn_send_chatbox_icon'); const conversationElement = document.querySelector('.tenten-conversation'); const textarea = document.querySelector('.mc_input_chatbox'); const spinner = document.querySelector('.loading-spinner'); const iframe = parent.document.querySelector('iframe.iframe-tenten-bot'); const showHelpChatBot = document.querySelector('.show-help-chatbot'); const mcBtnHelpChatBox = document.querySelector('.mc_btn_help_chatbox span'); const closeHelpChatBot = document.querySelector('.close-help-chatbot'); let width = divTenOpenButton.clientWidth + 1; let height = '53'; let language; let miMiraBot; let maMiraBot; let chatUrl; let ws; const languages = { vi: { unsatisfied: "Bạn không hài lòng?", contactUs: "Liên hệ chúng tôi ngay", validateEmpty: "Không được để trống", validateEmail: "Email không đúng định dạng", validatePhone: "Số điện thoại phải có từ 9 đến 12 số", validateString: "Tên không được chứa ký tự đặc biệt và lớn hơn 3 ký tự", errorMessage: "Có lỗi xảy ra khi gửi dữ liệu", }, en: { unsatisfied: "You are not satisfied?", contactUs: "Contact us now", validateEmpty: "Cannot be empty", validateEmail: "Invalid email format", validatePhone: "Phone number must have 9 to 12 digits", validateString: "Name must not contain special characters and must be longer than 3 characters", errorMessage: "An error occurred while sending data", }, jp: { unsatisfied: "不満がありますか？", contactUs: "今すぐお問い合わせ", validateEmpty: "空にできません", validateEmail: "無効なメール形式", validatePhone: "電話番号は9桁から12桁でなければなりません", validateString: "名前には特殊文字を含めず、3文字よりも長くする必要があります", errorMessage: "データ送信中にエラーが発生しました", }, }; iframe.style.setProperty('width', `${width}px`, 'important'); const __ = function (key) { if (languages[langBot] && languages[langBot][key]) { return languages[langBot][key]; } else { return ``; } } const inputPhone = document.getElementById("phone"); inputPhone.addEventListener("input", function () { inputPhone.value = inputPhone.value.replace(/\s/g, ''); }); const inputSupportPhone = document.getElementById("support_phone"); inputSupportPhone.addEventListener("input", function () { inputSupportPhone.value = inputSupportPhone.value.replace(/\s/g, ''); }); let id = null; divTenOpenButton.addEventListener('click', function () { if (divTenOpenButtonParent.classList.contains('active')) { divTenOpenButtonParent.classList.remove('active'); iframe.style.setProperty('width', `${width}px`, 'important'); iframe.style.setProperty('height', `${height}px`, 'important'); } else { divTenOpenButtonParent.classList.add('active'); iframe.style.setProperty('width', `400px`, 'important'); iframe.style.setProperty('height', `632px`, 'important'); conversationElement.scrollTop = conversationElement.scrollHeight; } showHelpChatBot.style.display = showHelpChatBot.style.display === 'none' ? 'block' : 'none'; mcBtnHelpChatBox.style.display = mcBtnHelpChatBox.style.display === 'none' ? 'block' : 'none'; closeHelpChatBot.style.display = closeHelpChatBot.style.display === 'inline' ? 'none' : 'inline'; }); document.addEventListener("DOMContentLoaded", function() { document.addEventListener("click", function(event) { if (event.target.matches(".mc_list_react_chat svg")) { let selectedReaction = null; const reactionClass = event.target.closest(".mc_list_react_chat"); const reactionDiv = event.target.closest(".mc_list_react_chat div"); const dataId = reactionClass.dataset.id; event.target.classList.toggle("active"); if (!event.target.classList.contains("active")) { selectedReaction = null; } else { if (reactionDiv.classList.contains("mc_react_happy")) { selectedReaction = 1; } else if (reactionDiv.classList.contains("mc_react_unhappy")) { const generatedHTML = generateChatElement(link, 5, '', ''); const currentHTML = event.target.parentNode.parentNode.parentNode.parentNode.parentNode; const supportBox = currentHTML.nextElementSibling; if (supportBox && supportBox.classList.contains('mc_support_box')) { if (supportBox.innerHTML.trim() === '') { supportBox.innerHTML += generatedHTML; conversationElement.scrollTop = conversationElement.scrollHeight; } } selectedReaction = 0; } } const siblings = event.target.parentNode.parentNode.children; for (const sibling of siblings) { if (sibling.querySelector('svg') !== event.target) { sibling.querySelector('svg').classList.remove("active"); } } } if (event.target.classList.contains('mc_source_link') || event.target.classList.contains('mc_powerby_link')) { event.preventDefault(); const url = event.target.getAttribute("href"); const message = { action: 'openNewTab', url: url }; window.parent.postMessage(message, '*'); } if (event.target.classList.contains('mc_back_btn')) { const chatBoxForm = document.querySelector('.mc_chatbox_form'); chatBoxForm.classList.remove('customer'); const input = ['support_name', 'support_email', 'support_phone', 'support_message']; input.forEach(function (inputId) { const inputElement = document.getElementById(inputId); const errorMessageElement = inputElement.nextElementSibling; inputElement.classList.remove('error'); errorMessageElement.textContent = ""; errorMessageElement.style.display = 'none'; }); } if (event.target.classList.contains('mc_btn_send_form_icon')) { const chatBoxForm = document.querySelector('.mc_chatbox_form'); chatBoxForm.classList.add('customer'); } if (event.target.classList.contains('mc_confirm_back')) { const chatBoxForm = document.querySelector('.mc_chatbox_form'); chatBoxForm.classList.remove('confirm'); } if (event.target.classList.contains('Sources-update1123') || event.target.parentNode.classList.contains('Sources-update1123')) { const clickedElement = event.target.tagName.toLowerCase() === 'img' ? event.target.parentNode : event.target; const sourceList = clickedElement.parentNode.querySelector('.source-list'); if (sourceList) { sourceList.classList.toggle('active'); } } }); }); const generateChatElement = function (link, type, message, svg_avt) { switch (type) { case 1: return `

${message}

` case 2: return `
${message}
` case 3: return `
` case 4: let html = `
Sources
`; return html; case 5: return `
${__('unsatisfied')} ${__('contactUs')}
` } }; }; const script = document.createElement('script'); script.type = 'text/javascript'; script.textContent = '(' + scripts.toString() + ')();'; iframeDocument.body.appendChild(script); iframeDocument.close(); } window.addEventListener('message', function (event) { if (event.data.action === 'openNewTab') { const newTab = window.open(event.data.url, '_blank'); newTab.focus(); } }); })();