カスタマイズ – ヘルプセンター | デジタルヒューマン

このページの概要

uneeqInteractionsOptionsセクションのデプロイスクリプト部分に以下のオプションを使用することで、ホステッドエクスペリエンスをカスタマイズすることができます。

これを行うには、"ここにペルソナのShare IDを入れる"の行の下にオプションを追加します。

セッションの開始後にこれらの設定を動的に調整する方法をお探しの場合は、ホステッドエクスペリエンスのMethodsを使用することで実現できます。

<script>
    window.uneeqInteractionsOptions = {
      personaShareId: "ここにペルソナのShare IDを入れる",
      layoutMode: 'fullScreen',
      showUserInputInterface: true,
      displayCallToAction: true,
      renderContent: true,
      cameraPosition: "CENTER",
      playWelcome: true,
      mobileViewWidthBreakpoint: 900,
      enableMicrophone: true,
      languageStrings: {
        "ja": {
            "callToActionText": "やあ！会話を始めるにはここをクリックしてください。",
            "textInputPlaceholder": "ここに入力..."
        },
        "de-DE": {
            "callToActionText": "Hi! Klicken Sie hier, um ein Gespräch zu beginnen.",
            "textInputPlaceholder": "Geben Sie hier ein ..."
        },
        "default": {
            "callToActionText": "Hi! Click here to start a conversation.",
            "textInputPlaceholder": "Type here..."
        }
      }
    }
</script>
<script src="2.のリージョンURLを入れる"></script>

personaShareId <string>

一意のペルソナの共有 ID。この値は、カスタマーサクセス担当者から提供されます。

デフォルト値 (必須) : null 例 : personaShareId: "e0a935ad-f3ec-4469-af89-bf4fe6a0a246"

displayCallToAction <boolean>

デジタルヒューマンを呼び出す前のコールトゥアクション（静的なメッセージとアイコンプレビュー）を表示するかどうかを決定します。

デフォルト値：false 例：displayCallToAction: true

position <string>

スプリットスクリーンビューを使用する場合、デジタルヒューマンを表示する位置（ページの左側または右側）を決定します。

デフォルト値："right"

値："right","left"

例：position: "left"

renderContent <boolean>

コンテンツを画面上に表示するかどうかを決定します。値がtrueの場合、NLPシステムからコンテンツが送信されると、画面上に表示されます。値がfalseの場合、コンテンツは画面上に描画されません。別の場所にコンテンツを表示させたい場合は、falseを指定することで、より細かい制御が可能になります。イベント処理のページを参照してください。

デフォルト値：true

例：renderContent: false

callToActionText <string>

デジタルヒューマンを呼び出す前のコールトゥアクションの中に表示されるテキストです。

デフォルト値："👋 Hi. Is there anything I can help you with?"

例：callToActionText: "こんにちは。デジタルヒューマンのソフィーです。お話しましょう。"

ctaThumbnailUrl <string>

デフォルト値 : undefined

コールトゥアクションで使用する画像のURLを入力してください。URLで提供される画像は、140pxの正方形の.jpg .pngまたは.gifでなければなりません。

例 : ctaThumbnailUrl: "https://cdn.your-domain.com/image1"

cameraPosition <string> || <object>

デジタルヒューマンをホステッドエクスペリエンスフレームの中で、デジタルヒューマンの水平（左右）の表示位置を設定することができます。cameraPositionは、フルスクリーンレイアウトモードでセッションを開始する際にのみ使用してください。

デフォルト値："CENTER"

値："RIGHT","LEFT","CENTER"

例：cameraPosition: "LEFT"

Gen3キャラクターの場合はより詳細なX, Y, ZオフセットのJSONオブジェクトを指定することが出来ます。

# Gen3キャラクターのみ
# 設定可能な値は-1.0～1.0です。
# verticalにプラスの値を指定するとカメラが上に移動し、フレーム内のキャラクターが下に移動します。逆も可能です。
# horizontalにマイナスの値を設定すると、カメラが左に移動します。プラスの値はカメラを右に移動します。逆も可能です。
# distanceを正の値で指定すると、カメラがズームインします。

cameraPosition: {
                "camera_position_vertical": -0.5, 
                "camera_position_horizontal": 0.0,
                "camera_position_distance": 0.8 
            },

