From f18ef8e41c2a5a9fdc558aede19c6fd701433575 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=A9=E9=AD=82?= <365125264@qq.com> Date: Mon, 1 Jul 2024 09:34:26 +0800 Subject: [PATCH] docs: add embedding-in-websites docs (#129) --- en/guides/application-publishing/README.md | 1 + .../embedding-in-websites.md | 105 ++++++++++++++++++ jp/guides/application-publishing/README.md | 4 + .../embedding-in-websites.md | 97 ++++++++++++++++ zh_CN/guides/application-publishing/README.md | 4 + .../embedding-in-websites.md | 105 ++++++++++++++++++ 6 files changed, 316 insertions(+) create mode 100644 en/guides/application-publishing/embedding-in-websites.md create mode 100644 jp/guides/application-publishing/embedding-in-websites.md create mode 100644 zh_CN/guides/application-publishing/embedding-in-websites.md diff --git a/en/guides/application-publishing/README.md b/en/guides/application-publishing/README.md index 2445e52..9e33f06 100644 --- a/en/guides/application-publishing/README.md +++ b/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) \ No newline at end of file diff --git a/en/guides/application-publishing/embedding-in-websites.md b/en/guides/application-publishing/embedding-in-websites.md new file mode 100644 index 0000000..47b4951 --- /dev/null +++ b/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', + }, +} +``` diff --git a/jp/guides/application-publishing/README.md b/jp/guides/application-publishing/README.md index 3acf1bf..b12e1cd 100644 --- a/jp/guides/application-publishing/README.md +++ b/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 %} diff --git a/jp/guides/application-publishing/embedding-in-websites.md b/jp/guides/application-publishing/embedding-in-websites.md new file mode 100644 index 0000000..9d288ab --- /dev/null +++ b/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 クラスを適用します。 + diff --git a/zh_CN/guides/application-publishing/README.md b/zh_CN/guides/application-publishing/README.md index afc1198..9f67492 100644 --- a/zh_CN/guides/application-publishing/README.md +++ b/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 %} diff --git a/zh_CN/guides/application-publishing/embedding-in-websites.md b/zh_CN/guides/application-publishing/embedding-in-websites.md new file mode 100644 index 0000000..1ae3ba5 --- /dev/null +++ b/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', + }, +}; +```