Back to Tutorials
Website Widget
Embed the ChatAsynq chat experience on your website so visitors can interact with your AI directly.
What the Widget Does
The Widget provides a conversation entry point directly on your website.
- Let visitors ask questions in real time.
- Automatically respond to frequently asked questions.
- Use your knowledge base to provide relevant responses.
How It Works
The Widget appears as a floating chat interface on your website.
- By default, a chat button appears in the bottom-right corner.
- Clicking the button opens the chat window.
- The chat window can be minimized when not in use.
On mobile devices, the chat interface automatically switches to a full-screen layout.
Install the Widget
You can copy the Widget embed code directly from your ChatAsynq settings.
- Go to Channel Settings.
- Find the Widget embed settings.
- Click to copy the embed code.
- Paste the code into your website.
We recommend placing the embed code near the end of the <body> element.
Widget Settings
You can customize several display settings:
- avatar-size: Chat button size (default: 60px).
- chat-width: Chat window width (default: 420px).
- chat-height: Chat window height (default: 560px).
- z-index: Display stacking level (default: 999).
Responsive Display
The Widget automatically adjusts its layout based on the visitor’s device.
- Desktop: Displays as a fixed-size chat window.
- Tablet: Adjusts the chat window height to fit the screen.
- Mobile: Displays as a full-screen chat interface.
Connect to Your Channel
The Widget connects directly to your ChatAsynq AI channel.
- Uses the specified channel-id.
- Applies the AI settings configured for that channel.
- Uses the same knowledge base connected to that channel.
Before Going Live
We recommend completing your channel setup before making the Widget available to visitors.
- Build your knowledge base first.
- Test and confirm that AI responses work as expected.
- Then make the Widget available to website visitors.
Example Use Case
While browsing products on your website, visitors can use the chat button in the bottom-right corner to ask questions. ChatAsynq can respond using your product information and knowledge base.
Recommendation
Because the Widget is a customer-facing conversation entry point, configure your AI settings and knowledge base before making it available to visitors.