Embed an AI Chatbot on Your Website in 5 Minutes: The Ultimate Guide to ShinRAG Widgets

Want to add an AI chatbot to your website? Most solutions require complex integrations, API keys, and weeks of development. ShinRAG widgets change that—you can embed a fully functional, RAG-powered chatbot in under 5 minutes with a single line of code.

Why Chatbots Are Essential (But Usually Hard to Build)

Modern websites need intelligent assistants. Whether you're running an e-commerce site, a SaaS platform, or a documentation portal, chatbots can:

• Answer customer questions 24/7: Reduce support tickets and improve user satisfaction
• Guide users through your product: Help visitors find what they need faster
• Provide instant documentation access: Let users ask questions in natural language instead of searching through pages
• Qualify leads: Engage visitors and collect information before they reach your sales team

The problem? Building a chatbot that actually understands your content and provides accurate answers has traditionally required:

• Setting up vector databases (Pinecone, Qdrant, Weaviate)
• Building embedding pipelines
• Integrating with LLM APIs
• Creating conversation management systems
• Designing and building a chat UI
• Handling session management and state
• Deploying and maintaining infrastructure

That's weeks of work, even for experienced developers. ShinRAG widgets eliminate all of that complexity.

What Makes ShinRAG Widgets Different

ShinRAG widgets aren't just chatbots—they're RAG-powered intelligent assistants that understand your content. Here's what sets them apart:

1. One-Line Embedding

No complex setup, no API keys in your frontend code, no authentication headaches. Just add a single script tag:

<script src="https://your-domain.com/widgets/embed.js?key=YOUR_WIDGET_KEY"></script>

That's it. The widget automatically appears as a chat bubble on your website, styled to match your brand.

2. Powered by Your Data

Unlike generic chatbots that only know what they were trained on, ShinRAG widgets are connected to your agents and datasets. This means:

• They understand your content: Trained on your documentation, product info, or knowledge base
• They provide accurate answers: RAG (Retrieval Augmented Generation) ensures responses are grounded in your actual data
• They cite sources: Users can see where answers come from, building trust
• They stay up-to-date: Update your datasets, and the chatbot automatically knows the latest information

3. Conversation Memory

ShinRAG widgets maintain conversation context for up to 1 hour, allowing for natural, multi-turn conversations. Users can ask follow-up questions, and the chatbot remembers the context.

4. Fully Customizable

Every aspect of your widget can be customized to match your brand:

• Predefined themes: Choose from 8 beautiful color schemes
• Custom styling: Set your own colors, border radius, and chat bubble appearance
• Branded messaging: Customize the headline, placeholder text, and welcome message
• Positioning: Place the chat bubble in the bottom-right or bottom-left corner

How to Set Up Your First Widget (5 Minutes)

Step 1: Create an Agent (2 minutes)

First, you need an agent that's connected to your data. If you haven't created one yet:

1. Go to your ShinRAG dashboard and navigate to Agents
2. Click "Create Agent"
3. Give it a name (e.g., "Customer Support Bot") and select your datasets
4. Choose your model (GPT-4, GPT-3.5, Claude, etc.) and configure settings

Your agent is now ready to answer questions based on your datasets.

Step 2: Create a Widget (1 minute)

Now, turn that agent into an embeddable widget:

1. Navigate to Widgets in your dashboard
2. Click "Create Widget"
3. Select your agent from the dropdown
4. Give your widget a name (e.g., "Website Chatbot")

That's it! Your widget is created and ready to embed.

Step 3: Customize the Appearance (1 minute)

Make it match your brand. In the widget editor, you can:

• Choose a theme: Select from predefined color schemes (Default, Green, Purple, Red, Orange, Pink, Indigo, Teal)
• Or go custom: Set your own primary color, text color, background, and border radius
• Customize text: Set a custom headline (e.g., "Need Help?"), placeholder text, and welcome message
• Style the chat bubble: Choose its color, size, and position

All changes are saved automatically and reflected immediately in your embedded widget.

Step 4: Copy the Embed Code (30 seconds)

Once your widget is configured, click "Copy Code" on the widget card. You'll get a script tag like this:

<script src="https://your-domain.com/widgets/embed.js?key=abc123xyz&baseUrl=https://your-domain.com"></script>

Step 5: Add to Your Website (30 seconds)

Paste the script tag into your website's HTML, typically just before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->
  
  <!-- ShinRAG Widget -->
  <script src="https://your-domain.com/widgets/embed.js?key=abc123xyz&baseUrl=https://your-domain.com"></script>
</body>
</html>

That's it! Your chatbot is now live on your website. The chat bubble will appear in the bottom-right corner (or wherever you configured it), and visitors can start chatting immediately.

Advanced Features

Session Management

ShinRAG widgets automatically manage conversation sessions:

• 1-hour message retention: Messages stay in context for 1 hour
• 24-hour session lifetime: Sessions expire after 24 hours for privacy
• Automatic cleanup: Old messages are automatically removed
• Persistent across page loads: Users can close and reopen the chat to see their previous conversation

Markdown Support

The chatbot supports full markdown rendering, so responses can include:

• Formatted text (bold, italic, headers)
• Lists (ordered and unordered)
• Code blocks with syntax highlighting
• Links
• Tables (via GitHub Flavored Markdown)

Source Citations

When the chatbot retrieves information from your datasets, it shows the sources with relevance scores. This builds trust and helps users verify information.

Real-World Use Cases

E-Commerce Support

Embed a widget on your product pages that answers questions about shipping, returns, sizing, and product features. Connect it to your product documentation and FAQ datasets.

SaaS Documentation

Instead of making users search through documentation, let them ask questions directly. Connect your widget to your documentation dataset for instant, accurate answers.

Customer Support

Provide 24/7 support by embedding a widget that knows your support articles, troubleshooting guides, and common questions. Reduce support ticket volume while improving response times.

Lead Qualification

Use the chatbot to engage visitors, answer questions about your product, and collect information before routing them to sales.

Why This Beats Building Custom

Building a custom chatbot solution would require:

• Frontend development: Building a chat UI from scratch (React, Vue, or vanilla JS)
• Backend API: Creating endpoints for chat, session management, and message history
• Session storage: Setting up Redis or a database for conversation state
• RAG integration: Connecting to your vector database and LLM APIs
• Styling system: Building a theming system for customization
• Deployment: Hosting and maintaining all of this infrastructure

With ShinRAG widgets, you get all of this out of the box. Just create an agent, create a widget, and embed it. No code, no infrastructure, no maintenance.

Getting Started

Ready to add an AI chatbot to your website? Here's what you need:

1. A ShinRAG account: Sign up at shinrag.com
2. Your content: Upload your documentation, FAQs, or knowledge base as datasets
3. An agent: Create an agent connected to your datasets
4. A widget: Turn that agent into an embeddable widget

From there, it's just one line of code to embed on your website. No complex integrations, no weeks of development—just a powerful, intelligent chatbot that understands your content and helps your users.