|
|
@@ -0,0 +1,447 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+{{ partial "head_single.html" . }}
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+ {{ partial "navbar.html" . }}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <section class="aicustomerSec01">
|
|
|
+ <img class="img-fluid" src="/img/aicustomer/choozmoAiCustomer.webp" alt="choozmoAiCustomer">
|
|
|
+ <div class="aicustomerSec01_cta_arrow text-center">
|
|
|
+ <a href="#ctablock">
|
|
|
+ <div class="arrow-wave">
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="aicustoerSec02">
|
|
|
+ <h2 class="aicustoerSec02-title">
|
|
|
+ ChoozMo AI 客服優勢
|
|
|
+ </h2>
|
|
|
+ <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
|
|
|
+ <div class="aicustoerSec02-0">
|
|
|
+ <div class="aicustoerSec02-1 row">
|
|
|
+ <div class="col-lg-3">
|
|
|
+ <img class="img-fluid" src="/img/aicustomer/aicustomer1.png" alt="">
|
|
|
+ <p>以Generative AI技術為核心，客製化專屬AI客服人物，為客戶提供多元服務，提高整體客戶體驗。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-3">
|
|
|
+ <img class="img-fluid" src="/img/aicustomer/aicustomer2.png" alt="">
|
|
|
+ <p>自家LLM訓練精準多語言，支援20+國語言，提供了更廣泛的可能性，並且
|
|
|
+ 有助於打入不同的市場。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="aisec02img-3 col-lg-3">
|
|
|
+ <img class="img-fluid" src="/img/aicustomer/aicustomer3.png" alt="">
|
|
|
+ <p>提供24小時即時支援，無需休息或輪班，因此可以快速回應客戶查詢和需求，提高滿意度和忠誠度。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="aicustoerSec03"></section>
|
|
|
+
|
|
|
+ <section id="ctablock" class="aicustoerSec04">
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-6">
|
|
|
+ <img class="img-fluid" src="/img/aicustomer/aicustomercta.webp" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-6">
|
|
|
+ <div class="news-form mt-0">
|
|
|
+ <div class="text-center title">
|
|
|
+ <h4>線上諮詢</h4>
|
|
|
+ <p>與我們合作，馬上展開全新的創作里程碑</p>
|
|
|
+ </div>
|
|
|
+ <form>
|
|
|
+ <div class="mb-4 align-items-center">
|
|
|
+ <label for="nameValue">
|
|
|
+ 聯繫人稱呼 <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <div class="mt-2">
|
|
|
+ <input type="text" class="form-control" id="nameValue" placeholder="請留下聯繫人稱呼" required>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row mb-4 align-items-center">
|
|
|
+ <label for="phoneValue">
|
|
|
+ 聯絡電話 <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <div class="mt-2 col-sm-4">
|
|
|
+ <select id="countryCode" class="form-select">
|
|
|
+ <option selected>選擇國碼</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-3 mt-sm-2 col-sm-8">
|
|
|
+ <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888"
|
|
|
+ required>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-4 align-items-center">
|
|
|
+ <label for="companyValue">
|
|
|
+ 公司名稱 (非必填)
|
|
|
+ </label>
|
|
|
+ <div class="mt-2">
|
|
|
+ <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-4 align-items-center">
|
|
|
+ <label for="companyValue">
|
|
|
+ LINE ID (非必填)
|
|
|
+ </label>
|
|
|
+ <div class="mt-2">
|
|
|
+ <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-4 align-items-center">
|
|
|
+ <label for="emailValue">
|
|
|
+ 電子信箱 <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <div class="mt-2">
|
|
|
+ <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail"
|
|
|
+ required>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ Please choose a username.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-4 align-items-center">
|
|
|
+ <label for="dateValue">
|
|
|
+ 預計執行日期 <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <div class="mt-2 d-flex align-items-center">
|
|
|
+ <input type="date" id="dateValue" name="dateValue" class="px-2"
|
|
|
+ style="border:1px solid #ced4da; border-radius: 3px;" required />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="mb-4 align-items-center">
|
|
|
+ <label for="captionValue">
|
|
|
+ 需求說明 <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <div class="mt-2">
|
|
|
+ <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明"
|
|
|
+ required></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="mt-2">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
|
|
|
+ <label class="form-check-label w-100" for="agreeValue">
|
|
|
+ 本人同意集仕多搜集資料
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="height: 15px;">
|
|
|
+ <span class="errorText text-danger">尚有欄位未填寫</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="d-flex justify-content-center mt-5">
|
|
|
+
|
|
|
+ <button type="submit" class="submit-btn" id="submitBtn">
|
|
|
+ <span class="spinner-border spinner-border-sm me-2 loading-btn" role="status"
|
|
|
+ aria-hidden="true"></span>
|
|
|
+ 提交
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="aicustoerSec05"></section>
|
|
|
+
|
|
|
+ <section class="aicustoerSec06">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-8">
|
|
|
+ <div class="accordion solution-accordion pb-1 pt-5" id="accordionExample">
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="heading_1">
|
|
|
+ <button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
|
+ data-bs-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
|
|
|
+ 1. 與真人客服相比，AI智慧客服有哪些優勢？
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapse_1" class="accordion-collapse collapse show" aria-labelledby="heading_1"
|
|
|
+ data-bs-parent="#accordionExample">
|
|
|
+ <div class="accordion-body">
|
|
|
+ AI客服可以全天候提供幫助，無需休息或輪班、也能支援翻譯（中英日韓）等。
|
|
|
+ <br><br>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="heading_2">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
|
+ data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
|
|
|
+ 2.AI智能客服能否與現有系統和平臺整合？
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
|
|
|
+ data-bs-parent="#accordionExample">
|
|
|
+ <div class="accordion-body">
|
|
|
+ 可以，我們的AI客服可以與現有網站、APP、各種螢幕顯示裝置（如平板、觸控螢幕、Kiosk售票機等）串接。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="heading_3">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
|
+ data-bs-target="#collapse_3" aria-expanded="true" aria-controls="collapse_3">
|
|
|
+ 3. AI客服系統是否支援多語言和多渠道溝通？
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapse_3" class="accordion-collapse collapse" aria-labelledby="heading_3"
|
|
|
+ data-bs-parent="#accordionExample">
|
|
|
+ <div class="accordion-body">
|
|
|
+ 可以，目前可支援中文、英文、日文、韓文。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="heading_4">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
|
+ data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
|
|
|
+ 4.AI智能客服可以提供即時支援和回應客戶查詢嗎？
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_3"
|
|
|
+ data-bs-parent="#accordionExample">
|
|
|
+ <div class="accordion-body">
|
|
|
+ AI客服可以提供即時支援和回應客戶查詢，而且能夠同時處理多個查詢不受限制。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4">
|
|
|
+
|
|
|
+ <img class="img-fluid" src="/img/aicustomer/aicustomerfaq.webp" alt="">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="aicustoerCta" class="sec-action pb-5">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <div class="action-clip text-center">
|
|
|
+ <h2 class="mb-0" style="line-height: 46px;">
|
|
|
+ 你不會的，AI 都能做
|
|
|
+ <br>
|
|
|
+ Choozmo 多語言 AI 客服
|
|
|
+
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="action-triangle">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container text-center">
|
|
|
+ <a class="action-btn" href="#ctablock">
|
|
|
+ 立即擁有Ai客服
|
|
|
+
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ {{ partial "footer.html" . }}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
|
|
|
+ integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
|
|
|
+ integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
|
|
+
|
|
|
+ <script type="module">
|
|
|
+
|
|
|
+
|
|
|
+ // 電話國碼
|
|
|
+ const countryCodes = [
|
|
|
+ '+1', // 美國
|
|
|
+ '+7', // 俄羅斯
|
|
|
+ '+33', // 法國
|
|
|
+ '+39', // 義大利
|
|
|
+ '+44', // 英國
|
|
|
+ '+46', // 瑞典
|
|
|
+ '+47', // 挪威
|
|
|
+ '+49', // 德國
|
|
|
+ '+52', // 墨西哥
|
|
|
+ '+60', // 馬來西亞
|
|
|
+ '+61', // 澳大利亞
|
|
|
+ '+62', // 印尼
|
|
|
+ '+64', // 紐西蘭
|
|
|
+ '+65', // 新加坡
|
|
|
+ '+66', // 泰國
|
|
|
+ '+81', // 日本
|
|
|
+ '+82', // 南韓
|
|
|
+ '+86', // 中國大陸
|
|
|
+ '+91', // 印度
|
|
|
+ '+353', // 愛爾蘭
|
|
|
+ '+852', // 香港
|
|
|
+ '+853', // 澳門
|
|
|
+ '+886', // 台灣
|
|
|
+ ];
|
|
|
+
|
|
|
+ console.log(countryCodes);
|
|
|
+ const countryCode = document.getElementById('countryCode');
|
|
|
+ countryCodes.forEach(code => {
|
|
|
+ const option = document.createElement('option');
|
|
|
+ option.value = code;
|
|
|
+ option.text = code;
|
|
|
+ countryCode.appendChild(option);
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ $('.errorText').hide();
|
|
|
+ $('.loading-btn').hide();
|
|
|
+ const scriptURL = 'https://script.google.com/macros/s/AKfycbzuwioqhnP2oL0AdHaYgEBvf0t0yWi2OTxZYlPYSoLuPyHhQFJKMm5mgOCoZEx-cIckbA/exec';
|
|
|
+
|
|
|
+
|
|
|
+ async function send() {
|
|
|
+ console.log('addEventListener');
|
|
|
+ let name = document.querySelector('#nameValue').value; // 聯絡人
|
|
|
+ let phone; // 聯絡電話
|
|
|
+ let company = document.querySelector('#companyValue').value; // 公司名稱
|
|
|
+ let email = document.querySelector('#emailValue').value; // 電子信箱
|
|
|
+ // let demand; // 需求目的
|
|
|
+ let caption = document.querySelector('#captionValue').value; // 需求說明
|
|
|
+
|
|
|
+ let lineid = document.querySelector('#lineidValue').value; // 需求說明
|
|
|
+
|
|
|
+
|
|
|
+ let date = document.querySelector('#dateValue').value; // 預計活動需求日
|
|
|
+ let agree; // 搜集資料
|
|
|
+ let time; // 填單時間
|
|
|
+
|
|
|
+ // 取得當下時間
|
|
|
+ const now = new Date();
|
|
|
+ const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
|
|
|
+ time = now.toLocaleString('zh-TW', options);
|
|
|
+ console.log('time', time);
|
|
|
+
|
|
|
+ if (document.querySelector('input[id="agreeValue"]:checked')) {
|
|
|
+ agree = "同意";
|
|
|
+ } else {
|
|
|
+ agree = "不同意";
|
|
|
+ }
|
|
|
+
|
|
|
+ // if (document.querySelector('input[name="demandValue"]:checked')) {
|
|
|
+ // demand = document.querySelector('input[name="demandValue"]:checked').value;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (demand === "其他") {
|
|
|
+ // demand = document.querySelector('#otherText').value;
|
|
|
+ // }
|
|
|
+
|
|
|
+ let countryCode = document.querySelector('#countryCode').value; // 國碼
|
|
|
+ let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
|
|
|
+
|
|
|
+ phone = `${countryCode} ${phoneCode}`;
|
|
|
+
|
|
|
+ const insertdata = {
|
|
|
+ "name": name,
|
|
|
+ "phone": phone,
|
|
|
+ "company": company,
|
|
|
+ "email": email,
|
|
|
+ "lineid": lineid,
|
|
|
+ "caption": caption,
|
|
|
+ "date": date,
|
|
|
+ "agree": agree,
|
|
|
+ "time": time
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(insertdata);
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: scriptURL,
|
|
|
+ method: "post",
|
|
|
+ data: {
|
|
|
+ "name": name,
|
|
|
+ "phone": phone,
|
|
|
+ "company": company,
|
|
|
+ "email": email,
|
|
|
+ "lineid": lineid,
|
|
|
+ "caption": caption,
|
|
|
+ "date": date,
|
|
|
+ "agree": agree,
|
|
|
+ "time": time
|
|
|
+ },
|
|
|
+ success: function (response) {
|
|
|
+ if (response == "成功") {
|
|
|
+ $('.loading-btn').hide();
|
|
|
+ alert("成功提交！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ $('#submitBtn').on('click', function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+
|
|
|
+ let countryCode = document.querySelector('#countryCode').value;
|
|
|
+
|
|
|
+ // let demand = ""; // 需求目的
|
|
|
+ // if (document.querySelector('input[name="demandValue"]:checked')) {
|
|
|
+ // demand = document.querySelector('input[name="demandValue"]:checked').value;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (demand === "其他") {
|
|
|
+ // demand = document.querySelector('#otherText').value;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 手動觸發表單提交
|
|
|
+ let form = $(this).closest('form');
|
|
|
+ form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
|
|
|
+
|
|
|
+ if (countryCode === "選擇國碼") {
|
|
|
+ console.log('表單未通過驗證');
|
|
|
+ $('.errorText').show();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (form[0].reportValidity()) {
|
|
|
+ $('.loading-btn').show();
|
|
|
+ $('.errorText').hide();
|
|
|
+ send();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