customStyles <string>

デジタルヒューマンフレームに適用されるCSSの文字列です。クライアントは独自のCSSスタイルルールやオーバーライドを挿入できるようになっています。ただし、ホステッドエクスペリエンスのインターフェースは変更される可能性があるため、customStylesで大幅な変更を加えることは推奨されません。依存しているクラス名がCSSセレクタとして警告なしに変更される可能性があります。

デフォルト値：null

例：customStyles: `h1 { font-size: 150%; }`

enableTransparentBackground <boolean>

デジタルヒューマンがビデオストリームの一部として背景をレンダリング（表示）するかどうかを指定します。trueであれば背景を透明でレンダリングします。つまり背景は表示されません。false の場合はデジタルヒューマンの背後に背景を配置することができます。

デフォルト値：false

例：enableTransparentBackground: true

errorText <string>

なにかトラブルが発生していて、デジタルヒューマンを起動できないときに表示するテキストです。

デフォルト値：”⚠️ Sorry, I am busy right now. Please try again later."

例：errorText: "おっと, 何か問題が発生したようです。後でもう一度やり直してください。"

playWelcome <boolean>

NLPやチャットの設定に「ようこそ」や「ウェルカム」メッセージがある場合、オプションがtrueに設定されていると、セッション開始時に「ようこそ」や「ウェルカム」が再生されます。

デフォルト値：true

例：playWelcome: true

mobileViewWidthBreakpoint <integer>

レイアウトをモバイル表示に切り替える際の画面幅を指定します。

デフォルト値：900

例：mobileViewWidthBreakpoint: 0(0を指定すると、モバイルビューを完全に無効にします)

backgroundImageUrl <string>

セッションの読み込み後、デジタルヒューマンの背景に表示される公開可能な背景画像のURLが必要です。アニメーションプラットフォーム上で合成するため、背景画像を弊社宛に送信していただいた後、指定のURLを返送します。そのURLを設定する必要があります。2Dタイプの背景はオリジナルで1920×1080の静止画を使用できます。.jpg か .png 形式のファイルを弊社までお送りください。

例：backgroundImageUrl: https://<弊社から提供したURL>/<ファイル名>.png

（このオプションを省略するか、不正確または無効なURLでこのオプションを含めると、デフォルト設定の背景画像が読み込まれます）

layoutMode <string>

レイアウトをモバイル表示に切り替える際の画面幅を指定します。

デフォルト値：overlay

値："overlay","splitScreen","fullScreen",”contained”

例：layoutMode: "fullScreen"

💡

コンテインドレイアウトモード（Contained Layout Mode）では、idをuneeqContainedLayoutに設定したcontainer div要素をページに配置する必要があります。デジタルヒューマンはこのフレーム内に追加されます。これにより、デジタルヒューマンをウェブサイトのセクションに埋め込むことができ、より統合された体験を作成することができます。コンテナ要素をDOMから追加および削除すると、セッションが終了します。ただし、CSSを使用してページ内で要素を移動し、レスポンシブな体験を作成することができます。その場合、値には"contained"を設定してください。

💡

以下のようなコードをHTMLファイルに埋め込むと、同一セッション内で動的にビューを切り替えることができます。

<a href="javascript: uneeqSetLayoutMode('fullScreen')">dynamic switching => fullScreen</a></p>
<a href="javascript: uneeqSetLayoutMode('splitScreen')">dynamic switching => splitScreen</a></p>
<a href="javascript: uneeqSetLayoutMode('overlay')">dynamic switching => overlay</a></p>

⚠️

注意: スプリットスクリーンビューでは、ページの要素の幅がウィンドウ幅の50％になるように調整されます。そのため、CSSのvw（ビューの幅）を使用してスタイルを設定している場合、予期しない結果が生じる可能性があります。

containedAutoLayout <boolean>

デフォルト値：false

「contained」レイアウトモードで開始されたセッションでは、この値をtrueに設定することができます。また、containedAutoLayoutがtrueに設定されている場合、デジタルヒューマンコンテナが画面外に25％スクロールされた場合、レイアウトモードは自動的に「overlay」に変更されます。ユーザーがコンテナを再度表示領域にスクロールした場合、レイアウトモードは「contained」に戻ります。

