How to use Hugo Widget Tools to trigger actions on your website
This article explains how Hugo Widget Tools work and how they help your AI Agent take actions directly on your website.
Widget Tools let Hugo do more than answer questions. They allow your AI Agent to trigger actions inside your website or web app, directly from the Crisp chatbox.
For example, Hugo can help users find the right feature, apply a discount code, show an upgrade flow, or retrieve information already available in the visitor’s browser session.
Widget Tools are designed for product and support teams that want Hugo to guide users toward concrete outcomes, while developers handle the technical setup through the Crisp Widget JS SDK.
What are Hugo Widget Tools?
Hugo Widget Tools let your AI Agent run actions directly inside your visitor’s browser through the Crisp chatbox widget.
Unlike backend integrations, Widget Tools do not require a server endpoint to be called by Hugo. Instead, your website listens for a tool request from Hugo, runs the action in the visitor’s browser, and returns the result to the conversation.
This is useful when the action depends on the current user session, the page the visitor is on, or information already available in your frontend.
With Widget Tools, Hugo can for example:
- Guide a user to a specific feature
- Apply a discount code
- Show an upgrade or onboarding flow
- Read cart, account, plan, or product information
- Help users complete an action directly from your website
When should you use Widget Tools?
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 user is already logged in, browsing your product, or trying to complete an action in your interface.
Common use cases
Use case | What Hugo can do |
|---|---|
Product guidance | Help users find the right feature or page in your app |
Upgrade assistance | Show an upgrade funnel when the user reaches a limit |
Discount flows | Apply a coupon or promotional code from the chat |
Cart assistance | Read cart content, apply changes, or explain what is missing |
Account context | Retrieve useful user, plan, or workspace information |
Onboarding | Guide users through setup steps directly in your interface |
For example, if a visitor 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 visitor 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 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 show a modal in your app, open a product page, 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 work in 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 an action may help the user
- 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 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
Examples of good Widget Tool use cases
Widget Tools work best when the action is simple, contextual, and directly useful to the visitor.
✔ Good use case: guide users to a feature
A user asks how to invite teammates. Hugo can trigger a Widget Tool that opens the right settings page in your app.
✔ Good use case: show an upgrade flow
A user reaches a usage limit. Hugo can trigger a Widget Tool that opens the right upgrade modal or pricing step.
✔ Good use case: apply a discount
A user asks whether a discount is available. Hugo can trigger a Widget Tool that applies a coupon code to the current checkout session.
✔ Good use case: read contextual information
A user 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.
Widget Tools should help Hugo move the user forward inside your product, instead of only explaining what the user should do manually.
Best practices
To get reliable results, keep your Widget Tools focused and easy for Hugo to understand.
Good practices include:
- Use clear action names, such as
open_upgrade_modal,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 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 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: 29/06/2026
Thank you!