Most developers spend weeks building a custom frontend — then bolt on some clunky third-party chat widget that looks like it was designed in 2014. There's a better way.
If you're running a React app, a Next.js storefront, or a Vue-powered SaaS product, you already know how painful it is to integrate support tools that weren't built with modern JavaScript frameworks in mind. They break hydration. They bloat your bundle. They require a PhD in webhook configuration just to fire a basic event.
What if adding a fully functional website chatbot was literally one line of code?
That's exactly what Ruma AI's Embed Script for any website does — and once you understand what's actually happening under the hood, you'll wonder why you ever did it any other way.
What "One Line of Code" Actually Means
Skeptics — and rightfully so — hear "one line of code" and assume it's marketing fluff. It's not.
You drop a single tag into your HTML (or your _document.tsx in Next.js, or index.html in Vue), and Ruma AI's agentic AI widget loads asynchronously. No npm package to install. No webpack config to wrestle with. No breaking changes when you update your framework.
Here's what that looks like in practice:
<script src="https://rumadesk.com/embed.js" data-agent-id="YOUR_ID" async></script>
That's it. The widget initializes, pulls your agent configuration from Ruma's cloud, and you've got a fully operational AI support agent live on your site.
Why This Matters for Framework-Based Sites
React, Next.js, and Vue all have one thing in common: they render dynamically. Traditional chat widgets were built for static HTML pages — they assume a DOM that's fully loaded before they run. That's why you get race conditions, flickers, and widgets that initialize before your app is ready.
Ruma's embed script is built to handle this. It uses a deferred initialization pattern, so it waits for your app to be interactive before mounting the widget. No conflicts with React's virtual DOM. No issues with Next.js server-side rendering or Vue's reactivity system.
For developers, this is a big deal. For business owners, the takeaway is simpler: it just works.
What the AI Actually Does Once It's Embedded
This is where Ruma AI separates itself from the pack. Most chat widgets are glorified FAQ bots — they match keywords and spit out pre-written answers. Ruma's approach is fundamentally different because it's built on agentic AI.
Agentic AI means the system doesn't just respond — it decides what to do. It has access to 13 tools and autonomously chooses which ones to use based on context. When a customer asks "can I still cancel my order?", the AI doesn't just say "here's our cancellation policy." It:
All of this happens inside the same widget your customer already has open.
Here's a quick breakdown of what the embedded agent can do:
- Product search — surfaces relevant items from your catalog in real time
- Order tracking — pulls live status without the customer leaving the page
- Meeting booking — connects to Google Calendar or Calendly for seamless scheduling
- Add to cart — actually adds items during the conversation
- Apply coupons — validates and applies promo codes mid-chat
- OTP verification — confirms identity before sensitive actions
- Lead capture — saves contact info directly to your CRM
- Human handoff — transfers to a live agent via WebSocket when needed
- Email follow-up — sends post-conversation summaries or next steps
For a custom e-commerce site built on React or Next.js, this is transformative. You're not just answering questions — you're closing sales, solving problems, and capturing leads, all without the customer opening a new tab.
Real-World Use Cases for Custom-Built Sites
Let me paint a picture.
Imagine you run a boutique skincare brand. You built your storefront on Next.js because you wanted full control over performance and SEO. You've got 200 SKUs, a loyalty program, and a subscription box service. Customer questions range from "what's in this serum?" to "why hasn't my subscription shipped yet?"
Before Ruma, you were either paying for a live support team to handle these at $35/hour, or you had some static FAQ page buried three clicks deep that nobody read.
After dropping in the embed script, your AI agent handles:
- Product ingredient questions with real-time catalog lookup
- Subscription order status checks
- Discount code validation for first-time customers
- Lead capture for customers who aren't ready to buy yet (pushed straight to HubSpot or Salesforce)
- Escalation to a human agent for refund requests or account issues
The result? Support tickets drop by 60%. Conversion on product pages goes up because customers get answers immediately instead of bouncing. And your developer didn't have to touch anything beyond pasting one line of script.
If you're on Shopify or WordPress instead of a custom stack, Ruma has dedicated solutions too — the Shopify AI Agent and WordPress AI Plugin both go deeper with native platform integrations like WooCommerce cart sync and Shopify checkout upsells.
CRM Sync: Your Customer Data Doesn't Live in a Vacuum
One of the most underrated features of the embed script is what happens after the conversation.
Every lead captured, every conversation transcript, every intent signal — it all gets pushed to your CRM automatically. Ruma integrates natively with HubSpot, Salesforce, and Zoho. So when a visitor on your Vue-powered SaaS site asks about your enterprise plan and drops their email, that contact shows up in your CRM within seconds, tagged with the conversation context.
Your sales team doesn't have to manually log anything. Your support history is searchable. And because the AI is agentic, it's not just capturing data passively — it's making decisions about what to capture and when to hand off.
Voice, Telegram, and WhatsApp: Beyond the Browser
Here's something most people don't realize: the same AI agent you embedded on your React site can also answer phone calls.
Ruma's voice AI lets customers call a number and speak to the same agent — with full context from previous chat interactions. No hold music. No scripts. Just an AI that knows your catalog, your policies, and your customer's history.
And if you need to reach customers where they already are, the Standalone AI Agent lets you deploy the same agent to Telegram, WhatsApp Business, or a dedicated voice channel — no website required. One agent, every channel.
This is particularly powerful for small businesses that don't have a traditional website but want the same AI customer support capabilities.
Setting It Up: How To Embed on React, Next.js, and Vue
Here's a practical breakdown so you know exactly what you're getting into.
React
Add the script tag inside your public/index.html or use a useEffect hook to inject it dynamically. Either works — the async flag ensures no render blocking.
Next.js
Use Next.js's built-in component in _app.tsx or _document.tsx with strategy="afterInteractive" — this ensures the widget loads after hydration is complete, avoiding SSR conflicts.
Vue
Drop the script tag into your index.html in the public folder, or use a Vue lifecycle hook (mounted()) to append it programmatically. Clean, simple, zero configuration.
Customization options include:
- Widget theme (multiple presets available)
- Custom colors to match your brand
- Avatar image for the AI agent
- Language settings (50+ languages supported)
- Initial greeting message
None of this requires touching your application code. It's all configured in the Ruma dashboard.
Pricing: Surprisingly Accessible
For a tool this capable, the pricing is genuinely reasonable — especially for small-medium businesses watching their margins.
Ruma offers a free plan with 100 messages/month, which is enough to validate the concept. Paid plans start at just $9/month (Go plan), scaling up through Basic at $29, Pro at $79, and Ultra at $199. If you commit to 6 months, you save 15% across all plans.
View pricing to find the right fit for your traffic volume.FAQ
Does the embed script work with server-side rendered frameworks like Next.js?
Yes. Ruma's embed script uses deferred, async loading which is fully compatible with Next.js SSR and SSG. Use the strategy="afterInteractive" option with Next.js's component for optimal performance and zero hydration conflicts.
Can the embedded AI agent connect to my existing product catalog and order system?
Absolutely. The agentic AI uses real-time tools to query your product catalog and order data. For custom sites, you connect your data sources via Ruma's dashboard. For WooCommerce or Shopify stores, native integrations handle this automatically through the WordPress AI Plugin or Shopify AI Agent.
What happens when the AI can't answer a customer's question?
Ruma's agentic AI includes a built-in human handoff tool. When the AI detects a situation outside its scope — a complex complaint, an unusual refund request, anything requiring human judgment — it transfers the conversation to a live agent via WebSocket in real time, with full conversation context preserved so the agent doesn't have to ask the customer to repeat themselves.
If you've been putting off adding AI customer support to your custom-built site because it felt too complicated, too expensive, or too risky — it's time to revisit that assumption.
One line of code. An agentic AI that actually takes action. And pricing that starts free.
Start free with Ruma AI and have your AI agent live before your next standup meeting.


