Quick start
Setting up the Chat widget is very simple and the standard integration should only take a few lines of code.
- Visit https://cal.assembledhq.com/settings/chat?selectedTab=setup
- Copy the script tag under Installation on the page to your HTML header (make sure it’s available on whatever page you’d like the chat widget to appear). It will look like this:
<script
src="https://cal.assembledhq.com/static/js/public-chat.js"
data-company-id="YOUR_COMPANY_ID"
></script>
Installing chat for Zendesk Helpcenter
If you're hosting your support site on Zendesk Guide, you can very quickly add Assist for Chat. Here are the steps you can take:
- Go to the administrative portal for your Zendesk Guide settings https://[YOUR ZENDESK DOMAIN].zendesk.com/knowledge
- Next, find the "Customize design" icon on the navigation bar (the 4th icon from the top)
- Select the theme you'd like to edit (usually the theme that is live) and click "Customize"
- Once you're in the theme, click on "Edit code" in the bottom right corner of the screen
- If you can't find the "Edit code" button, you may need to upgrade to Guide Professional or Guide Enterprise (see Zendesk's help center documentation here).
- Go the "Templates > document_head.hbs" and add your Assist for Chat script tag into the document
- Click "Publish" to save the changes and enable Chat for your Help center
User authentication
User authentication enables you to link chat interactions to user accounts in your application and enhance the chat experience based on your user data. When authenticated, you can:
- Track user conversations in the Assembled admin dashboard
- Provide personalized responses based on user attributes (e.g. different types of responses from VIP users vs free users)
- Maintain conversation context across sessions
User data interface
Field | Type | Required | Description |
---|---|---|---|
email |
string | No | User's email address |
name |
string | No | User's display name |
metadata |
Record<string, unknown> | No | Additional user data as key-value pairs |
JWT token requirement
The JWT token must contain a single claim:
{
"user_id": "CURRENT_USER_ID"
}
To generate the token:
- Get your JWT secret from the Assembled dashboard
- Create a JWT token on your server using this secret
- Send the token to your frontend for authentication
Example token generation (Node.js):
const jwt = require('jsonwebtoken');
const secret = 'YOUR_JWT_SECRET'; // From Assembled dashboard
const token = jwt.sign(
{ user_id: 'user_123' }, // Required claim
secret,
);
Authentication
To authenticate a user, generate a JWT token from your server and pass this to your frontend so that you can securely identify a user:
// Full authentication
await chat.authenticateUser('YOUR_JWT_TOKEN', {
email: 'user@example.com',
name: 'John Doe',
metadata: {
plan: 'premium',
company: 'Acme Inc'
}
});
// Email only
await chat.authenticateUser('YOUR_JWT_TOKEN', {
email: 'user@example.com'
});
// Custom metadata only
await chat.authenticateUser('YOUR_JWT_TOKEN', {
metadata: {
userId: '12345',
preferences: { theme: 'dark', notifications: true },
tags: ['beta-user', 'enterprise'],
lastLogin: 1673891400000
}
});
Updating user data
Update authenticated user information as needed when new user information is available:
await chat.updateUserData({
name: 'John Smith',
metadata: {
plan: 'enterprise'
}
});
Technical requirements
- Modern browser support (IE11+)
- JavaScript enabled
Troubleshooting
Common issues and solutions:
-
Widget not appearing:
- Verify company ID is correct
- Check console for error messages
- Ensure script is loaded properly
-
Authentication failures:
- Verify JWT token is valid
- Check token expiration
- Ensure proper user data format
-
Style issues:
- Clear browser cache
- Check for CSS conflicts
- Verify custom style parameters
Support
For additional support, contact your Assist implementation manager on Slack or the Assembled support team (support@assembledhq.com).
Comments
0 comments
Please sign in to leave a comment.