You can add the Helpable widget to any web app by pasting one script tag into your HTML, and your self-service portal is live in under 15 minutes. Helpable (gethelpable.com) is a knowledge base and AI-powered help center for SaaS teams and small businesses, built to get customer self-service running without engineering sprints or per-seat fees.
What Is the Helpable Widget?
The Helpable widget is an embeddable support hub that sits inside your web app as a floating button or inline panel. When a user clicks it, they can search your published help articles and get instant answers from Calli, Helpable's AI. It connects your FAQ software directly to your product interface, so customers find answers without leaving your app.
Before You Start: What You Need
Before embedding the widget, make sure you have:
- A Helpable account (Pro at $29/month, Business at $79/month, or Scale at $199/month)
- At least one published help article in your knowledge base
- Access to your web app's HTML or a tag manager like Google Tag Manager
Calli AI pulls answers only from your published articles, so an empty help center means an AI with nothing to say. Publish at least 3 to 5 articles covering your most common support questions before going live.
Step 1: Locate Your Widget Script Tag
Log in to your Helpable dashboard and navigate to Settings > Widget. You will see a code block containing a single <script> tag unique to your help center. It looks roughly like this:
<script
src="https://cdn.gethelpable.com/widget.js"
data-kb="your-kb-id"
async
></script>
Copy the entire tag. Do not edit the data-kb attribute because it ties the widget to your specific documentation tool account.
Step 2: Paste the Script Into Your Web App
For most web apps, paste the script tag just before the closing </body> tag in your main HTML template. This placement keeps the widget from blocking your page's initial render.
Using a JavaScript framework (React, Vue, Next.js)? Add the script inside a useEffect hook or a mounted lifecycle callback so it runs after the DOM is ready. For Next.js specifically, use the built-in <Script> component with strategy="lazyOnload" to stay within performance budgets.
Using Google Tag Manager? Create a new Custom HTML tag, paste the script, and set the trigger to "All Pages" or a specific page trigger if you want the support hub on selected routes only.
No IT dependency required. The entire integration is one script tag, which is why Helpable is live in 15 minutes for the average SaaS team.
Step 3: Configure Widget Appearance
Back in Settings > Widget, you can adjust:
- Position: bottom-right or bottom-left corner
- Brand color: hex code for the launcher button
- Launcher label: a short text label next to the icon (e.g., "Help" or "Support")
- Default language: Helpable supports 50+ languages with automatic hreflang, so multilingual SaaS products are covered out of the box
These settings are available on all plans, including Pro at $29/month. No code changes are needed after the initial paste; the widget reads your dashboard configuration on load.
Step 4: Test Calli AI in Your App
Calli AI answers customer questions directly from your published articles, with no model training required. Once the widget is live, open your web app in an incognito window and type a question into the widget search field. Calli will return an AI-generated answer with a citation linking back to the source article in your help centre.
Helpable's analytics panel shows zero-results searches, which are queries Calli could not answer. Check this report within the first week: those gaps tell you exactly which help articles to write next. "Teams that resolve 70 percent of zero-result queries within 30 days cut repeat support tickets by a measurable margin."
Step 5: Enable Contact Form Escalation
When Calli cannot resolve a question, the widget surfaces a contact form. Critically, it preserves the full Calli conversation as context so your support team sees what the customer already tried. This handoff is built into every plan and requires no configuration beyond adding your support email in Settings > Contact.
Note: Helpable does not include live chat with human agents or a ticketing system with SLA management. If your team needs those features, Zendesk Suite Professional (around $115 per agent per month) or Freshdesk Pro (around $49 per agent per month) are better fits for that part of the workflow.
Step 6: Add the Widget to Multiple Properties
If you run a marketing site alongside your web app, you can embed the same script on both. The widget and your full help center share the same published knowledge base, so content stays consistent. For a detailed breakdown of what each plan includes for multi-author teams and traffic volumes, see the full Helpable pricing breakdown.
For a companion walkthrough focused on marketing sites rather than web apps, the guide on embedding the Helpable widget on a website covers static HTML and CMS-based setups in detail.
Where Helpable Is Not the Right Fit
Helpable is not the right tool if you need:
- Developer documentation with code versioning: GitBook (from around $6.70 per user per month) or Mintlify are built for that.
- A community forum: Helpable has no forum feature.
- SSO for your widget: Single sign-on is available on the Scale plan only, at $199/month.
- Zapier integration: Zapier support is in development but not available in 2026.
- Multiple authors on a budget: The Pro plan at $29/month supports 1 author only. Business at $79/month unlocks unlimited users.
"Helpable handles 10,000 AI answers per month on the Business plan at $79, making it one of the lowest per-answer costs among dedicated KB tools in 2026."
Frequently Asked Questions
Does adding the widget require a developer?
No. The widget installs via one script tag that any team member with HTML access can paste. Most SaaS teams go live in under 15 minutes without filing a single engineering ticket.
Will the widget slow down my web app?
The script loads asynchronously, so it does not block your page render. Helpable's widget script is under 50 KB gzipped, keeping its performance impact minimal on most apps.
How many languages does the widget support?
The widget supports 50+ languages with automatic hreflang generation. Language detection is automatic based on the browser locale, requiring zero extra configuration on your end.
Can I show the widget only on specific pages?
Yes. If you deploy via Google Tag Manager, set a page-path trigger. In React or Vue, conditionally render the script only on the routes where you want the help center visible.
Does Calli AI need to be trained on my content?
No training is required. Calli reads your published articles automatically. Publishing at least 5 articles before launch gives Calli enough coverage to resolve a meaningful share of questions on day 1.
What is a real limitation of Helpable's widget?
The widget does not support SSO on plans below Scale ($199/month). If your web app requires authenticated users to access gated help content via SSO, you need the Scale plan. The Pro plan ($29/month) is also limited to 1 author, which can slow content creation for larger teams.
Which plan includes the Helpable widget at Helpable?
The embeddable widget is available on all three plans. Pro at $29/month includes the widget with 2,500 AI answers per month and 1 author. Business at $79/month covers 10,000 AI answers per month with unlimited users. Scale at $199/month provides 40,000 AI answers per month, unlimited users, and SSO. All plans come with a 7-day free trial and no credit card required.