Integration Guide
Learn how to integrate Blocktell chatbots with popular platforms and frameworks. From simple embed codes to advanced API integrations.
Platform Integrations
WordPress
The world's most popular content management system
Integration Steps
- 1
Log into your WordPress admin dashboard
- 2
Navigate to Appearance → Theme Editor or use a plugin like 'Insert Headers and Footers'
- 3
Copy your Blocktell embed code from Settings → Embed tab
- 4
Paste the code before the closing </body> tag in your theme's footer.php
- 5
Save changes and test the widget on your live site
Pro Tips
- For better management, use a child theme to prevent updates from removing your code
- Consider using a header/footer plugin for easier maintenance
- Test across different pages and post types
Code Example
<!-- Add this to your WordPress footer.php -->
<?php wp_footer(); ?>
<script>
window.__blocktell = {
chatbot_id: "your-chatbot-id"
};
</script>
<script src="https://your-domain.com/widget.umd.js"></script>
</body>Shopify
E-commerce platform for online stores
Integration Steps
- 1
Go to your Shopify admin panel
- 2
Navigate to Online Store → Themes
- 3
Click 'Actions' → 'Edit code' for your current theme
- 4
Open the 'theme.liquid' file in the Layout folder
- 5
Find the closing </body> tag and paste your embed code above it
- 6
Save the file and preview your store
Pro Tips
- Use Shopify's color settings to match your store's theme
- Test the checkout process to ensure no conflicts
- Consider hiding the widget on checkout pages for better conversion
Code Example
<!-- Add this to theme.liquid before </body> -->
<script>
window.__blocktell = {
chatbot_id: "your-chatbot-id",
theme: {
primaryColor: "{{ settings.accent_color }}"
}
};
</script>
<script src="https://your-domain.com/widget.umd.js"></script>React/Next.js
Modern JavaScript frameworks
Integration Steps
- 1
Install the widget as a component or use the script tag approach
- 2
For Next.js, add the script to _document.js or use next/script
- 3
Create a custom hook for widget management (optional)
- 4
Handle client-side rendering and script loading
- 5
Test across different routes and page transitions
Pro Tips
- Use next/script for optimal loading performance
- Consider implementing a context provider for widget state
- Handle hydration carefully to avoid SSR/client mismatches
Code Example
// For Next.js - Add to _document.js
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script strategy="afterInteractive">
{`
window.__blocktell = {
chatbot_id: "your-chatbot-id"
};
`}
</Script>
<Script
src="https://your-domain.com/widget.umd.js"
strategy="afterInteractive"
/>
</body>
</Html>
)
}Custom HTML/Static Sites
Any website with HTML access
Integration Steps
- 1
Open your website's HTML file or template
- 2
Locate the closing </body> tag
- 3
Paste your Blocktell embed code above it
- 4
Save and upload the file to your server
- 5
Test the widget functionality
Pro Tips
- This is the simplest integration method
- Works with any static site generator (Jekyll, Hugo, etc.)
- Ensure HTTPS is enabled for security
Code Example
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Blocktell Widget -->
<script>
window.__blocktell = {
chatbot_id: "your-chatbot-id"
};
</script>
<script src="https://your-domain.com/widget.umd.js"></script>
</body>
</html>Advanced Integrations
API Integration
Programmatically interact with your chatbot
Send messages via REST API
Retrieve conversation history
Update chatbot settings dynamically
Access analytics and usage data
Live Chat Handoff
Seamlessly transfer conversations to human agents
Agent availability management
Real-time message relay
Session history preservation
Agent dashboard integration
Custom Authentication
Integrate with your user management system
Single sign-on (SSO) support
User context passing
Personalized responses
Access control management
Troubleshooting
Widget not appearing
Check that the script is loaded after the DOM
Verify the chatbot ID is correct
Ensure your domain is whitelisted in settings
Check browser console for JavaScript errors
Widget conflicts with existing scripts
Load Blocktell widget after other scripts
Check for CSS conflicts affecting positioning
Ensure no z-index issues with overlays
Test with browser developer tools
Slow loading performance
Use async loading with strategy='afterInteractive'
Preload the widget script with <link rel='preload'>
Optimize other scripts that may block rendering
Consider lazy loading for below-fold content
Need Integration Help?
Our team can help you implement custom integrations, troubleshoot issues, or optimize your widget performance for your specific use case.