カスタマイズ

このページの概要

 

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

 

これを行うには、personaShareId の下にオプションを追加します。"ここにペルソナの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。この値は、Creatorポータルで確認するか、カスタマーサクセス担当者から提供されます。

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

 

displayCallToAction <boolean>

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

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

Notion image
 

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でなければなりません。

Notion image

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

cameraPosition <string>

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

デフォルト値:"CENTER"

値:"RIGHT","LEFT","CENTER"

例:cameraPosition: "LEFT"

 

Gen3キャラクターの場合はより詳細なカメラポジションを設定する事が出来ます。

# Gen3キャラクターのみ
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>

デジタルヒューマンがビデオストリームの一部として背景をレンダリング(表示)するかどうかを指定します。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。

例:backgroundImageUrl: https://images.yourdomain.com/background1.png

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

backgroundImageUrl <string>

セッションの読み込み後、デジタルヒューマンの背景に表示される公開可能な背景画像のURLです。アニメーションプラットフォーム上で合成するため、背景画像を弊社宛にお送り頂いた後にURLを返送します。そのURLを設定する必要があります。

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

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

 

layoutMode <string>

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

デフォルト値:overlay

値:"overlay","splitScreen","fullScreen"

例:layoutMode: "fullScreen"

💡
コンテインドレイアウトモード(Contained Layout Mode) コンテインドレイアウトモードでは、idをuneeqContainedLayoutに設定したcontainer div要素をページに配置する必要がありますが、デジタルヒューマンはこのフレーム内に追加されます。これにより、デジタルヒューマンをウェブサイトのセクションに埋め込むことができ、より統合された体験を作成する事ができます。コンテナ要素をDOMから追加および削除すると、セッションが終了します。ただし、CSSを使用してページ内で要素を移動し、レスポンシブな体験を作成することができます。その場合、値には:”contained”を設定してください。
 
💡
下記の様なコードをHTMLファイルに埋め込むと同一セッションでダイナミックにビューを切り替えることができます。
 
⚠️
注意: スプリットスクリーンビューは、ページの要素の幅がウィンドウ幅の50%になるように調整されます。このため、CSS vw (view width) を使ってスタイルを設定している場合、予期しない結果になることがあります。
 
 

enableMicrophone <boolean>

trueの場合、セッションが開始されると同時に、ユーザーのマイクへのアクセスが要求されます(過去に承認/拒否していない場合)。

デフォルト値:false

例:enableMicrophone: true

 

showUserInputInterface <boolean>

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

デフォルト値:false

例:showUserInputInterface: true

 

textInputPlaceholder <string>

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

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

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

 

voiceInputMode <string>

プッシュ・トゥ・トーク(PTT)とボイス・アクティビティ認識(VAD)、どちらの音声入力方式を使用するかを決めます。プッシュ・トゥ・トークモードでは、ユーザーは画面上のボタンを押して音声の録音を開始・停止する必要があります。

ボイスアクティビティー認識モード(VAD)では、ユーザーはボタンを押すことなく、音声のボリュームを自動的に検知して録音を開始・停止します。展示会場や背景音が入るような場所ではPPTをご利用ください。

デフォルト値:"PUSH_TO_TALK"

値:"PUSH_TO_TALK","VOICE_ACTIVITY"

例:voiceInputMode: "VOICE_ACTIVITY"

⚠️
注意: Voice Activity入力モードはベータ版であり、変更される可能性があります。
 

autoStart <boolean>

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

デフォルト値:false

例:autoStart: true

⚠️
注意: autoStartを使用すると、デジタルヒューマンのオーディオがミュートされた状態でセッションが開始されることがあります。これは、Webブラウザの自動再生ポリシーにより、ユーザーが最初にページと対話しない限り、ページ上で音声が再生されないために起こります。 この場合、DigitalHumanPlayedInMutedModeSuccessというメッセージを受け取ります。 このメッセージを受信した場合、ユーザがページと対話した後に uneeqUnmuteDigitalHuman() を呼び出し、デジタルヒューマンのミュートを解除することができます。または、ユーザーがデジタルヒューマンのビデオをクリックして、ミュートを解除することもできます。
📍
重要: autoStartは便利ですが、ページ表示されたタイミングでデジタルヒューマンが呼び出されるため、セッションを大量に消費する可能性があり、利用金額が大きくなる事があります。 興味本位や不正アクセスでもセッションを消費しますので、認証ページ内などの対策を行った上で利用してください。
 

containedAutoLayout <boolean>

デフォルト値:false

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

 

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..."
        }
    }
}
お役に立ちましたか?
😞
😐
🤩

最終更新日 June 17, 2023