logging <boolean>

デフォルト値：false

trueの場合、詳細なJavaScriptログが有効になります。

例：logging: true

enableMicrophone <boolean>

trueの場合、セッションが開始されると同時に、ユーザーにはマイクへのアクセスが要求されます（以前に承認または拒否していない場合）。

デフォルト値：false

例：enableMicrophone: true

showUserInputInterface <boolean>

もしtrueの場合、音声およびテキスト入力コンポーネントはセッション開始時に表示され、セッション中にuneeqSetShowUserInputInterface()メソッドを使用してオンにする必要はありません。

デフォルト値：false

例：showUserInputInterface: true

textInputPlaceholder <string>

この値は、ユーザ入力インタフェースを表示する際に、テキスト入力のプレースホルダーのテキストとして使用されます。

デフォルト値："Type here..."

例：textInputPlaceholder: "ここに入力してください..."

voiceInputMode <string>

プッシュ・トゥ・トーク（PTT）とスピーチレコグニションのどちらの音声入力方式を使用するかを決めます。プッシュ・トゥ・トークモードでは、ユーザーは画面上のボタンを押して音声の録音を開始・停止する必要があります。

スピーチレコグニションでは、ユーザーはボタンを押すことなく、発話を自動的に検知して録音を開始・停止します。展示会場や背景音が入るような場所では、スピーチレコグニションとPTTを比較して誤動作や精度を検証した上でご利用ください。

デフォルト値："PUSH_TO_TALK"

値："PUSH_TO_TALK","SPEECH_RECOGNITION”,"VOICE_ACTIVITY"

例：voiceInputMode: "SPEECH_RECOGNITION"

⚠️

**注意：**ボイスアクティビティー認識モード（VAD）は、スピーチレコグニション提供の開始に伴い終了しました。

enableVad <boolean>

デフォルト値：true

音声認識入力モードを使用する場合、話し始めと終了時に自動的に音声を検出します。この動作を無効にして代わりに画面上のマイクボタン（またはメソッド）を使用するには、enableVadをfalseに設定できます。このオプションがfalseに設定されている場合、ユーザーのマイクがリスニングしているかどうかを管理する必要があります。

ユーザーが押して話すことができるようにするために、画面上のマイクボタンに依存するか、または利用可能なページメソッドpauseSpeechRecognition()とresumeSpeechRecognition()を使用することができます。

例：enableVad: false

enableInterruptBySpeech <boolean>

デフォルト値：false

音声認識とenableVad入力モードを使用している場合、デジタルヒューマンが話している間は、あなたの声が割り込むことはありません。この動作を変更したい場合は、enableInterruptBySpeechをtrueに設定することで上書きできます。

enableVadがtrueに設定されている場合、マイクのミュートを解除するとこの設定に関係なく、デジタルヒューマンの発話を中断させることができます。

注意：デジタルヒューマンにテキストメッセージを入力すると、デジタルヒューマンの発話が中断されます。

例：enableInterruptBySpeech: true

autoStart <boolean>

autoStartをtrueに設定することで、uneeqStartSessionを呼び出さずに、ページロード時に自動的にセッションを開始するように設定することができます。

デフォルト値：false

例：autoStart: true

⚠️

注意：autoStartを使用すると、セッションが開始されるとデジタルヒューマンの音声がミュートされることがあります。これは、Webブラウザの自動再生ポリシーにより、ユーザーがページと対話するまで音声が再生されないためです。この場合、DigitalHumanPlayedInMutedModeSuccessというメッセージが表示されます。このメッセージを受け取った場合、ユーザーがページと対話した後にuneeqUnmuteDigitalHuman()を呼び出してデジタルヒューマンのミュートを解除することができます。または、ユーザーがデジタルヒューマンのビデオをクリックしてミュートを解除することもできます。

📍

重要: autoStartは便利ですが、ページが表示されるとすぐにデジタルヒューマンが呼び出されるため、セッションを大量に消費する可能性があります。その結果、利用料金が増えることがあります。

興味本位や不正アクセスでもセッションが消費されるため、認証ページ内などでの対策を行った上で利用してください。

showClosedCaptions <boolean>

デフォルト値：true

