If you’re looking for more customizability and configuration of the chat widget, especially programmatically, Assembled provides more customized control.
Programmatic installation
For more control over initialization and configuration, you can create and manage the chat widget programmatically. Make sure to include programatic configuration in the script tag so that the chat widget does not open automatically:
<script
src="https://cal.assembledhq.com/static/js/public-chat.js"
data-company-id="YOUR_COMPANY_ID"
data-disable-auto-init="true"
></script>
Next, initialize the chat widget in javascript when you’d like to see the widget appear by invoking the async init
function like so:
// Initialize the chat widget separately
await window.assembled.init();
Configuration options
The chat widget can be configured with the following options:
Option | Type | Description |
---|---|---|
data-company-id |
string | Required. Your Assembled company identifier |
data-disable-auto-init |
boolean | When enabled, will prevent the chat widget launcher from appearing by default. |
data-activated |
boolean | Override the default activation state |
data-button-color |
string | Override the button color for the chat button. By default, the button color will be defined in the chat settings page. |
data-launcher-size |
string | Override the size of the chat widget launcher. Valid values are small , medium , large . By default, the launcher size will be defined in the chat settings page. |
data-icon-src |
string | Override the icon URL for the chat widget launcher. By default, the launcher size will be defined in the chat settings page. |
Widget control
Opening and closing
// Open the chat widget
chat.open();
// Close the chat widget
chat.close();
Checking widget status
const isReady = chat.isReady();
Cleanup
chat.teardown();
Activation management
The chat widget supports two modes of activation control:
- Server-Controlled Activation: By default, Assembled manages the activation state of the chat widget based on your settings in the Assembled dashboard.
-
Client-Side Override: You can override the server activation state by setting the
activated
option during initialization:
const chat = window.assembled.createAssembledChat({
companyId: 'YOUR_COMPANY_ID',
activated: true // Force activation regardless of server settings
});
Style customization
While we recommend using the default styles configured in your Assembled dashboard, you can override them for specific pages:
const chat = window.assembled.createAssembledChat({
companyId: 'YOUR_COMPANY_ID',
buttonColor: '#FF0000', // Custom button color
launcherSize: 'large', // Custom launcher size
iconSrc: 'https://your-domain.com/custom-icon.png' // Custom launcher icon
});
Mobile responsiveness
The chat widget automatically adjusts its layout for mobile devices (screens <= 480px width). On mobile:
- The widget expands to full screen
- The launcher position adjusts automatically
- Touch interactions are optimized for mobile use
Error handling
The chat widget includes built-in error handling and logging. Common errors will be logged to the console with the prefix [Assembled]
. We recommend monitoring these logs during implementation and testing.
Best practices
- Initialization: Always initialize the chat widget after the DOM is loaded
- Authentication: Implement user authentication early in your page lifecycle
-
Cleanup: Call
teardown()
when removing the widget from the page - Mobile: Test thoroughly on mobile devices
- Error Handling: Monitor console logs during implementation
Advanced usage
Event Handling
The chat widget dispatches custom events that you can listen for:
window.addEventListener('assembledload', () => {
console.log('Chat widget loaded and ready');
});
Integration with Single Page Applications (SPAs)
Use the teardown function to prevent memory leaks and degraded performance in your SPA.
// Cleanup
chat.teardown();
// Reinitialize
const newChat = window.assembled.createAssembledChat(options);
await newChat.init();
Comments
0 comments
Please sign in to leave a comment.