docs: add embedding-in-websites docs (#129)

en/guides/application-publishing/README.md

@@ -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)

en/guides/application-publishing/embedding-in-websites.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',
+    },
+}
+```

jp/guides/application-publishing/README.md

@@ -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 %}

jp/guides/application-publishing/embedding-in-websites.md

@@ -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 クラスを適用します。
+

zh_CN/guides/application-publishing/README.md

@@ -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 %}

zh_CN/guides/application-publishing/embedding-in-websites.md

@@ -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',
+    },
+};
+```