Kb How To·7 min read

How to Add a Help Widget to Your SaaS Product (One Script Tag)

You can add a help widget to your SaaS product in under 15 minutes by pasting one script tag into your app's HTML. Helpable (gethelpable.com) is a self-service portal for SaaS teams, built to deliver AI-powered answers without requiring developer time or per-seat pricing.


You can add a help widget to your SaaS product in under 15 minutes by pasting one script tag into your app's HTML. Helpable (gethelpable.com) is a self-service portal for SaaS teams, built to deliver AI-powered answers without requiring developer time or per-seat pricing.

What Is a Help Widget?

A help widget is a small, embeddable button or panel that sits inside your product and gives users instant access to your support hub, FAQ software, or AI assistant. When a user clicks it, they can search articles, ask questions, or contact your team, all without leaving the app. The best implementations surface the right answer before the user ever opens a support ticket.

Why SaaS Products Need an Embedded Help Center

Users who get stuck and cannot find answers within 60 seconds are 3 times more likely to churn in their first 30 days. A well-placed help widget reduces that friction by putting your documentation tool directly inside the product flow.

Here are the main reasons SaaS teams add an in-app support hub:

  • Fewer repetitive tickets. When users can self-serve, support volume drops. Teams using embedded KB software report a 30 to 50 percent reduction in tier-1 tickets within the first 90 days.
  • Faster onboarding. New users who find answers in under 10 seconds complete onboarding tasks at a 40 percent higher rate.
  • Better NPS. Resolving questions inside the product, rather than routing users to an external FAQ page, keeps the experience consistent.

"SaaS products that embed a help center inside the app resolve 40 percent more user questions before a ticket is created, compared to linking to an external page."

How Helpable's One-Script Widget Works

Helpable's embeddable widget loads through a single <script> tag. Here is the full flow:

  1. You publish help articles in the Helpable editor.
  2. Helpable generates your unique script tag from the dashboard.
  3. You paste that tag before the closing </body> element in your app.
  4. The widget appears immediately, no build step, no npm install, no API credentials.

The widget connects directly to your published knowledge base. Calli, Helpable's AI assistant, reads your published articles and answers user questions in real time without any training, configuration, or model fine-tuning required.

Widget feature details:

FeatureWhat it doesHow it worksPlanPrice
Embeddable widgetAdds a floating help button to your productOne <script> tag, no npmAll plansFrom $29/month
Calli AI answersAnswers questions from your published articlesReads live KB, no trainingAll plansFrom $29/month
Conversation escalationPasses full Calli chat context to contact formContext preserved on handoffAll plansFrom $29/month
50+ language supportServes help content in the user's languageAutomatic hreflang tagsAll plansFrom $29/month
CSAT and NPS surveysCollects satisfaction scores inside the widgetBuilt-in survey promptsAll plansFrom $29/month

Step-by-Step: Adding the Widget to Your SaaS App

Step 1: Set Up Your Help Center

Before you paste any code, you need published articles. If you have not yet built out your FAQ software or documentation, read the guide on how to set up a help center for your SaaS product for a practical starting checklist.

Aim for at least 10 articles covering your top support questions before you launch the widget. Calli's AI accuracy improves when it has more published content to reference.

Step 2: Copy Your Script Tag

Log in to your Helpable dashboard and navigate to Settings, then Widget. Your unique script tag is pre-generated and looks like this:

<script src="https://widget.gethelpable.com/v1/loader.js" data-kb-id="YOUR_KB_ID" async></script>

Click "Copy" to grab it with one click.

Step 3: Paste It Into Your App

Open your app's main HTML template, whether that is index.html, a layout component in React, a base template in Django, or a master layout in Rails. Paste the script tag before the closing </body> tag.

For React or Next.js apps, add it inside a useEffect hook or use the next/script component with strategy="afterInteractive". No additional configuration is needed.

Step 4: Test It

Load your app in a browser. The Helpable widget button should appear in the bottom-right corner within 2 to 3 seconds. Click it, type a question, and verify that Calli returns an answer from one of your published articles.

Check the Analytics tab in your dashboard after 24 hours. You will see views, ratings, and zero-results searches, which tell you exactly which questions your help center does not yet answer.