インターフェイスにクローズドキャプション（字幕）を表示するかどうかを決めます。クローズドキャプションは、ユーザーの音声トランスクリプション（音声認識結果）とデジタルヒューマンの音声トランスクリプション（音声合成原文）の両方を表示します。この設定は、セッション中に uneeqSetShowClosedCaptions() メソッドを使用して、動的に変更することができます。

⚠️

注意：このオプションは、SPEECH_RECOGNITION音声入力モードを使用する場合にのみ適用されます。SSMLや制御用のタグは自動的に非表示になります。

initLoadHandler <boolean>

デフォルト値：false

デジタルヒューマンフレームをページの読み込み時に初期化するかどうかを設定します。この値がtrueの場合、デジタルヒューマンフレームはページの読み込み時に（ページロードイベントハンドラを介して）初期化されます。この値がfalseの場合、デジタルヒューマンフレームはページの読み込み時にページに追加されません。

この値をfalseに設定すると、デジタルヒューマンのスクリプトの読み込みを遅延させたり、ページ上でデータの取得やアクションを行うまでデジタルヒューマンフレームの読み込みを遅らせることができます。その場合、uneeq.init()を自分で呼び出す必要があります。uneeq.initを参照してください。

languageStrings <object>

languageStringsプロパティは、ホステッドエクスペリエンスインターフェイス内に表示されるテキストのいずれかを更新するために定義することができます。

言語文字列オブジェクトには、en、es、jaなどのISO-639-1言語に対応する値を含める必要があります。各言語コード値内で、更新したい値のキーを含むオブジェクトを提供します。さらに、より正確な言語ターゲティングのために、特定のロケール／リージョンを提供することも可能です。

ユーザーがデジタルヒューマン・エクスペリエンスをロードすると、ブラウザから優先言語のリスト（優先順位の配列）が提供されます。ホステッドエクスペリエンスは、提供されたlanguageStringsのリストを繰り返し検索して、ブラウザに設定されているユーザーの優先言語に基づいて、キーに一致するものを探します。ブラウザが優先言語を検出する方法の詳細については、こちらを参照してください。

例えば、ユーザーがドイツに住んでいて、フランス語を好んで使っている場合、ブラウザは「fr, de」の順に送信し、デフォルトのロケールがドイツ語であっても、あなたが設定した場合はフランス語の値を返します。

言語コードが指定されていない場合は、デフォルト値が使用されます。デフォルト値が指定されていない場合は、ホステッドエクスペリエンスのデフォルト値が使用されます。

言語文字列キーの完全なリストは、こちらを参照してください。

window.uneeqInteractionsOptions = {
    personaShareId: "ENTER-PERSONA-SHARE-ID-HERE",
    languageStrings: {
        "es": {
            "callToActionText": "¡Hola! Haga clic aquí para iniciar una conversación.e",
            "textInputPlaceholder": "Escriba aquí..."
        },
        "ja": {
            "callToActionText": "やあ！会話を始めるにはここをクリックしてください。",
            "textInputPlaceholder": "ここに入力..."
        },
        "de-DE": {
            "callToActionText": "Hi! Klicken Sie hier, um ein Gespräch zu beginnen.",
            "textInputPlaceholder": "Geben Sie hier ein ..."
        },
        "default": {
            "callToActionText": "Hi! Click here to start a conversation.",
            "textInputPlaceholder": "Type here..."
        }
    }
}

speechToTextLocales<string>

デフォルト値：none

このオプションでは、エンドユーザーが話すことができる言語のロケールコード（言語タグ）を指定することができます。最大4つまで指定できます。指定する際は、コロンで区切ってください。

リストの最初のロケールはプライマリロケールとして扱われます。例：ja-JP:en-US:de-DE

各ロケールは言語と地域を表す4文字でなければなりません。間違った例：JPやjaのみ

speechRecognitionHintPhrases

デフォルト値：""

音声認識システムが予測すべき単語についてヒントを与えるためのカンマ区切りのヒントフレーズの文字列。ここでヒントフレーズを提供すると、音声認識システムでそれらがより検出されやすくなります。

例: UneeQ,デジタルヒューマン,ニュージーランド

speechRecognitionHintPhrasesBoost

デフォルト値：0

ヒントフレーズの単語が音声で検出される確率を高めるために使用できる0から20の間の数値。

例：15