# コンテンツ：表示する

## **サポートするコンテンツ**

ホステッドエクスペリエンスは、デジタルヒューマン体験を充実させるために、HTMLコンテンツ表示機能を提供しています。

コンテンツの表示には、会話プラットフォームからのレスポンスに含まれるJSON形式の`displayHtml`を使用します。この機能では、チャットボットやLLMからの応答として送信される発話指示と同時にコンテンツを表示できます。

```jsx
{
    "instructions": {
        "displayHtml": {
            "html": "文字列化された html"
        }
    }
}
```

{% hint style="warning" %}
注意：htmlプロパティ内のコンテンツは文字列化されるため、ダブルクォーテーションはバックスラッシュ等でエスケープする必要があります。
{% endhint %}

または、`uneeqInstance.updateDisplayContent('文字列化された html')`メソッドを呼び出すことで、javascriptを使ってプログラムでコンテンツを表示することができます。

## **HTML & CSSコンテンツの表示**

HTMLとCSSは、htmlインストラクションに含めることができ、コンテンツ表示エリア内にレンダリングされます。`instructions`の生成には [コンテンツ：エディタ（コマンドエディタ）](/ops/experience/content-command-editor.md) をご利用ください。

```jsx
{
  "instructions": {
    "displayHtml": {
      "html": "<h3>コンテンツ表示サンプル</h3><p><br></p><p>以下はサンプルのリンクです：</p><p><a href=\"https://www.digitalhumans.jp/\" target=\"_blank\">デジタルヒューマン株式会社へのリンク</a></p><p><br></p><iframe frameborder=\"0\" allowfullscreen=\"true\" src=\"https://www.youtube.com/embed/NiswTIgGvN4\" style=\"width: 100%; height: 315px; max-width: 100%;\"></iframe><p>\nサンプルリスト：</p><ol><li>項目1</li><li>項目2</li><li>項目3</li></ol>"
    }
  }
}
```

上記の指示を送ると下記の様に表示されます。

フルビューでのコンテンツ表示例

![](/files/62bv0ffRJZxaI36uPYvl)

オーバーレイビューでのコンテンツ表示例

![](/files/dlwZeWeSVwU25Ek8sP2g)

## コンテンツレンダリングエリアで使用できるHTMLタグ

[こちらのページをご覧下さい。](/ops/experience/allowed-html-tags.md)

## 画面上のコンテンツを隠す

画面上のコンテンツを非表示にするには、2つの方法があります：

### プログラムによる方法

`uneeqInstance.updateDisplayContent(null)`メソッドを呼び出すことで、javascriptを使ってプログラムでコンテンツを非表示にすることができます。

### 会話応答

`hideContent:true`を指定して、NLPシステムからカスタム命令を送信します。

例

```jsx
{
  "instructions": {
    "hideContent": true
  }
}
```

## **Javascriptコンテンツ**

セキュリティ上の理由から、Javascriptを含むコマンド削除され、お客様のウェブサイト内およびコンテンツエリア内で実行されることはありません。ただし、例外として以下のメソッドは、onclickイベントの一部として安全に実行される場合があります。

```jsx
メソッド : chatPrompt
<button onclick="uneeqInstance.chatPrompt('質問 1','true')">質問 1</button>

メソッド : endSession
<button onclick="uneeqInstance.endSession()">セッション終了</button>

メソッド : setShowUserInputInterface
<button onclick="uneeqInstance.setShowUserInputInterface(true)">インプットを欄を表示</button>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digitalhumans.jp/ops/experience/displaying-content-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.