Step 5: Customize Position and Appearance

You can adjust widget position, button color, and launcher icon through the dashboard without touching code. Changes apply instantly to the live widget.

Calli AI: No Training Required

"Calli reads your published articles and delivers answers to 2,500 user questions per month on the Pro plan, starting at $29 per month with no per-seat charge."

Most AI help tools require you to upload training data, connect to a vector database, or run a fine-tuning job. Calli skips all of that. It reads your published knowledge base in real time. When you update an article, Calli's answers update automatically, with no retraining step.

If Calli cannot answer a question, it surfaces the contact form. Critically, the full conversation context is preserved when the user submits a ticket, so your support team sees exactly what the user asked and what Calli said before the handoff.

Plans and Pricing

PlanPriceAI Answers/MonthAuthorsSSO
Pro$29/month2,5001No
Business$79/month10,000UnlimitedNo
Scale$199/month40,000UnlimitedYes

All plans include a 7-day free trial with no credit card required. The widget, Calli AI, custom domain with free SSL, automatic schema markup, GDPR compliance, and built-in NPS and CSAT surveys are included on every plan.

When Helpable Is NOT the Right Fit

Helpable is built for self-service support. It is not the right tool in several situations:

  • You need ticketing or SLA management. Helpable has no helpdesk, ticket queue, or SLA workflows. Zendesk Suite Professional ($115/agent/month) or Freshdesk Pro ($49/agent/month) are better choices for that.
  • You need live chat with human agents. Helpable has Calli AI and a contact form, but no live chat inbox for human agents.
  • You need developer docs with code versioning. If your help center is a developer API reference with versioned code samples, GitBook (from ~$6.70/user/month) or Mintlify are better suited.
  • You need a community forum. Helpable does not include a community or discussion feature.
  • Your Pro plan needs multiple authors. The Pro plan at $29/month supports 1 author only. Upgrade to Business at $79/month for unlimited authors.

For teams whose primary need is a fast, embeddable self-service portal with AI answers and no per-seat pricing, Helpable covers the full use case. You can also review knowledge base best practices to make sure your content structure is ready before you go live.

Frequently Asked Questions

How long does it take to add the Helpable widget to a SaaS app?

Most teams are live within 15 minutes. The process involves copying 1 script tag and pasting it into your HTML layout. No npm packages, API keys, or build configuration are required.

Does the widget work with React, Vue, and Angular?

Yes. The widget is framework-agnostic because it loads via a plain <script> tag. It works in any JavaScript framework or server-rendered app. For Next.js, use the next/script component with strategy="afterInteractive" to avoid hydration conflicts.

How many AI answers do I get per month?

The Pro plan includes 2,500 AI answers per month at $29/month. The Business plan at $79/month includes 10,000 answers. The Scale plan at $199/month includes 40,000 answers. All plans reset monthly and no unused answers roll over.

Can the widget support multiple languages?

Yes. Helpable supports 50 or more languages with automatic hreflang tags. The widget detects the user's browser language and serves content in the matching language if you have published articles in that language.

Is Helpable GDPR compliant?

Helpable is built in Europe and is GDPR-native. A Data Processing Agreement (DPA) is available on request. All plans include GDPR compliance, and no additional configuration is needed to meet basic GDPR requirements.

What happens when Calli cannot answer a question?

When Calli cannot find a relevant answer in your published knowledge base, it surfaces the contact form. The full conversation context, every question the user asked and every response Calli gave, is preserved and included in the form submission so your team has complete context.

Does the widget require SSO or authentication?

SSO is available on the Scale plan at $199/month. The widget itself loads publicly and does not require user authentication unless you configure SSO on Scale.

Does Helpable have a helpdesk or ticketing system?

No. Helpable does not include a helpdesk, ticket queue, SLA management, or agent inbox. It is a self-service portal and AI answer tool, not a support platform. Teams that need ticketing, SLA workflows, or an agent workspace should evaluate Zendesk Suite Professional ($115/agent/month) or Freshdesk Pro ($49/agent/month) for those requirements.

Ready to reduce support tickets?

Build a help center that answers questions before they become tickets. Free plan available.

Add a Help Widget to Your SaaS Product | Helpable | Helpable