Widget Customization
Customize your Blocktell widget to match your brand and provide the best user experience. Configure appearance, behavior, and advanced features.
Customization Options
Appearance
Primary Color
Customize the main brand color for your widget
Setting: theme.primaryColor
#10b981 (Emerald Green)
Position
Choose where the widget appears on your website
Setting: theme.position
bottom-right, bottom-left, top-right, top-left
Border Radius
Adjust corner roundness for modern or classic look
Setting: theme.borderRadius
8px (rounded), 0px (square), 20px (very rounded)
Font Family
Match your website's typography
Setting: theme.fontFamily
Inter, Arial, system-ui
Behavior
Initial State
How the widget appears when page loads
Setting: behavior.initialState
closed (minimized), open (chat window visible)
Typing Indicator
Show when AI is processing response
Setting: behavior.showTypingIndicator
true (show dots), false (no indicator)
Sound Effects
Audio feedback for new messages
Setting: behavior.enableSounds
true (enable sounds), false (silent)
Maximum Height
Limit chat window size on smaller screens
Setting: behavior.maxHeight
400px, 80vh, 500px
Features
File Upload
Allow users to send documents and images
Setting: features.fileUpload
true (enable), false (disable)
Voice Input
Speech-to-text input capability
Setting: features.voiceInput
true (enable), false (disable)
Feedback Buttons
Thumbs up/down for response quality
Setting: features.feedbackButtons
true (show buttons), false (no feedback)
Embed Code Examples
Standard Embed (Recommended)
Simple script tag that works on any website
Pros:
- Easy to implement
- Automatic updates
- Mobile optimized
Considerations:
- Requires external script
<!-- Blocktell Chat Widget -->
<script>
window.__blocktell = {
chatbot_id: "your-chatbot-id",
theme: {
primaryColor: "#10b981",
position: "bottom-right"
}
};
</script>
<script src="https://your-domain.com/widget.umd.js"></script>Advanced Configuration
Full customization with all available options
Pros:
- Complete control
- Custom styling
- Advanced features
Considerations:
- More complex setup
<script>
window.__blocktell = {
chatbot_id: "your-chatbot-id",
theme: {
primaryColor: "#3b82f6",
position: "bottom-left",
fontFamily: "Inter, sans-serif",
borderRadius: "12px"
},
behavior: {
initialState: "closed",
showTypingIndicator: true,
enableSounds: false,
maxHeight: "80vh"
},
features: {
fileUpload: true,
voiceInput: false,
feedbackButtons: true
},
content: {
welcomeMessage: "👋 Hi! How can I help you today?",
placeholder: "Type your message..."
}
};
</script>
<script src="https://your-domain.com/widget.umd.js"></script>Testing & Deployment
Local Testing
Test your widget configuration before deployment
Create an HTML file with your embed code
Open in a web browser to preview
Test different screen sizes and orientations
Verify all customizations appear correctly
Staging Environment
Deploy to a test environment first
Add widget to staging/development site
Test with real content and user scenarios
Check performance impact on page load
Validate mobile responsiveness
Production Deployment
Go live with your customized widget
Deploy to production website
Monitor initial user interactions
Check analytics for engagement metrics
Gather user feedback for improvements
Device Compatibility
Desktop
Full feature set with hover states, larger chat area, and optimal performance
Mobile
Touch-optimized interface, full-screen chat mode, and gesture support
Accessibility
Screen reader compatible, keyboard navigation, and high contrast support