How to use Hugo Widget Tools to guide customers inside your product
This article explains how Hugo Widget Tools help your AI Agent guide customers inside your product during support conversations.
When customers contact support, they often need more than a written answer. They may need help finding the right feature, opening the right page, completing a setup step, applying a discount, or understanding what is happening in their account.
Widget Tools let Hugo turn a support conversation into a guided product experience. Instead of only explaining what the customer should do, Hugo can trigger contextual actions directly inside your website or web app from the Crisp chatbox.
For example, Hugo can open a feature page, show an upgrade flow, apply a discount code, retrieve cart information, or guide a customer through an onboarding step.
Widget Tools are designed for product and support teams that want Hugo to help customers move forward faster, while developers handle the technical setup with the Crisp Widget JS SDK.
What are Hugo Widget Tools?
Hugo Widget Tools let your AI Agent guide customers by triggering actions directly inside your website or web app.
They work from the Crisp chatbox during a live visitor conversation. When Hugo understands that a customer needs help inside your product, it can call a Widget Tool to perform a contextual action in the visitor’s browser.
This is useful when a support conversation requires more than a written answer.
With Widget Tools, Hugo can help customers:
- Find the right feature or page
- Open a setup or onboarding step
- Show an upgrade flow or product tour
- Apply a discount code
- Retrieve cart, account, plan, or workspace information
- Complete an action directly from your website
In other words, Widget Tools help Hugo act as a guided support assistant inside your product.
Why use Widget Tools for customer support?
Most support conversations are not only about answering questions. They are about helping customers reach the next step.
Without Widget Tools, Hugo can explain what the customer should do.
With Widget Tools, Hugo can help the customer do it.
This can be useful when you want to:
- Reduce back-and-forth between customers and your support team
- Help customers find the right feature faster
- Guide users through onboarding or setup steps
- Create AI-powered product tours from support conversations
- Help customers complete simple actions without waiting for a human
- Improve self-service by making answers more actionable
For example, instead of replying “Go to Settings, then Billing, then Upgrade”, Hugo can open the right upgrade flow directly from the conversation.
Use Widget Tools to guide customers during support conversations
Widget Tools are useful when Hugo needs to interact with your website or web app during a live conversation.
They are especially relevant when the customer is already logged in, browsing your product, or trying to complete an action in your interface.
Common support use cases
Support use case | What Hugo can do |
|---|---|
Customer is lost in the product | Open the right feature, page, or setting |
Customer needs onboarding help | Guide them through the next setup step |
Customer reaches a product limit | Show the right upgrade flow or explain the next option |
Customer asks about their cart | Retrieve cart information and help them continue |
Customer needs account context | Read available plan, workspace, or session information |
Customer asks how to complete an action | Trigger the right product flow instead of only explaining it |
Customer needs a discount | Apply a coupon or promotional code from the chat |
For example, if a customer asks “How can I upgrade my plan?”, Hugo can detect the intent, trigger a Widget Tool, and open the right upgrade flow inside your product.
If a customer asks “What is in my cart?”, Hugo can call a Widget Tool that reads the cart from the browser and use that result to answer.
Widget Tools are most useful when a customer support answer needs to become a guided product action.
Examples of good Widget Tool use cases
Widget Tools work best when the action is simple, contextual, and directly useful to the customer.
✔ Guide users to a feature
A customer asks how to invite teammates. Hugo can trigger a Widget Tool that opens the right settings page in your app.
✔ Show an upgrade flow
A customer reaches a usage limit. Hugo can trigger a Widget Tool that opens the right upgrade modal or pricing step.
✔ Create an AI product tour
A customer asks how to set up a feature. Hugo can trigger a Widget Tool that opens the right page and guides them through the next step.
✔ Apply a discount
A customer asks whether a discount is available. Hugo can trigger a Widget Tool that applies a coupon code to the current checkout session.
✔ Read contextual information
A customer asks what is in their cart. Hugo can trigger a Widget Tool that reads the cart from the browser and uses the returned information to answer.
The goal is not only to automate replies. The goal is to help customers complete tasks inside your product with less friction.
Widget Tools vs MCP Server
Widget Tools and MCP Server both help Hugo take action, but they are designed for different situations.
Feature | Best used for |
|---|---|
Widget Tools | Actions that happen inside the visitor’s browser or web app |
MCP Server | Actions that require backend systems, private databases, or server-side APIs |
Use Widget Tools when the action can run from the frontend, using the visitor’s current browser session.
Use MCP Server when Hugo needs to securely call your backend, access internal systems, or perform server-side operations.
Example
If Hugo needs to open a product page, show a modal, start a product tour, or apply a coupon already handled by your frontend, Widget Tools are usually the right fit.
If Hugo needs to check a subscription status, update an order, issue a refund, or query a private database, an MCP Server is usually more appropriate.
How Widget Tools work
At a high level, Widget Tools connect Hugo to actions available in your website or web app.
They are made of two parts:
Part | Role |
|---|---|
Tool definition | Defines what Hugo can call and when it should use it |
Frontend handler | Runs the action on your website when Hugo calls the tool |
When a visitor talks to Hugo from the Crisp chatbox:
- Hugo understands that a guided action may help the customer
- Hugo calls the relevant Widget Tool
- Your website runs the matching frontend handler
- The result is sent back to Hugo
- Hugo continues the conversation using that result
This makes it possible to create guided, contextual support experiences directly inside your product.
Set up Widget Tools
Widget Tools are configured from your Hugo setup in Crisp.
Go to AI Agent → Automate → Integrations & MCP → Widget Tools to create and manage your tools.
Each Widget Tool should include:
- A clear name → what the tool does
- A description → when Hugo should use it
- Actions and parameters → what information Hugo can pass to your website
Once the tool is defined in Crisp, a developer needs to implement the matching frontend handler on your website using the Crisp Widget JS SDK.
For the full technical setup, read the developer guide: Hugo Widget Tools documentation
Best practices
To get reliable results, keep your Widget Tools focused on clear customer support outcomes.
Good practices include:
- Start from common support questions or onboarding blockers
- Choose actions that help customers move forward immediately
- Use clear action names, such as
open_upgrade_modal,start_onboarding_step,apply_coupon, orget_cart - Write precise descriptions so Hugo knows when to use each tool
- Keep each tool focused on one clear outcome
- Return only the information Hugo needs to continue the conversation
- Handle errors gracefully when the action cannot be completed
Avoid creating broad tools that can do too many things at once. The clearer the tool, the easier it is for Hugo to call it at the right moment.
Limitations
Widget Tools only work when the visitor is actively using your website or web app through the Crisp chatbox widget.
They do not run in every Hugo context.
Keep these limits in mind:
- Widget Tools only run during widget conversations
- They require an active visitor browser session
- They do not run in test runs or simulations
- They require a frontend implementation using the Crisp Widget JS SDK
- They do not run from mobile SDK conversations until supported SDKs are available
For actions that must run server-side or access private backend systems, use an MCP Server instead.
Frequently Asked Questions
Do Widget Tools require a developer?
Yes. Product and support teams can define the support use case, but a developer needs to implement the frontend handler on your website using the Crisp Widget JS SDK.
Can Widget Tools replace an MCP Server?
Not always. Widget Tools are best for actions that can run inside the visitor’s browser. MCP Server is better for backend actions, private data, and server-side workflows.
Can Widget Tools be used for AI product tours?
Yes. Widget Tools can help Hugo guide customers inside your product by opening pages, showing modals, or triggering guided flows from a support conversation.
Can Widget Tools access logged-in user context?
Yes, if that context is already available in your website or web app. Since Widget Tools run in the visitor’s browser session, they can use information available to your frontend implementation.
Can Hugo use Widget Tools without the Crisp chatbox?
No. Widget Tools are designed for live widget conversations where the visitor has an active browser session.
Where can I find the technical documentation?
You can find the full developer guide here: Hugo Widget Tools documentation
Updated on: 01/07/2026
Thank you!