choozmo
/
AI_Video_LP


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
							<!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">
        <h2>
            ChoozMo AI 客服常見問題
        </h2>
        <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
        <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>