モーダルビュー
はじめましょう | Getting started
モーダルビューは、シングルページのWebアプリに追加できるコードスニペットで、デジタルヒューマンをオーバーレイ(重ねて表示)させることができます。このコードスニペットをシングルページのWebアプリに追加すると、既存のエクスペリエンスにデジタルヒューマンを重ねることができます。
例:スニペットが最初に読み込まれたときにユーザーに表示されるイメージを示しています。
例:透明な背景を有効にしてライブセッションを行っています。
会話の安全性を保つ | Keep your conversations secure
お客様が管理するドメインからのみデジタルヒューマンのセッションを開始できるようにするために、カスタマー・サクセス担当者にご連絡いただくか、support@digitalhumans.jp にメールして、デジタルヒューマンを埋め込むドメインをお知らせください。
ご利用のドメインがホワイトリストに登録されていることを確認し、お客様のデジタルヒューマンがお客様の同意なしに使用されないようにします。
例えば、URL https://
your-domain.com
/example/
のウェブページに埋め込みコードを挿入する場合は、ドメイン your-domain.com
をホワイトリストに登録する必要があります。
会話の安全性を確保するために、https://your-domain.com
以外の場所でデジタルヒューマンとのセッションを開始することはできません。
ウェブサイトにコードを埋め込む | Embedding your code into your website
ドメインがホワイトリストに登録されると、次の例のように、このコードスニペットを目的のウェブページの<head>
</head>
セクションに挿入することができるようになります。
<html> <head> <title>Your Website</title> <script> window.uneeqInteractionsOptions = { personaShareId: "ebsdw401-94ae-4088-8e3c-4283d9904972", enableTransparentBackground: true, callToActionText: "こんにちは。私はソフィーです。あなたのアプリケーションについて何か質問はありますか?", errorText: "申し訳ありません。現在、ご利用いただけません。時間をおいて再度アクセスしてみてください。", playWelcome: true } </script> <script src="https://hosted.us.uneeq.io/interactions/v1/deploy"> </script> </head> <body> Your website. </body> </html>
これにより、モーダルビューがシングルページのウェブアプリに読み込まれ、ペルソナのプレビューとコールトゥアクションのテキストボックスが表示されます。
複数ページのウェブサイト:モーダルビューは複数ページのWebサイトでも使用できますが、ページを移動するとセッションが終了してしまいます。
リージョンの選択 | Selecting your region
上記のコードスニペットでは、デジタルヒューマンがプロビジョニングされている地域のscript src
を指定する必要があります。どの地域を使用すべきか不明な場合は、カスタマー・サクセス担当者にお問い合わせください。
リージョン | URL |
North America | |
Europe | |
Asia | |
Oceania |
モーダル表示の設定 | Configuring Modal view
このコードスニペットには、以下のプロパティが含まれています。
プロバティ | 詳細 | 例 |
personaShareId | あなたのペルソナの公開IDです。カスタマーサクセスの担当者が提供してくれます。
UneeQ Creator にアクセスしている場合、Try モードでペルソナと会話する際に URL に表示される GUID です。 | ebsdw401-94ae-4088-8e3c-4283d9904972 |
enableTransparentBackground | オプションのboolean値です。trueの場合、ペルソナは透明な背景で表示されます。
falseの場合、ペルソナは設定された背景画像を使用します。ペルソナのプレビューは、デフォルトのグレーの背景で表示されます。プレビューの背景のスタイルはカスタマイズできます。
詳しくは、以下の「カスタムスタイル」のセクションを参照してください。 | true |
callToActionText | 任意の文字列です。最大110文字です。
指定すると、モーダルビューが最初に読み込まれたときに、このテキストがコールトゥアクションのテキストボックスでユーザーに表示されます。
このテキストボックスにアクセスすると、ペルソナとのセッションが開始されます。提供されていない場合は、行動喚起のテキストボックスなしでペルソナのプレビューが表示されます。 | "こんにちは。私はソフィーです。あなたのアプリケーションについて何か質問はありますか?" |
errorText | 任意の文字列です。最大110文字です。
指定すると、ペルソナが利用できない場合に、このテキストがエラーテキストボックスでユーザーに表示されます。
指定しない場合、このシナリオではユーザーにエラー テキストは表示されません。また、このシナリオのUXを適切に管理するために、セッション状態のメッセージを監視することができます。 | "申し訳ありません。現在、ご利用いただけません。時間をおいて再度アクセスしてみてください。" |
playWelcome | オプションのboolean値です。
trueの場合、ユーザーがセッションを開始する際に、設定したウェルカムインテントを自動的に話すよう、ペルソナの会話プラットフォームに指示を送ります。
falseの場合は、ユーザーがセッションを開始したときに指示は送信されません。 | true |
customStyles | 任意の文字列です。
指定された場合、デフォルトのインタラクション要素が指示に応じてスタイリングされます。詳細については、
以下のカスタムスタイリングのセクションを参照してください。指定されていない場合は、デフォルトのスタイリングが使用されます。 | 以下のカスタムスタイリングをご覧下さい |
カスタムスタイリング | Custom styling
コードスニペットのcustomStyles
プロパティを使って、インタラクション要素のデフォルトのスタイリングを変更することができます。簡単に変更できるように、主要な要素には個別のIDが割り当てられています。
キーエレメント | 詳細 |
#cta-text | Call-to-action テキストボックス |
#error-text | Error テキストボックス |
#session-loading | セッションローディングアニメーションボックス |
#content | レスポンス用のサポーティングコンテンツエリア |
例:
customStyles: " @import url('https: //fonts.googleapis.com/css2?family=Nunito&display=swap'); h1 { font-family: 'Nunito', sans-serif; } #cta-text { background-color: blue; color: white; } #cta-text:after { border-left-color: blue; } #content { background-color: light-grey; } .cta-section .cta-preview-img { background: radial-gradient(50% 50% at 50% 50%,red 0,pink 100%) !important; } "
注意 :カスタムスタイル内で二重引用符を使用する場合は、必ずエスケープするか、一重引用符を使用してください。×警告を閉じる
デジタルヒューマンとの会話 | Digital Human interaction
モーダルビューでは、既存のエンドユーザー(サービスの利用者)の違和感を軽減するように最適化されているため、デジタルヒューマンの音声は、エンドユーザーからの音声入力ではなく、あなたやあなたのエクスペリエンスに対するユーザーのインタラクションによって動作します。
デジタルヒューマンをしゃべらせる | Making your Digital Human speak
uneeqAsk
メソッドは、デジタルヒューマンがエンドユーザーに語りかけるために、ユーザーのアクションやその他のトリガーに応じて、ペルソナの会話プラットフォームに意図を伝えることができます。この例では、基本的なハイパーリンクを使ってuneeqAsk
を起動しています。
例:
<a href="javascript: uneeqAsk('希望するインテント名')">ユーザーがこのリンクをクリックすると</a>
Copy
NLP等の会話プラットフォームは、このインテント(上記の例では「希望するインテント名」が送信されます)を照合し、このインテントに対して定義されたレスポンスを返し、それをデジタルヒューマンが話します。
uneeqAsk
は、セッションの状態がLiveでない限り無視されます。状態の詳細については、後述の「セッションの状態に関するメッセージ」を参照してください。
補助コンテンツ | Supporting content
モーダルビューを使うと、デジタルヒューマンの音声に合わせて、補助用のHTMLコンテンツをエンドユーザーに表示することができます。このコンテンツは、displayHTML
プラットフォーム命令を通じて、マッチしたインテントレスポンスで提供されなければなりません。Dialogflow ESとLexでの提供方法の例をご覧いただけます。
{ "instructions": { "displayHtml": { "html": "an html string" } } }
Copy
html
プロパティ内のコンテンツは文字列化されるため、バックスラッシュ\等でこのコンテンツをエスケープする必要があります。
レスポンスに付随するサポートコンテンツは、ユーザーがサポートコンテンツボックスを最小化するまで、または別のインテントレスポンスによって新しいサポートコンテンツに置き換えられるまで、ユーザーに表示され続けます。
Display HTMLのインラインスタイリング | Display HTML inline styling
CSSは、サポートするコンテンツにスタイリングを適用したい場合、displayHTML
命令に含めることができます。
{ "instructions": { "displayHtml": { "html": "<h1 style='color: rgb(255, 165, 0)'>Example Content</h1><p>This is some example content. Here is an example link:</p><a href='http://uneeq.com' target='_blank'>Link</a><p>Example list:</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>" } } }
CTAテキストの更新 | Updating CTA text
uneeqSetCallToActionText
メソッドを使用して、ユーザーに新しいcall-to-actionテキストボックスを提示することができます。これは、ユーザーアクションに付随するコンテキスト固有のコールトゥアクションや、その他のトリガーを提供するのに便利です。
uneeqSetCallToActionText('このステップは難しいですね。お手伝いできることがあれば教えてください。')
セッションの終了 | Ending a session
ユーザーがデジタルヒューマンのセッションウィンドウを閉じると、ユーザーの帯域幅を節約するためにセッションは一時停止しますが、ユーザーが体験の後半でCTAに関与した場合にデジタルヒューマンがすぐに利用できるように、セッションはライブのままとなります。
uneeqEndSession
メソッドは、セッションを終了させる方法を提供します。そうしないと、ユーザーがシングルページアプリからナビゲートしたとき、ブラウザを閉じたとき、または30分後にタイムアウトしたときに、デフォルトでセッションが終了してしまいます。
セッションの状態 | Session states
セッションがライブであるかどうか、またセッションの状態を示すメッセージがコンソールに表示されます。live
イベント属性は、現在ライブ状態にあるアクティブなセッションがあるかどうかを示すboolean値です。state
イベント属性は、モーダル・ビューの現在の状態を示します。
AppState | 詳細 |
Initial | モーダルビューが読み込まれ、エンドユーザーに表示されています。 |
WaitingToStart | エンドユーザーがセッションを開始するために、CTAテキストウィンドウまたはデジタルヒューマンのプレビュー画像をクリックしました。 |
AvatarUnavailable | あなたのペルソナが利用できません。セッションを開始することができません。 |
MajorError | 重大なエラーが発生したため、セッションの開始や継続ができません。 |
Live | セッションはアクティブで、拡張されたセッション ウィンドウでデジタル ヒューマンがエンド ユーザーに提示されています。 |
Paused | エンドユーザーが拡張セッションウィンドウを閉じ、デジタルヒューマンのプレビュー画像を表示しています。セッションはまだ有効です。 |
Ended | セッションが終了しました。 |
例:
event: uneeqSessionStateUpdate
eventAttributes: {
detail: {
live: false
state: Initial
}
}
// Global variables:
uneeqSessionLive: false
uneeqState: Initial
// Example JS Event Handler:
window.addEventListener( 'uneeqSessionStateUpdate', (event) => {
console.log('UneeQ session state updated: ', event.detail);
}
コンテンツのセキュリティポリシー | Content security policy
コンテンツセキュリティポリシーがある場合は、Referrer-Policy strict-origin-when-cross-origin
を追加する必要があります。これにより、ウェブサイトはページのリファラーをUneeQフレームに渡して検証することができます。
サポートしているブラウザー| Browser support
モーダルビューは、Windows 10とMacOS(High Sierra以降)のChrome、MacOSのSafariに対応しています。
また、モバイルブラウザでは、AndroidのChrome(6.0以上)とiOSのSafari(11以上)に対応しています。
なお、モーダルビューは現在、モバイル向けに最適化されていません。ブラウザのサポートは、特に明記されていない限り、指定されたOSの最新バージョンで動作する様に開発しております。
透過背景のサポート
2021年9月20日にSafari 15がリリースされました。このリリースの一環として、Safariが透明な背景に対する当社のアプローチをサポートしなくなったことが判明しました。この問題を解決するために、すべてのSafariユーザーに自動的に非透過モードを表示するようにしました。この変更を有効にするためにお客様が操作する必要はありません。
Creator Platformを使用している場合、ペルソナ作成時に選択した背景画像がSafariユーザーに表示されます。また、背景画像をご提供いただいていない場合は、真っ黒な背景が表示されます。
今後のSafariのリリースでこの問題が解決されるかどうか、引き続き追いかけていきます。
最終更新日 January 1, 2020