Website Integration

Embed AI chat functionality directly into your website using our iframe integration.

1

Get Your Embed Code

Find your unique embed code in your project settings. Each project has its own iframe code that connects to your specific documents and configurations.

Embed Code 
<iframe
    src="https://filebrain.pro/project/YOUR_PROJECT_ID/iframe"
    width="100%"
    height="600px"
    frameborder="0"
    allow="clipboard-write"
></iframe>
2

Customize Appearance

Customize the chat interface by adding URL parameters to your embed code:

Parameter Description Default Value
backgroundColor Page background color #ffffff
cardBackground Chat container background #fafafa
userMessageBg User message bubble color #e5e5e5
userMessageText User message text color #171717
aiMessageBg AI message bubble color #e5e5e5
aiMessageText AI message text color #171717
sendBtnColor Send button color #a855f7
sendBtnHoverColor Send button hover color #8b5cf6
chatHeader Chat window title Chat Assistant
welcomeMessage1 First welcome message Welcome to the Demo Chatbot!
welcomeMessage2 Second welcome message How can I help you today?
aiAvatarUrl Custom AI avatar image URL Default icon
3

Example Implementation

Here's an example of a customized chat interface:

Custom Chat Example 
<iframe
    src="https://filebrain.pro/project/YOUR_PROJECT_ID/iframe/?backgroundColor=%23111111&cardBackground=%23fafafa&userMessageBg=%23e5e5e5&welcomeMessage1=Hello!&welcomeMessage2=How%20can%20I%20help%20you%20today?&chatHeader=Custom%20Assistant"
    width="100%"
    height="600px"
    frameborder="0"
    allow="clipboard-write"
></iframe>

Best Practices

  • Use hex color codes for color parameters (e.g., %23ffffff for #ffffff)
  • URL encode special characters in messages (spaces become %20)
  • Test the chat on different screen sizes to ensure proper responsiveness
  • Consider using a floating button to toggle the chat interface

Need Help?

Having trouble with the integration? Our support team is here to help:

Contact Support