mirror of
https://github.com/langgenius/dify-docs.git
synced 2026-03-27 13:28:32 +07:00
refactor: update embedding in websites guide (jp), add example
This commit is contained in:
tfia
@@ -2,154 +2,188 @@
|
||||
title: Webサイトへの埋め込み
|
||||
---
|
||||
|
||||
Dify は、AI アプリケーションをビジネスウェブサイトに埋め込むことをサポートしており、数分でビジネスデータを使用した公式サイトの AI カスタマーサービス、ビジネス知識の Q&A などのアプリケーションを構築できます。
|
||||
|
||||
Dify Apps は iframe を使用してWebサイトに埋め込むことができます。これにより、Dify App をWebサイト、ブログ、またはその他のウェブページに統合できます。
|
||||
AI アプリケーションをウェブサイトに埋め込む方法は 3 つあります：`<iframe>` タグ方式、`<script>` タグ方式、および Dify Chrome ブラウザ拡張機能のインストール方式です。
|
||||
|
||||
Dify Chatbot Bubble Button をWebサイトに埋め込む際に、ボタンのスタイル、位置、その他の設定をカスタマイズできます。
|
||||
WebApp カードの埋め込みボタンをクリックし、埋め込みコードをコピーして、サイトの目標位置に貼り付けます。
|
||||
|
||||
## Dify Chatbot Bubble Button のカスタマイズ
|
||||
## `<iframe>` タグ方式の使用
|
||||
|
||||
Dify Chatbot Bubble Button は、以下の設定オプションでカスタマイズできます。
|
||||
`<iframe>` コードを、AI アプリケーションを表示するウェブサイトのタグ（`<div>`、`<section>` など）にコピーします。
|
||||
|
||||
<Frame caption="埋め込みコードの例">
|
||||
<img src="https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/guides/application-publishing/1e2e8c9adc620f9d6b4ea157119e8659.png" alt="ウェブサイト埋め込みのコード例を表示" />
|
||||
</Frame>
|
||||
|
||||
## `<script>` タグ方式の使用
|
||||
|
||||
`<script>` コードをウェブサイトの `<head>` または `<body>` タグにコピーします。これにより、ウェブサイトに Dify チャットボットのバブルボタンが表示されます。
|
||||
|
||||
script コードを公式サイトの `<body>` に貼り付けると、公式サイトの AI ロボットが表示されます：
|
||||
|
||||
<Frame caption="埋め込み後の AI ロボット効果">
|
||||
<img src="https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/guides/application-publishing/f5a5e95e1120906669b3c1ad4e186dea.png" alt="ウェブサイトに埋め込まれた後の AI ロボット効果を表示" />
|
||||
</Frame>
|
||||
|
||||
## Dify Chrome ブラウザ拡張機能のインストール方式
|
||||
|
||||
プロンプトに従って、[Dify Chrome ブラウザ拡張機能](https://chromewebstore.google.com/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf)をインストールします。
|
||||
|
||||
## Dify チャットボットバブルボタンのカスタマイズ
|
||||
|
||||
ウェブサイトに Dify チャットボットバブルボタンを使用する場合（つまり、`<script>` タグ方式で AI アプリケーションをウェブサイトに埋め込む場合）、ボタンのスタイル、位置、その他の設定をカスタマイズできます。
|
||||
|
||||
Dify チャットボットバブルボタンは、以下の設定オプションでカスタマイズできます：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// 必須：Dify によって自動的に生成されます
|
||||
// 必須、Dify によって自動的に生成されます
|
||||
token: 'YOUR_TOKEN',
|
||||
// オプション：デフォルトは false です
|
||||
// オプション、デフォルトは false です
|
||||
isDev: false,
|
||||
// オプション：isDev が true の場合、デフォルトは '[https://dev.udify.app](https://dev.udify.app)'、それ以外の場合は '[https://udify.app](https://udify.app)' です
|
||||
// オプション、isDev が true の場合、デフォルトは 'https://dev.udify.app'、それ以外の場合は 'https://udify.app' です
|
||||
baseUrl: 'YOUR_BASE_URL',
|
||||
// オプション：`id` 以外の有効な HTMLElement 属性（例：`style`、`className` など）を受け入れます
|
||||
// オプション、`id` 以外の有効な HTMLElement 属性（例：`style`、`className` など）を受け入れます
|
||||
containerProps: {},
|
||||
// オプション：ボタンのドラッグを許可するかどうか、デフォルトは `false` です
|
||||
// オプション、ボタンのドラッグを許可するかどうか、デフォルトは `false` です
|
||||
draggable: false,
|
||||
// オプション：ボタンのドラッグを許可する軸、デフォルトは 'both'、'x'、'y'、'both' のいずれかを指定できます
|
||||
// オプション、ボタンのドラッグを許可する軸、デフォルトは `both`、`x`、`y`、`both` のいずれかを指定できます
|
||||
dragAxis: 'both',
|
||||
// オプション:dify チャットボットに設定されている入力オブジェクト
|
||||
// オプション、dify チャットボットに設定されている入力オブジェクト
|
||||
inputs: {
|
||||
// key は変数名です
|
||||
// 例:
|
||||
// キーは変数名です
|
||||
// 例：
|
||||
// name: "NAME"
|
||||
},
|
||||
// オプション：dify チャットボットに設定されているシステム変数
|
||||
// オプション、dify チャットボットに設定されているシステム変数
|
||||
systemVariables: {
|
||||
// 例:
|
||||
// 例：
|
||||
// user_id: 'USER_ID',
|
||||
// conversation_id: 'CONVERSATION_ID',
|
||||
},
|
||||
// オプション：dify チャットボットに設定されているユーザー情報変数
|
||||
// オプション、dify チャットボットに設定されているユーザー情報変数
|
||||
userVariables: {
|
||||
// 例:
|
||||
// 例：
|
||||
// avatar_url: 'AVATAR_URL',
|
||||
// name: 'NAME',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## デフォルトのボタンスタイルの上書き
|
||||
### デフォルトボタンスタイルの上書き
|
||||
|
||||
CSS 変数または `containerProps` オプションを使用して、デフォルトのボタンスタイルを上書きできます。CSSの優先度に基づいてこれらの方法を適用し、希望のカスタマイズを実現します。
|
||||
CSS 変数または `containerProps` オプションを使用して、CSS の優先度ルールに従ってデフォルトのボタンスタイルを上書きできます。
|
||||
|
||||
### 1.CSS 変数の変更
|
||||
* **CSS 変数の変更**
|
||||
|
||||
以下の CSS 変数をカスタマイズに使用できます。
|
||||
カスタマイズには以下の CSS 変数がサポートされています：
|
||||
|
||||
```css
|
||||
/* ボタンの下端からの距離、デフォルトは `1rem` */
|
||||
--dify-chatbot-bubble-button-bottom
|
||||
```css
|
||||
/* 下端からの距離、デフォルトは `1rem` */
|
||||
--dify-chatbot-bubble-button-bottom
|
||||
|
||||
/* 右端からの距離、デフォルトは `1rem` */
|
||||
--dify-chatbot-bubble-button-right
|
||||
|
||||
/* 左端からの距離、デフォルトは `unset` */
|
||||
--dify-chatbot-bubble-button-left
|
||||
|
||||
/* 上端からの距離、デフォルトは `unset` */
|
||||
--dify-chatbot-bubble-button-top
|
||||
|
||||
/* 背景色、デフォルトは `#155EEF` */
|
||||
--dify-chatbot-bubble-button-bg-color
|
||||
|
||||
/* 幅、デフォルトは `50px` */
|
||||
--dify-chatbot-bubble-button-width
|
||||
|
||||
/* 高さ、デフォルトは `50px` */
|
||||
--dify-chatbot-bubble-button-height
|
||||
|
||||
/* 角丸、デフォルトは `25px` */
|
||||
--dify-chatbot-bubble-button-border-radius
|
||||
|
||||
/* ボックスシャドウ、デフォルトは `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
|
||||
--dify-chatbot-bubble-button-box-shadow
|
||||
|
||||
/* ホバー時の変形、デフォルトは `scale(1.1)` */
|
||||
--dify-chatbot-bubble-button-hover-transform
|
||||
```
|
||||
|
||||
例えば、ボタンの背景色を #ABCDEF に変更するには、以下の CSS を追加します：
|
||||
|
||||
```css
|
||||
#dify-chatbot-bubble-button {
|
||||
--dify-chatbot-bubble-button-bg-color: #ABCDEF;
|
||||
}
|
||||
```
|
||||
|
||||
/* ボタンの右端からの距離、デフォルトは `1rem` */
|
||||
--dify-chatbot-bubble-button-right
|
||||
* **`containerProps` オプションの使用**
|
||||
|
||||
/* ボタンの左端からの距離、デフォルトは `unset` */
|
||||
--dify-chatbot-bubble-button-left
|
||||
|
||||
/* ボタンの上端からの距離、デフォルトは `unset` */
|
||||
--dify-chatbot-bubble-button-top
|
||||
|
||||
/* ボタンの背景色、デフォルトは `#155EEF` */
|
||||
--dify-chatbot-bubble-button-bg-color
|
||||
|
||||
/* ボタンの幅、デフォルトは `50px` */
|
||||
--dify-chatbot-bubble-button-width
|
||||
|
||||
/* ボタンの高さ、デフォルトは `50px` */
|
||||
--dify-chatbot-bubble-button-height
|
||||
|
||||
/* ボタンの角丸、デフォルトは `25px` */
|
||||
--dify-chatbot-bubble-button-border-radius
|
||||
|
||||
/* ボタンのボックスシャドウ、デフォルトは `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
|
||||
--dify-chatbot-bubble-button-box-shadow
|
||||
|
||||
/* ボタンホバー時の変形、デフォルトは `scale(1.1)` */
|
||||
--dify-chatbot-bubble-button-hover-transform
|
||||
```
|
||||
|
||||
例えば、ボタンの背景色を #ABCDEF に変更するには、次の CSS を追加します。
|
||||
|
||||
```css
|
||||
#dify-chatbot-bubble-button {
|
||||
--dify-chatbot-bubble-button-bg-color: #ABCDEF;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.`containerProps` を使用する
|
||||
|
||||
`style` 属性を使用してインラインスタイルを設定します。
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... 他の設定
|
||||
containerProps: {
|
||||
style: {
|
||||
backgroundColor: '#ABCDEF',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '30px',
|
||||
`style` 属性を使用してインラインスタイルを設定：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... 他の設定
|
||||
containerProps: {
|
||||
style: {
|
||||
backgroundColor: '#ABCDEF',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '30px',
|
||||
},
|
||||
// 軽微なスタイル変更の場合、`style` 属性の値として文字列も使用できます：
|
||||
// style: 'background-color: #ABCDEF; width: 60px;',
|
||||
},
|
||||
// ちょっとしたスタイル変更の場合、style 属性に文字列を使用することもできます。
|
||||
// style: 'background-color: #ABCDEF; width: 60px;',
|
||||
},
|
||||
};
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
`className` 属性を使用して CSS クラスを適用：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... 他の設定
|
||||
containerProps: {
|
||||
className: 'dify-chatbot-bubble-button-custom my-custom-class',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
`className` 属性を使用して CSS クラスを適用します:
|
||||
## 埋め込みウェブサイトのアプリケーションに `inputs` を渡す
|
||||
|
||||
埋め込んだ AI アプリケーションに初期入力を渡すことができます。4 種類の入力タイプがサポートされています：
|
||||
|
||||
1. **`text-input`**：任意の値を受け入れます。入力文字列の長さが許可される最大長を超える場合、切り詰められます。
|
||||
2. **`paragraph`**：`text-input` と同様に、任意の値を受け入れ、文字列の長さが最大長を超える場合は切り詰められます。
|
||||
3. **`number`**：数値または数値文字列を受け入れます。文字列が提供された場合、`Number` 関数を使用して数値に変換されます。
|
||||
4. **`options`**：事前に設定されたオプションのいずれかと一致する任意の値を受け入れます。
|
||||
|
||||
`<iframe>` タグ方式と `<script>` タグ方式で AI アプリケーションをウェブサイトに埋め込む場合、`inputs` を渡す方法も異なります。
|
||||
|
||||
以下では、変数名が `name`、値が `apple` の場合を例に説明します。
|
||||
|
||||
### `<iframe>` タグ方式の使用
|
||||
|
||||
AI アプリケーションが `<iframe>` タグ方式でウェブサイトに埋め込まれている場合、URL にパラメータを追加する方式で `inputs` を渡すことができます。
|
||||
|
||||
渡される変数の値を最初に GZIP で圧縮し、base64 でエンコードし、得られた base64 値を encodeURIComponent でエンコードしてから、URL に追加する必要があります。
|
||||
|
||||
例えば、変数名が `name`、値が `apple` の場合、まず `apple` を圧縮して base64 エンコード `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA==` を得て、次に encodeURIComponent でエンコードして `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D` を得ます。最終的な入力値 URL は次のようになります： `http://localhost/chatbot/{token}?name=H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D`。
|
||||
|
||||
### `<script>` タグ方式の使用
|
||||
|
||||
AI アプリケーションが `<script>` タグ方式でウェブサイトに埋め込まれている場合、前述の設定オプションを通じて `inputs` を渡すだけです。設定例：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... 他の設定
|
||||
containerProps: {
|
||||
className: 'dify-chatbot-bubble-button-custom my-custom-class',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 3. `inputs` の渡し方
|
||||
|
||||
サポートされている入力タイプは4種類あります：
|
||||
|
||||
1. **`text-input`**：任意の値を受け入れます。入力文字列の長さが許容される最大長を超える場合、切り詰められます。
|
||||
2. **`paragraph`**：`text-input` と同様に、任意の値を受け入れ、文字列が最大長を超える場合には切り詰められます。
|
||||
3. **`number`**：数値または数値の文字列を受け入れます。文字列が提供された場合、`Number` 関数を使用して数値に変換されます。
|
||||
4. **`options`**：事前に設定されたオプションのいずれかと一致する値を受け入れます。
|
||||
|
||||
設定例：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// 他の設定項目...
|
||||
inputs: {
|
||||
name: 'apple',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
注意: `embed.js` スクリプトを使用してiframeを作成する場合、各入力値はURLに追加される前にGZIPで圧縮され、base64でエンコードされます。
|
||||
|
||||
例えば、処理された入力値を含むURLは以下のようになります：
|
||||
`http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D`
|
||||
|
||||
{/*
|
||||
Contributing Section
|
||||
DO NOT edit this section!
|
||||
|
||||
Reference in New Issue
Block a user