設置手順
デジタルヒューマンをあなたのページに設置する方法はとても簡単です。私たちから提供するコードスニペットを、あなたが所有するウェブサイトの<head> </head>
セクション等に貼り付けて、コードスニペット内のいくつかのパラメータ情報を更新するだけです。技術や開発者である必要はありません 👍
何かサポートが必要な場合は、当社までご連絡ください。
設置手順
1. コードスニペットをウェブサイトに貼り付ける
以下のコードスニペットをコピーして、ウェブサイトの<head>
セクションの</head>
タグを閉じる直前に貼り付けます。このコードには、以下のオプションのタグが含まれています。すべてのタグが必要なわけではありませんが、このスニペットで始めることができます。カスタマイズの全リストは、こちらでご覧いただけます。
エクスペリエンスのカスタマイズ
<script> window.uneeqInteractionsOptions = { personaShareId: "ここにペルソナのShare IDを入れる", layoutMode: 'fullScreen', showUserInputInterface: true, displayCallToAction: true, enableMicrophone: true } </script> <script src="2.のリージョンURLを入れる"></script>
2. リージョンの選択
ウェブサイトに貼り付けたコードスニペットから、“2.のリージョンURLを入れる”を、あなたのデジタルヒューマンがプロビジョニングされた地域に対応する地域URLに置き換えてください。
プロビジョニングされているリージョンがわからない場合はお問い合わせください。
日本のお客様の場合は、特別に契約がない場合は主にNorth Americaにプロビジョニングされています。
Region | Region URL |
North America | https://hosted.us.uneeq.io/interactions/v1/deploy |
Europe | https://hosted.eu.uneeq.io/interactions/v1/deploy |
Oceania | https://hosted.au.uneeq.io/interactions/v1/deploy |
Frankfurt | https://hosted.de.uneeq.io/interactions/v1/deploy |
Japan | 準備中 |
North American リージョンの例:
<script> window.uneeqInteractionsOptions = { personaShareId: "ここにペルソナのShare IDを入れる" } </script> <script src="https://hosted.us.uneeq.io/interactions/v1/deploy"></script>
3. ペルソナShareIDを更新する
貼り付けたコードから、ENTER-PERSONA-SHARE-ID-HEREを自分のペルソナ共有IDに置き換えます。
<html> <head> <title>デモ WEBサイト</title> <script> window.uneeqInteractionsOptions = { personaShareId: "ebsdw401-94ae-4088-8e3c-4283d9904972" } </script> <script src="https://hosted.us.uneeq.io/interactions/v1/deploy"></script> </head> <body> デモ WEBサイトコンテンツ </body> </html>
フルHTMLテンプレート
下記をコピーしてindex.html等のファイルに貼り付け、そのファイルをウェブサーバーやウェブホスティング設定を有効にしたAWS S3バケットにプッシュすれば、すぐにデジタルヒューマンが動作するライブウェブサイトを持つことができます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>デジタルヒューマンデモWEBサイト</title> <link rel="stylesheet" href="https://cf-assets.digitalhumans.com/sample-site/style.css"> <link rel="icon" href="https://cf-assets.digitalhumans.com/sample-site/favicon.ico" type="image/x-icon"> <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> </head> <body> <main class="flex-container"> <p class="flex-item banner-text">Digital Humans!</h1> <p class="flex-item"></p> </main> </body> </html>
4. 独自ドメインに設置するには
最終更新日 June 17, 2023