Chat Widget
The HelpYap chat widget is a lightweight, embeddable support chat that works on any website. One script tag — no build step required.
How to Embed
Add this script tag to your website, just before the closing </body> tag. Replace your-slug with your project slug:
<script src="https://www.helpyap.com/widget.js" data-project="your-slug"></script>The script loads asynchronously and will not block your page from rendering. It's served from a global CDN for fast delivery.
Configuration
All configuration is managed in Project Settings in the admin dashboard. The widget automatically picks up your settings when it loads.
| Setting | Description |
|---|---|
| Brand Color | Primary color for the widget button and header |
| Position | Where the widget button appears on the page (bottom-right by default) |
| Avatar | Custom image for the bot's avatar |
| Welcome Message | First message displayed when the chat opens |
| Quick Replies | Suggested reply buttons shown below the welcome message |
| Greeting Bubble | Tooltip message shown on the floating button to encourage visitors to start a conversation |
| Pre-Chat Form | Require name and email before the chat starts |
How it Works
- Visitor opens the widget and types a message
- The AI generates a response using your project's knowledge base and configuration
- AI responses stream in real-time — visitors see the answer as it's being written
- If the AI can't resolve the issue, it escalates to your team via Slack or email
- Your agents can reply from the admin dashboard or directly from Slack — the visitor sees the reply in the widget
Conversations persist across page navigations and browser refreshes. If a visitor returns later, they see their previous conversation.
Mobile Support
On mobile devices, the widget expands to full-screen when opened. The input field stays visible when the keyboard is open, so visitors can type comfortably.
Style Isolation
The widget is fully isolated from your site's CSS. Your styles won't break the widget, and the widget won't affect your page. It works on any website regardless of your CSS framework.
Features
- File uploads: Visitors can share images, PDFs, and documents directly in the chat (max 10 MB)
- Conversation ratings: After a conversation is resolved, visitors can rate the interaction with thumbs up/down and optional feedback
- Email capture: When escalated, visitors are prompted to leave their email for follow-up
- Typing indicators: Visitors see when an agent is typing a reply