docs: add embedding-in-websites docs (#129)
天魂
GitHub
parent
2d7c5ad024
commit
f18ef8e41c
|
|
@ -3,5 +3,6 @@
|
|||
For more detailed information, please refer to the following sections:
|
||||
|
||||
- [Launch Your Webapp Quickly](launch-your-webapp-quickly/)
|
||||
- [Embedding In Websites](embedding-in-websites.md)
|
||||
- [Developing with APIs](developing-with-apis.md)
|
||||
- [Based on Frontend Templates](based-on-frontend-templates.md)
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
# Embedding In Websites
|
||||
|
||||
Dify Apps can be embedded in websites using an iframe. This allows you to integrate your Dify App into your website, blog, or any other web page.
|
||||
|
||||
When use Dify Chatbot Bubble Button embed in your website, you can customize the button style, position, and other settings.
|
||||
|
||||
## Customizing the Dify Chatbot Bubble Button
|
||||
|
||||
The Dify Chatbot Bubble Button can be customized through the following configuration options:
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// Required, automatically generated by Dify
|
||||
token: 'YOUR_TOKEN',
|
||||
// Optional, default is false
|
||||
isDev: false,
|
||||
// Optional, when isDev is true, default is 'https://dev.udify.app', otherwise default is 'https://udify.app'
|
||||
baseUrl: 'YOUR_BASE_URL',
|
||||
// Optional, It can accept any valid HTMLElement attribute other than `id`, such as `style`, `className`, etc
|
||||
containerProps: {},
|
||||
// Optional, If or not the button is allowed to be dragged, default is `false`
|
||||
draggable: false,
|
||||
// Optional, The axis along which the button is allowed to be dragged, default is `both`, can be `x`, `y`, `both`
|
||||
dragAxis: 'both',
|
||||
}
|
||||
```
|
||||
|
||||
## Overriding Default Button Styles
|
||||
|
||||
You can override the default button style using CSS variables or the `containerProps` option. Apply these methods based on CSS specificity to achieve your desired customizations.
|
||||
|
||||
### 1.Modifying CSS Variables
|
||||
|
||||
The following CSS variables are supported for customization:
|
||||
|
||||
```css
|
||||
/* Button distance to bottom, default is `1rem` */
|
||||
--dify-chatbot-bubble-button-bottom
|
||||
|
||||
/* Button distance to right, default is `1rem` */
|
||||
--dify-chatbot-bubble-button-right
|
||||
|
||||
/* Button distance to left, default is `unset` */
|
||||
--dify-chatbot-bubble-button-left
|
||||
|
||||
/* Button distance to top, default is `unset` */
|
||||
--dify-chatbot-bubble-button-top
|
||||
|
||||
/* Button background color, default is `#155EEF` */
|
||||
--dify-chatbot-bubble-button-bg-color
|
||||
|
||||
/* Button width, default is `50px` */
|
||||
--dify-chatbot-bubble-button-width
|
||||
|
||||
/* Button height, default is `50px` */
|
||||
--dify-chatbot-bubble-button-height
|
||||
|
||||
/* Button border radius, default is `25px` */
|
||||
--dify-chatbot-bubble-button-border-radius
|
||||
|
||||
/* Button box shadow, default is `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
|
||||
--dify-chatbot-bubble-button-box-shadow
|
||||
|
||||
/* Button hover transform, default is `scale(1.1)` */
|
||||
--dify-chatbot-bubble-button-hover-transform
|
||||
```
|
||||
|
||||
To change the background color to #ABCDEF, add this CSS:
|
||||
|
||||
```css
|
||||
#dify-chatbot-bubble-button {
|
||||
--dify-chatbot-bubble-button-bg-color: #ABCDEF;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.Using `containerProps`
|
||||
|
||||
Set inline styles using the `style` attribute:
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... other configurations
|
||||
containerProps: {
|
||||
style: {
|
||||
backgroundColor: '#ABCDEF',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '30px',
|
||||
},
|
||||
// For minor style overrides, you can also use a string value for the `style` attribute:
|
||||
// style: 'background-color: #ABCDEF; width: 60px;',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Apply CSS classes using the `className` attribute:
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... other configurations
|
||||
containerProps: {
|
||||
className: 'dify-chatbot-bubble-button-custom my-custom-class',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
|
@ -4,6 +4,10 @@
|
|||
[迅速にウェブアプリを発表する](launch-your-webapp-quickly/)
|
||||
{% endcontent-ref %}
|
||||
|
||||
{% content-ref url="embedding-in-websites.md" %}
|
||||
[ウェブサイトに埋め込む](embedding-in-websites.md)
|
||||
{% endcontent-ref %}
|
||||
|
||||
{% content-ref url="developing-with-apis.md" %}
|
||||
[APIを使用した開発](developing-with-apis.md)
|
||||
{% endcontent-ref %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
# ウェブサイトへの埋め込み
|
||||
|
||||
Dify Apps は iframe を使用してウェブサイトに埋め込むことができます。これにより、Dify App をウェブサイト、ブログ、またはその他のウェブページに統合できます。
|
||||
|
||||
Dify Chatbot Bubble Button をウェブサイトに埋め込む際に、ボタンのスタイル、位置、その他の設定をカスタマイズできます。
|
||||
|
||||
## Dify Chatbot Bubble Button のカスタマイズ
|
||||
|
||||
Dify Chatbot Bubble Button は、以下の設定オプションでカスタマイズできます。
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// 必須：Dify によって自動的に生成されます
|
||||
token: 'YOUR_TOKEN',
|
||||
// オプション：デフォルトは false です
|
||||
isDev: false,
|
||||
// オプション：isDev が true の場合、デフォルトは '[https://dev.udify.app](https://dev.udify.app)'、それ以外の場合は '[https://udify.app](https://udify.app)' です
|
||||
baseUrl: 'YOUR_BASE_URL',
|
||||
// オプション：`id` 以外の有効な HTMLElement 属性（例：`style`、`className` など）を受け入れます
|
||||
containerProps: {},
|
||||
// オプション：ボタンのドラッグを許可するかどうか、デフォルトは `false` です
|
||||
draggable: false,
|
||||
// オプション：ボタンのドラッグを許可する軸、デフォルトは 'both'、'x'、'y'、'both' のいずれかを指定できます
|
||||
dragAxis: 'both',
|
||||
};
|
||||
```
|
||||
|
||||
## デフォルトのボタンスタイルの上書き
|
||||
|
||||
CSS 変数または `containerProps` オプションを使用して、デフォルトのボタンスタイルを上書きできます。CSSの優先度に基づいてこれらの方法を適用し、希望のカスタマイズを実現します。
|
||||
|
||||
### 1.CSS 変数の変更
|
||||
|
||||
以下の CSS 変数をカスタマイズに使用できます。
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.`containerProps` を使用する
|
||||
|
||||
`style` 属性を使用してインラインスタイルを設定します。
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... 他の設定
|
||||
containerProps: {
|
||||
style: {
|
||||
backgroundColor: '#ABCDEF',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '30px',
|
||||
},
|
||||
// ちょっとしたスタイル変更の場合、style 属性に文字列を使用することもできます。
|
||||
// style: 'background-color: #ABCDEF; width: 60px;',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
`className` 属性を使用して CSS クラスを適用します。
|
||||
|
||||
|
|
@ -4,6 +4,10 @@
|
|||
[launch-your-webapp-quickly](launch-your-webapp-quickly/)
|
||||
{% endcontent-ref %}
|
||||
|
||||
{% content-ref url="embedding-in-websites.md" %}
|
||||
[embedding-in-websites.md](embedding-in-websites.md)
|
||||
{% endcontent-ref %}
|
||||
|
||||
{% content-ref url="developing-with-apis.md" %}
|
||||
[developing-with-apis.md](developing-with-apis.md)
|
||||
{% endcontent-ref %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
# 嵌入网站
|
||||
|
||||
Dify 应用可以使用 iframe 嵌入到网站中。这允许你将 Dify 应用集成到你的网站、博客或任何其他网页中。
|
||||
|
||||
当你在网站中使用 Dify 聊天机器人气泡按钮时，你可以自定义按钮的样式、位置和其他设置。
|
||||
|
||||
## 自定义 Dify 聊天机器人气泡按钮
|
||||
|
||||
Dify 聊天机器人气泡按钮可以通过以下配置选项进行自定义：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// 必填项，由 Dify 自动生成
|
||||
token: 'YOUR_TOKEN',
|
||||
// 可选项，默认为 false
|
||||
isDev: false,
|
||||
// 可选项，当 isDev 为 true 时，默认为 '[https://dev.udify.app](https://dev.udify.app)'，否则默认为 '[https://udify.app](https://udify.app)'
|
||||
baseUrl: 'YOUR_BASE_URL',
|
||||
// 可选项，可以接受除 `id` 以外的任何有效的 HTMLElement 属性，例如 `style`、`className` 等
|
||||
containerProps: {},
|
||||
// 可选项，是否允许拖动按钮，默认为 `false`
|
||||
draggable: false,
|
||||
// 可选项，允许拖动按钮的轴，默认为 `both`，可以是 `x`、`y`、`both`
|
||||
dragAxis: 'both',
|
||||
};
|
||||
```
|
||||
|
||||
## 覆盖默认按钮样式
|
||||
|
||||
你可以使用 CSS 变量或 `containerProps` 选项来覆盖默认按钮样式。根据 CSS 优先级使用这些方法实现自定义样式。
|
||||
|
||||
### 1.修改 CSS 变量
|
||||
|
||||
支持以下 CSS 变量进行自定义：
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.使用 `containerProps` 选项
|
||||
|
||||
使用 `style` 属性设置内联样式：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... 其他配置
|
||||
containerProps: {
|
||||
style: {
|
||||
backgroundColor: '#ABCDEF',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '30px',
|
||||
},
|
||||
// 对于较小的样式覆盖，也可以使用字符串作为 `style` 属性的值：
|
||||
// style: 'background-color: #ABCDEF; width: 60px;',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
使用 `className` 属性应用 CSS 类：
|
||||
|
||||
```javascript
|
||||
window.difyChatbotConfig = {
|
||||
// ... 其他配置
|
||||
containerProps: {
|
||||
className: 'dify-chatbot-bubble-button-custom my-custom-class',
|
||||
},
|
||||
};
|
||||
```
|
||||
Loading…
Reference in New Issue