Skip to main content

​
Overview

The Chat channel provides a customizable web chat widget that you can embed on your website. It enables real-time conversations with your visitors powered by your AI agent.

​
Features

Instant Responses

Your agent responds to visitors immediately, 24/7

Customizable Design

Match your brand with custom colors and styling

Human Takeover

Seamlessly take over conversations when needed

Rich Media

Support for images, links, and formatted text

​
Installing the Chat Widget

​
Basic Installation

Add the following code to your website, just before the closing </body> tag: 
<!-- Clarky Chat Widget -->
<script src="https://clarky.ai/embed/<bot-id>/chat.js"></script>
You can find your bot ID in Settings > Share in your Clarky dashboard.

​
Configuration Options

Customize the widget behavior with additional options: 
<script src="https://clarky.ai/embed/<bot-id>/chat.js"></script>

​
Advanced Integration

  • WordPress
  • Shopify
  • React/Next.js
  • Google Tag Manager
For WordPress sites:
1

Access Theme Editor

Go to Appearance > Theme Editor in your WordPress admin.
2

Edit Footer Template

Find and edit your footer.php file.
3

Add Code

Paste the Clarky embed code before the closing </body> tag.
4

Save Changes

Save the file and test your site.
Always create a backup before editing theme files.

​
Customizing Appearance

​
Colors and Branding

Customize your chat widget to match your brand:
1

Navigate to Interface Settings

Go to Settings > Interface in your dashboard.
2

Customize Colors

Configure:
  • Header Background: The color of the chat widget header
  • Header Text: The color of text in the header
  • Primary Color: Buttons and accents
  • Background: Chat background color
3

Upload Avatar

Add a custom avatar image that appears in the chat.
4

Save Changes

Changes apply immediately to your widget.

​
Greeting Message

Set a welcoming first message:
  1. Go to Settings > Interface
  2. Edit the Chat Greeting field
  3. This message appears when users open the chat
Example: 
👋 Hi there! I'm here to help. What can I assist you with today?

​
Starter Prompts

Add quick-click options for common questions: 
[
  "What are your business hours?",
  "Tell me about your services",
  "How can I contact you?",
  "I need help with an order"
]
Users can click these to start a conversation quickly.

​
Chat Widget Features

​
Real-Time Messaging

  • Instant delivery: Messages send and receive in real-time
  • Typing indicators: Show when the agent is typing
  • Read receipts: Know when messages are read
  • Message history: Conversations persist across sessions

​
Rich Content

Your agent can send various content types:
Standard text responses with formatting support (bold, italic, lists, etc.)
Product photos, diagrams, or helpful visuals.
Structured information like product cards or feature highlights.

​
Human Takeover

When a conversation needs human attention:
  1. You’ll receive a notification
  2. Click to join the conversation
  3. The user is notified a human has joined
  4. You can take over or assist the AI agent
The AI agent continues to suggest responses even during human takeover, helping you respond faster.

​
Best Practices

Place the chat widget where it’s visible but not intrusive. Bottom-right is most common, but bottom-left works well for RTL languages.
In your greeting, clearly state what the agent can help with. This prevents frustration and improves user experience.
Well-crafted starter prompts guide users toward topics your agent handles well and reduce confusion.
Review conversations regularly to identify areas where your agent struggles, then add knowledge to improve responses.
Always have a human agent available to take over when needed, especially during business hours.
Ensure your chat widget works well on mobile devices, as many users will access it from phones.

​
Testing Your Chat Widget

Before going live:
1

Test on Staging

If you have a staging or test site, deploy there first.
2

Try Different Scenarios

Ask various types of questions:
  • Common questions (hours, location)
  • Product inquiries
  • Support requests
  • Edge cases
3

Test on Multiple Devices

Check desktop, tablet, and mobile devices.
4

Verify Handoff

Test the human takeover feature to ensure smooth transitions.

​
Troubleshooting

If the widget doesn’t show:
  1. Verify the embed code is in the HTML
  2. Check browser console for JavaScript errors
  3. Ensure the bot ID is correct
  4. Clear browser cache and reload
If the widget looks wrong:
  1. Check for CSS conflicts with your site
  2. Verify custom colors are valid hex codes
  3. Try disabling site-wide CSS temporarily
If messages fail to send:
  1. Check your internet connection
  2. Verify the bot is active in Clarky dashboard
  3. Check browser console for errors

​
Analytics and Insights

Track chat widget performance:
  • Conversations started: How many users engage
  • Response time: How quickly the agent responds
  • Completion rate: Percentage of conversations resolved
  • Popular questions: Most common user inquiries
  • Handoff rate: How often human agents take over

View Analytics

Learn more about tracking your chat performance

​
Next Steps

Customize Interface

Match your brand with custom styling

Monitor Conversations

See what users are asking

Improve Knowledge

Enhance responses with better training

Enable Voice

Add phone support to complement chat