Chattrick Integration Guide
Last Updated: April 2025
Introduction
Welcome to the Chattrick Integration Guide! This document provides comprehensive instructions on how to integrate and customize the Chattrick chat widget into your website. Whether you're looking to add a simple chat bubble or implement a full-featured sidebar chat, this guide has you covered.
🚀 Quick Setup
Get Chattrick running on your site in less than 5 minutes with our simple integration process.
🎨 Customizable
Easily adjust the appearance and behavior to match your website's design and functionality needs.
💬 Multiple Formats
Choose from sidebar, chat bubble, or window formats to best suit your user experience goals.
Getting Started
To begin using Chattrick on your website, you'll need to include our script in the HTML of the page where you wish to have the Chattrick widget. This simple process requires just a few lines of code:
<script src="/bot-loader.js"></script>
<script>
window.chattrick.initialize({
botId: "YOUR_BOT_ID",
renderMode: "chat-bubble",
initialMessageIsSilent: false,
});
</script>Pro Tip
Place this code just before the closing </body> tag in your HTML for optimal performance. Replace YOUR_BOT_ID with the bot ID provided in your Chattrick dashboard.
Code Generator
Use this interactive tool to generate the exact code snippet you need for your website. Simply fill in the fields below and click "Generate Code" to get your customized Chattrick integration script.
Configure Your Integration
<!-- Chattrick Widget Integration -->
<script src="/bot-loader.js"></script>
<script>
window.chattrick.initialize({
botId: '',
renderMode: 'chat-bubble'
});
</script>
<!-- End Chattrick Widget Integration -->Configuration Options
Chattrick can be customized to match your website's design and functionality requirements. Here are the key configuration options:
| Option | Type | Default | Description |
|---|---|---|---|
botId | String | Required | Your unique bot ID from the dashboard |
position | String | "right" | Position of the chat bubble ("right", "left") |
renderMode | String | "default" | Render mode for the chat widget ("sidebar", "chat-bubble", "chat-window") |
initialMessageIsSilent | Boolean | false | Whether the initial message should be sent from user to start the conversation or not |
initialMessage | String | "" | The initial message to send to the bot |
Sidebar Integration
Chattrick can be rendered as a sidebar element, which allows you to integrate it into your website's existing UI. This is particularly useful for custom layouts or when you want to trigger the chat through specific user interactions.
<!-- Add a button to open the chat -->
<button id="open-chat">Open Chat</button>
<script src="/bot-loader.js"></script>
<script>
// Initialize Chattrick with sidebar rendering mode
window.chattrick.initialize({
botId: "YOUR_BOT_ID",
renderMode: "sidebar",
initialMessageIsSilent: true,
position: "right",
});
// Add event listener to open chat when button is clicked
document.getElementById("open-chat").addEventListener("click", () => {
window.chattrick.openChat();
});
</script>
Important Note
When using sidebar mode, you should always trigger the chat through user interactions by calling window.chattrick.openChat() in response to events like button clicks, navigation changes, or other user actions.
// Examples of different ways to trigger the chat
// Button click event
document.getElementById("support-button").addEventListener("click", () => {
window.chattrick.openChat();
});
// After page scroll
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
window.chattrick.openChat();
}
});
// After time delay
setTimeout(() => {
window.chattrick.openChat();
}, 30000); // Opens after 30 secondsChat Bubble Integration
The Chattrick chat bubble provides a seamless way to engage with your users without disrupting their browsing experience. Here's how to integrate the chat bubble into your website:
<script src="/bot-loader.js"></script>
<script>
window.chattrick.initialize({
botId: "YOUR_BOT_ID",
renderMode: "chat-bubble",
initialMessageIsSilent: false,
});
</script>
Chat Bubble Feature
Unlike the sidebar mode, with Chat Bubble integration you do not need to have a button that listens for events to open the chat. The chat bubble will always be visible at the bottom right corner of the screen, providing an always-accessible entry point for your users to start a conversation.
Chat Window Integration
The Chattrick chat window provides a comprehensive solution for engaging with users, covering the entire webpage. This integration is particularly beneficial for internal use cases, such as customer service, where a full-screen chat experience enhances communication.
<script src="/bot-loader.js"></script>
<script>
window.chattrick.initialize({
botId: "YOUR_BOT_ID",
renderMode: "chat-window",
initialMessageIsSilent: false,
});
</script>
Immersive Experience
In the Chat Window integration, the chat will take over the entire screen, providing an immersive experience for users. This is ideal for scenarios where detailed interactions are necessary, such as customer support or consultations.
Troubleshooting
Widget Not Appearing
Ensure your botId is correct and the script is loaded after the DOM is ready. Check that the window.chattrick.initialize function is called properly.
Styling Conflicts
Check for potential conflicts with Tailwind CSS styles that may affect the appearance of the chat widget. Ensure that your custom styles do not override the default styles of the chat boxes.
Performance Issues
If the widget affects your website's performance, load it asynchronously using the async attribute. Consider optimizing the loading of the script to improve user experience.
Browser Compatibility
Ensure compatibility across different browsers by testing your integration in Chrome, Firefox, Safari, and Edge. Report any browser-specific issues to our support team.
Support
Our team is ready to help with any questions or issues you might encounter when integrating Chattrick into your website.