すべてのカテゴリ
開発・設置
コードスニペットサンプル

コードスニペットサンプル

以下のコードブロックには、ホステッドエクスペリエンス2.0で使用することができる、標準的なコードスニペットが含まれています。

  • コードをコピーしてindex.htmlで保存してください。
 

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホステッドエクスペリエンス2.0 HTMLテンプレート</title>
    <link rel="stylesheet" href="https://hosted-experience.jp/css/dhx.css">
    <script src="https://cdn.uneeq.io/hosted-experience/deploy/index.js"></script>
    <script>
        let uneeqOptions = {
            "connectionUrl": "https://api.uneeq.io",
            "personaId": "デジタルヒューマン株式会社から提供",
            "displayCallToAction": true,
            "renderContent": true,
            // "ctaThumbnailUrl": "https://your-cta-image.com",
            // "customStyles": "h1 { font-size: 150%; }",
            "welcomePrompt": "こんにちは。自己紹介してください。",
            "mobileViewWidthBreakpoint": 900,
            "layoutMode": "fullScreen", // overlay fullScreen
            "cameraAnchorHorizontal": "center", // left right center
            "cameraAnchorDistance": "tight_medium_shot", // close_up loose_close_up tight_medium_shot medium_shot medium_full_shot full_shot
            "logLevel": "info", // error warn info debug trace
            "enableMicrophone": true,
            "showUserInputInterface": true,
            "enableVad": true,
            "enableInterruptBySpeech": true,
            "autoStart": false,
            "containedAutoLayout": true,
            "showClosedCaptions": false,
            "captionsPosition": "bottom-right", // bottom-left bottom-right bottom top-left top-right top
            "languageStrings": {
                "ja": {
                    "callToActionText": "👋 こんにちは！P2デジタルヒューマンのユリアです",
                    "errorText": "エラーが発生しました。",
                    "textInputPlaceholder": "こちらにメッセージを入力...",
                    "showContentToolTip": "コンテンツを表示",
                    "sendQuestionButtonToolTip": "メッセージを送信",
                    "startRecordingButtonToolTip": "録音開始",
                    "unmuteMicrophoneToolTip": "ミュート解除",
                    "muteMicrophoneToolTip": "ミュート",
                    "microphonePermissionNotAllowedButtonToolTip": "マイクの使用が許可されていません",
                    "microphoneEnabledHintTitle": "マイクが有効です",
                    "microphoneEnabledHintText": "お話しください。お聞きしております。",
                    "microphoneEnabledHintTitleOverlay": "マイク ON",
                    "microphoneNotAllowedMessage": "マイクの使用が許可されていません。ブラウザの設定でマイクへのアクセスを許可してから、もう一度お試しください。",
                    "recordingTapToStart": "タップして録音開始、もう一度タップして送信",
                    "recordingSpeakNowPrompt": "お話しください",
                    "recordingTapStopWhenDone": "終了したらタップして停止",
                    "recordingStopButtonToolTip": "録音停止",
                    "recordingRequestingMicrophonePrompt": "マイクにアクセス中",
                    "settingsExitButton": "終了",
                    "confirmExitDescription": "本当に終了しますか？",
                    "confirmExitStayButton": "続ける",
                    "confirmExitEndButton": "終了する",
                    "hideContentButton": "コンテンツを非表示",
                    "hideDigitalHumanButton": "デジタルヒューマンを非表示"
                },
                "default": {
                    "callToActionText": "Hi! Click here to start a conversation.",
                    "textInputPlaceholder": "Type here..."
                }
            },
            "customMetadata": {
                "company": "デジタルヒューマン株式会社",
                "customerId": "ABC-123",
                "name": "田中太郎"
            },
            "speechRecognitionLocales": "ja-JP:en-US:ko-KR:th-TH", //4言語まで
            "speechRecognitionHintPhrases": "決定事項, 議題, 課題, 宿題, 持ち帰り, 確認事項, 参加者, 欠席者, 開始時間, 終了時間", // 一般的な単語よりも、具体的な単語をヒントフレーズとして登録する方が効果的です。同じカテゴリの単語をまとめてヒントフレーズとして登録することで、認識精度を向上させることができます。
            "speechRecognitionHintPhrasesBoost": 0
        }
        const uneeq = new Uneeq(uneeqOptions);

        window.dhxOptions = {
            "personaIdentifier": 'デジタルヒューマン株式会社から提供',
            "uneeq": uneeq,
            "showCaption": true,
            "showWaitingSpinner": true,
            "useDhxCustomEvent": false,
            "cameraAnchorDuration": 500,
        }
    </script>
</head>
<body>
    <h1>ホステッドエクスペリエンス2.0 HTMLテンプレート</h1>
    <script src="https://hosted-experience.jp/js/dhx.js"></script>
</body>
</html>
お役に立ちましたか？
😞
😐
🤩

最終更新日 March 20, 2025

表示文字列（多言語対応） コンテンツを表示する