すべてのカテゴリ
開発・設置
設置手順

設置手順

デジタルヒューマンをあなたのページに設置する方法はとても簡単です。私たちから提供するJavaScriptのコードスニペットを、あなたが所有するウェブサイトの<head> </head>セクション等に貼り付けて、コードスニペット内のいくつかのパラメータ情報を更新するだけです。技術や開発者である必要はありません 👍

 

何かサポートが必要な場合は、当社までご連絡ください。

設置手順

Platform 2.0（Platform 1.0から順次移行します）

デジタルヒューマン プラットフォーム2.0のアドミンパネルでペルソナにアクセスすると、右上隅に「Start Digital Human」というリンクが表示されます。

このリンクをクリックすると、デジタルヒューマンと対話できるテストページに移動します。

Notion image
 

「Advanced Options」をクリックして、デジタルヒューマンを表示させたいページに追加する必要があるJavaScriptのコードスニペットを設定してください。

Notion image
 

変更したいデフォルトオプションをすべて変更したら、「Launch」をクリックしてください。

「Start Digital Human」を選択してキャラクターと対話するか、「Add this to my own site」をクリックして、デジタルヒューマンを表示するためにウェブサイトに追加する必要があるJavaScriptを取得します。（ドメインをホワイトリストに追加するのを忘れないでください！）

Notion image
 

マニュアル オーバーライド

デフォルトでは、提供されるJavaScriptのコードスニペットを追加するだけで、所有および管理する任意のウェブサイトにデジタルヒューマンを埋め込むことができます。ユーザーが特定のアクションを起こすまでinit()関数の実行を遅延させるなど、JavaScriptの実行を手動で制御したい場合は、コード内でこの関数（例: window.uneeqInstance.init() またはUneqクラスをインスタンス化する方法）を呼び出すだけで済みます。

init() を手動で呼び出す場合、関数が呼び出される順序に特に注意してください。イベントリスナーは初期化の前に作成する必要があります。

console.log('Setting up UneeQ Event Listeners');
    eventManager.addHandler('UneeqMessage', async (event) => {
      await handleUneeqMessage(event); // 特定のイベントにリスナーをバインドする
    });

    await initializeUneeq(); // デジタルヒューマンを起動する
    console.log('UneeQ initialized');
 

Platform 1.0（2025年中に終息します）

1. コードスニペットをウェブサイトに貼り付ける

以下のコードスニペットをコピーして、ウェブサイトの<head>セクションの</head>タグを閉じる直前に貼り付けます。このコードには、以下のオプションのタグが含まれています。すべてのタグが必要なわけではありませんが、このスニペットで始めることができます。カスタマイズの全リストは、こちらでご覧いただけます。

📍
重要：PersonaShareIDはフリートライアルをはじめ、プランやご契約に合わせてカスタマーサクセス・チームから提供されます。 
<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に置き換えます。

📍
重要：PersonaShareIDはフリートライアルをはじめ、プランやご契約に合わせてカスタマーサクセス・チームから提供されます。 
<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. 独自ドメインに設置するには

⚠️
独自ドメインに設置する場合は、 安全な利用環境を守るための設定 が必要です。こちらから申請してください。
お役に立ちましたか？
😞
😐
🤩

最終更新日 February 1, 2025

ビューの種類 コード スニペットサンプル