single.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. {{ partial "head_single.html" . }}
  4. <style>
  5. h3 {
  6. padding-left: 20px;
  7. margin: 30px 0;
  8. font-size: 1.8rem;
  9. font-weight: bold;
  10. border-left: 4px solid #ea5413;
  11. letter-spacing: 2px;
  12. }
  13. .container p {
  14. font-size: 16px;
  15. letter-spacing: 2px;
  16. line-height: 32px;
  17. margin-bottom: 50px;
  18. }
  19. /* .container {
  20. max-width: 50%;
  21. }
  22. @media (max-width: 600px) {
  23. .container {
  24. max-width: 90%;
  25. }
  26. }
  27. @media (max-width: 992px) {
  28. .container {
  29. max-width: 90%;
  30. }
  31. }
  32. @media (min-width: 1200px) {
  33. .container {
  34. max-width: 50%;
  35. }
  36. } */
  37. .video-box {
  38. width: 100%;
  39. padding-bottom: 56%;
  40. }
  41. </style>
  42. <body>
  43. {{ partial "navbar.html" . }}
  44. <div class="container-fluid">
  45. <div class="row my-5">
  46. <div class="col-md-8">
  47. <section class="aicustomer-sec01">
  48. <img class="img-fluid" src="/img/aicustomer/choozmoAiCustomer.webp" alt="choozmoAiCustomer">
  49. <div class="aicustomer-sec01-cta-arrow text-center">
  50. <a href="#ctablock">
  51. <div class="arrow-wave">
  52. <span></span>
  53. <span></span>
  54. </div>
  55. </a>
  56. </div>
  57. </section>
  58. <section class="aicustomer-sec02">
  59. <h2 class="aicustomer-sec02-title">
  60. ChoozMo AI 客服優勢
  61. </h2>
  62. <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
  63. <div class="mt-4">
  64. <div class="container">
  65. <div class="video-box mb-5">
  66. <iframe src="https://www.youtube.com/embed/fqLmn1OLH74" title="YouTube video player" frameborder="0"
  67. allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  68. allowfullscreen></iframe>
  69. </div>
  70. <p>隨著人工智慧(AI)技術的快速發展,AI智能客服逐漸成為現代企業提升客戶體驗的核心工具之一。透過高度擬真的AI技術和影像識別能力,企業能夠打造出具有人格化、互動性強的客服代表,為顧客提供更加個性化和高效的服務。
  71. </p>
  72. <div class="d-flex justify-content-center mb-5">
  73. <a href="#news-form" class="submit-btn mb-3"> 立即諮詢</a>
  74. </div>
  75. <h3 id="一建生成AI客服"><strong> 一鍵生成AI客服</strong></h3>
  76. <img class="img-fluid" src="/img/aicustomer/webv1.webp" alt="">
  77. <p>
  78. 一鍵生成AI客服,支持手機、平板、Kiosk、電腦等多種裝置,實現無縫跨平台體驗。數字人虛擬形象,精準對嘴互動,提供多語言服務,讓顧客享受真實流暢的對話體驗。專屬後台管理系統,簡單自訂客服流程,快速響應顧客需求,有效提升客戶滿意度及品牌形象,幫助企業更高效地運營與拓展。
  79. </p>
  80. <h3 id="高度擬真Ai技術"><strong> 高度擬真AI客服技術</strong></h3>
  81. <p>AI智能影像客服的核心技術基於Generative
  82. AI(生成式人工智慧)和深度學習模型,能夠生成具備擬真外觀與語言的客服人物。這些虛擬客服不僅能夠模擬真人的面部表情、肢體動作,還能進行流暢的語音對話,讓客戶在互動中有更真實、更具情感的體驗。無論是基本的查詢、複雜的問題解答,還是情感交互,AI客服都能靈活應對,並提升整體的客戶滿意度。
  83. </p>
  84. <h3 id="語言多樣性"><strong> 語言多樣性與市場拓展</strong></h3>
  85. <p>
  86. 自家訓練的語言模型(LLM)支持超過20種語言,涵蓋全球多個市場的語言需求,從英語、中文、西班牙語到日語、韓語等,無論在哪個語言區域,企業都能提供無縫的客服體驗。這樣的語言多樣性不僅能夠打破語言障礙,還能幫助企業進一步拓展國際市場,實現全球化業務的快速推廣。
  87. </p>
  88. <h3 id="語言多樣性"><strong>24/7 全天候服務</strong></h3>
  89. <p>
  90. AI智能影像客服最大的一個優勢在於其無需休息的特性。它能夠實現24小時全天候服務,即使在高峰期或非工作時間,依然能快速回應顧客的查詢和需求。無論是跨時區的用戶,還是緊急的技術支持需求,都可以即時處理,進一步提升了顧客的滿意度與忠誠度,從而促進企業與客戶之間長期穩定的關係。
  91. </p>
  92. <img class="img-fluid mb-5" src="/img/aicustomer/aicustomer.webp" alt="">
  93. <h3 id="語言多樣性"><strong>ChooZmo AI智能客服應用實例</strong></h3>
  94. <img class="img-fluid" src="/img/aicustomer/2024meettaipei.webp" alt="">
  95. <p> ▲ 2024 Meet Taipei 創新創業嘉年華開幕式展現出數位時代專屬AI主播魏時黛參與互動</p>
  96. <img class="img-fluid mb-3" src="/img/aicustomer/aicustomer3.webp" alt="">
  97. <p> ▲ 零售場域導入AI客服,提供中英日韓多語言服務,機場專櫃整合引導,提升顧客互動體驗。</p>
  98. <img class="img-fluid mb-3" src="/img/aicustomer/aicustomer4.webp" alt="">
  99. <p> ▲ 日照中心導入台語AI客服,提供親切流暢的語音互動,提升顧客服務體驗。</p>
  100. <!-- <div id="news-form" class="news-form mt-0">
  101. <div class="text-center title">
  102. <h4>線上諮詢</h4>
  103. <p>與我們合作,馬上展開全新的創作里程碑</p>
  104. </div>
  105. <form>
  106. <div class="mb-4 align-items-center">
  107. <label for="nameValue">
  108. 聯繫人稱呼 <span class="text-danger">*</span>
  109. </label>
  110. <div class="mt-2">
  111. <input type="text" class="form-control" id="nameValue" placeholder="請留下聯繫人稱呼" required>
  112. </div>
  113. </div>
  114. <div class="row mb-4 align-items-center">
  115. <label for="phoneValue">
  116. 聯絡電話 <span class="text-danger">*</span>
  117. </label>
  118. <div class="mt-2 col-sm-4">
  119. <select id="countryCode" class="form-select">
  120. <option selected>選擇國碼</option>
  121. </select>
  122. </div>
  123. <div class="mt-3 mt-sm-2 col-sm-8">
  124. <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
  125. </div>
  126. </div>
  127. <div class="mb-4 align-items-center">
  128. <label for="emailValue">
  129. 電子信箱 <span class="text-danger">*</span>
  130. </label>
  131. <div class="mt-2">
  132. <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
  133. </div>
  134. <div class="invalid-feedback">
  135. Please choose a username.
  136. </div>
  137. </div>
  138. <div class="mb-4 align-items-center">
  139. <label for="captionValue">
  140. 需求說明 <span class="text-danger">*</span>
  141. </label>
  142. <div class="mt-2">
  143. <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明" required></textarea>
  144. </div>
  145. </div>
  146. <div class="mb-4 align-items-center">
  147. <label for="companyValue">
  148. 公司名稱 (非必填)
  149. </label>
  150. <div class="mt-2">
  151. <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
  152. </div>
  153. </div>
  154. <div class="mb-4 align-items-center">
  155. <label for="companyValue">
  156. LINE ID (非必填)
  157. </label>
  158. <div class="mt-2">
  159. <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
  160. </div>
  161. </div>
  162. <div class="mt-2">
  163. <div class="form-check">
  164. <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
  165. <label class="form-check-label w-100" for="agreeValue">
  166. 本人同意集仕多搜集資料
  167. </label>
  168. </div>
  169. </div>
  170. <div style="height: 15px;">
  171. <span class="errorText text-danger">尚有欄位未填寫</span>
  172. </div>
  173. <div class="d-flex justify-content-center mt-5">
  174. <button type="submit" class="submit-btn" id="submitBtn">
  175. <span class="spinner-border spinner-border-sm me-2 loading-btn" role="status" aria-hidden="true"></span>
  176. 提交
  177. </button>
  178. </div>
  179. </form>
  180. </div> -->
  181. </div>
  182. <!-- <div class="aicustomer-sec02-1 row">
  183. <div class="col-lg-3">
  184. <img class="img-fluid" src="/img/aicustomer/aicustomer1.png" alt="">
  185. <p>以Generative AI技術為核心,客製化專屬AI客服人物,為客戶提供多元服務,提高整體客戶體驗。
  186. </p>
  187. </div>
  188. <div class="col-lg-3">
  189. <img class="img-fluid" src="/img/aicustomer/aicustomer2.png" alt="">
  190. <p>自家LLM訓練精準多語言,支援20+國語言,提供了更廣泛的可能性,並且
  191. 有助於打入不同的市場。
  192. </p>
  193. </div>
  194. <div class="aisec02img-3 col-lg-3">
  195. <img class="img-fluid" src="/img/aicustomer/aicustomer3.png" alt="">
  196. <p>提供24小時即時支援,無需休息或輪班,因此可以快速回應客戶查詢和需求,提高滿意度和忠誠度。</p>
  197. </div>
  198. </div> -->
  199. </div>
  200. </section>
  201. <section class="aicustomer-faq">
  202. <h2>
  203. ChoozMo AI 客服常見問題
  204. </h2>
  205. <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
  206. <div class="row">
  207. <div class="col-lg-8">
  208. <div class="accordion solution-accordion pb-1" id="accordionExample">
  209. <div class="accordion-item">
  210. <h2 class="accordion-header" id="heading_1">
  211. <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1"
  212. aria-expanded="true" aria-controls="collapse_1">
  213. 1. 與真人客服相比,AI智慧客服有哪些優勢?
  214. </button>
  215. </h2>
  216. <div id="collapse_1" class="accordion-collapse collapse show" aria-labelledby="heading_1"
  217. data-bs-parent="#accordionExample">
  218. <div class="accordion-body">
  219. AI客服可以全天候提供幫助,無需休息或輪班、也能支援翻譯(中英日韓)等。
  220. <br><br>
  221. </div>
  222. </div>
  223. </div>
  224. <div class="accordion-item">
  225. <h2 class="accordion-header" id="heading_2">
  226. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  227. data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
  228. 2. AI智能客服能否與現有系統和平臺整合?
  229. </button>
  230. </h2>
  231. <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
  232. data-bs-parent="#accordionExample">
  233. <div class="accordion-body">
  234. 可以,我們的AI客服可以與現有網站、APP、各種螢幕顯示裝置(如平板、觸控螢幕、Kiosk售票機等)串接。
  235. </div>
  236. </div>
  237. </div>
  238. <div class="accordion-item">
  239. <h2 class="accordion-header" id="heading_3">
  240. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  241. data-bs-target="#collapse_3" aria-expanded="true" aria-controls="collapse_3">
  242. 3. AI客服系統是否支援多語言和多渠道溝通?
  243. </button>
  244. </h2>
  245. <div id="collapse_3" class="accordion-collapse collapse" aria-labelledby="heading_3"
  246. data-bs-parent="#accordionExample">
  247. <div class="accordion-body">
  248. 可以,目前可支援中文、英文、日文、韓文。
  249. </div>
  250. </div>
  251. </div>
  252. <div class="accordion-item">
  253. <h2 class="accordion-header" id="heading_4">
  254. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  255. data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
  256. 4. A智能客服可以提供即時支援和回應客戶查詢嗎?
  257. </button>
  258. </h2>
  259. <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_3"
  260. data-bs-parent="#accordionExample">
  261. <div class="accordion-body">
  262. AI客服可以提供即時支援和回應客戶查詢,而且能夠同時處理多個查詢不受限制。
  263. </div>
  264. </div>
  265. </div>
  266. <div class="accordion-item">
  267. <h2 class="accordion-header" id="heading_4">
  268. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  269. data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
  270. 5. 智能聊天機器人是什麼?
  271. </button>
  272. </h2>
  273. <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_3"
  274. data-bs-parent="#accordionExample">
  275. <div class="accordion-body">
  276. 人工智慧 (AI) 聊天機器人是可以使用自然語言理解 (NLU)或自然語言處理 (NLP) 和機器學習 (ML)
  277. 進行類似人類對話的應用程式或介面。人工智慧聊天機器人與標準聊天機器人的不同之處在於,它們利用大型語言模型 (LLM) 與傳統對話流和預先編程回應來產生對文字和語音輸入的回應。
  278. </div>
  279. </div>
  280. </div>
  281. <div class="accordion-item">
  282. <h2 class="accordion-header" id="heading_5">
  283. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  284. data-bs-target="#collapse_5" aria-expanded="true" aria-controls="collapse_5">
  285. 6. AI客服是否需要另外下載 APP 使用?
  286. </button>
  287. </h2>
  288. <div id="collapse_5" class="accordion-collapse collapse" aria-labelledby="heading_3"
  289. data-bs-parent="#accordionExample">
  290. <div class="accordion-body">
  291. AI客服無論KIOSK或是手機皆以網頁運行,故不需要另外下載app。
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. <div class="col-lg-4">
  298. <img class="img-fluid" src="/img/aicustomer/aicustomerfaq.webp" alt="">
  299. </div>
  300. </div>
  301. </section>
  302. </div>
  303. <div class="col-md-4 pe-md-5">
  304. <div id="form">
  305. {{ partial "form-main.html" . }}
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. <section id="aicustomerCta" class="sec-action pb-5">
  311. <div class="container-fluid">
  312. <div class="action-clip text-center">
  313. <h2 class="mb-0">
  314. 你不會的,AI 都能做
  315. <br>
  316. Choozmo 多語言 AI 客服
  317. </h2>
  318. </div>
  319. <div class="action-triangle">
  320. </div>
  321. </div>
  322. <div class="container text-center">
  323. <a class="action-btn" href="#ctablock">
  324. 立即擁有 AI 客服
  325. </a>
  326. </div>
  327. </section>
  328. {{ partial "footer.html" . }}
  329. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  330. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  331. crossorigin="anonymous"></script>
  332. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  333. integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
  334. crossorigin="anonymous"></script>
  335. <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  336. crossorigin="anonymous"></script>
  337. <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  338. crossorigin="anonymous"></script>
  339. <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  340. <script type="module">
  341. // 電話國碼
  342. const countryCodes = [
  343. '+1', // 美國
  344. '+7', // 俄羅斯
  345. '+33', // 法國
  346. '+39', // 義大利
  347. '+44', // 英國
  348. '+46', // 瑞典
  349. '+47', // 挪威
  350. '+49', // 德國
  351. '+52', // 墨西哥
  352. '+60', // 馬來西亞
  353. '+61', // 澳大利亞
  354. '+62', // 印尼
  355. '+64', // 紐西蘭
  356. '+65', // 新加坡
  357. '+66', // 泰國
  358. '+81', // 日本
  359. '+82', // 南韓
  360. '+86', // 中國大陸
  361. '+91', // 印度
  362. '+353', // 愛爾蘭
  363. '+852', // 香港
  364. '+853', // 澳門
  365. '+886', // 台灣
  366. ];
  367. console.log(countryCodes);
  368. const countryCode = document.getElementById('countryCode');
  369. countryCodes.forEach(code => {
  370. const option = document.createElement('option');
  371. option.value = code;
  372. option.text = code;
  373. countryCode.appendChild(option);
  374. });
  375. $('.errorText').hide();
  376. $('.loading-btn').hide();
  377. const scriptURL = 'https://script.google.com/macros/s/AKfycbzuwioqhnP2oL0AdHaYgEBvf0t0yWi2OTxZYlPYSoLuPyHhQFJKMm5mgOCoZEx-cIckbA/exec';
  378. async function send() {
  379. console.log('addEventListener');
  380. let name = document.querySelector('#nameValue').value; // 聯絡人
  381. let phone; // 聯絡電話
  382. let company = document.querySelector('#companyValue').value; // 公司名稱
  383. let email = document.querySelector('#emailValue').value; // 電子信箱
  384. // let demand; // 需求目的
  385. let caption = document.querySelector('#captionValue').value; // 需求說明
  386. let lineid = document.querySelector('#lineidValue').value; // 需求說明
  387. // let date = document.querySelector('#dateValue').value; // 預計活動需求日
  388. let agree; // 搜集資料
  389. let time; // 填單時間
  390. // 取得當下時間
  391. const now = new Date();
  392. const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
  393. time = now.toLocaleString('zh-TW', options);
  394. console.log('time', time);
  395. if (document.querySelector('input[id="agreeValue"]:checked')) {
  396. agree = "同意";
  397. } else {
  398. agree = "不同意";
  399. }
  400. // if (document.querySelector('input[name="demandValue"]:checked')) {
  401. // demand = document.querySelector('input[name="demandValue"]:checked').value;
  402. // }
  403. // if (demand === "其他") {
  404. // demand = document.querySelector('#otherText').value;
  405. // }
  406. let countryCode = document.querySelector('#countryCode').value; // 國碼
  407. let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
  408. phone = `${countryCode} ${phoneCode}`;
  409. const insertdata = {
  410. "name": name,
  411. "phone": phone,
  412. "company": company,
  413. "email": email,
  414. "lineid": lineid,
  415. "caption": caption,
  416. // "date": date,
  417. "agree": agree,
  418. "time": time
  419. }
  420. console.log(insertdata);
  421. $.ajax({
  422. url: scriptURL,
  423. method: "post",
  424. data: {
  425. "name": name,
  426. "phone": phone,
  427. "company": company,
  428. "email": email,
  429. "lineid": lineid,
  430. "caption": caption,
  431. // "date": date,
  432. "agree": agree,
  433. "time": time
  434. },
  435. success: function (response) {
  436. if (response == "成功") {
  437. $('.loading-btn').hide();
  438. alert("成功提交!");
  439. }
  440. },
  441. });
  442. }
  443. $('#submitBtn').on('click', function (e) {
  444. e.preventDefault();
  445. let countryCode = document.querySelector('#countryCode').value;
  446. // let demand = ""; // 需求目的
  447. // if (document.querySelector('input[name="demandValue"]:checked')) {
  448. // demand = document.querySelector('input[name="demandValue"]:checked').value;
  449. // }
  450. // if (demand === "其他") {
  451. // demand = document.querySelector('#otherText').value;
  452. // }
  453. // 手動觸發表單提交
  454. let form = $(this).closest('form');
  455. form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
  456. if (countryCode === "選擇國碼") {
  457. console.log('表單未通過驗證');
  458. $('.errorText').show();
  459. return;
  460. }
  461. if (form[0].reportValidity()) {
  462. $('.loading-btn').show();
  463. $('.errorText').hide();
  464. send();
  465. }
  466. });
  467. </script>
  468. </body>
  469. </html>