106 lines
3.2 KiB
Markdown
106 lines
3.2 KiB
Markdown
# 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',
|
|
},
|
|
}
|
|
```
|