This tutorial guides you through creating an intelligent chatbot for your website using Retrieval-Augmented Generation (RAG) architecture. Your chatbot will automatically read and understand your website content, allowing visitors to ask questions and receive accurate, contextual responses—similar to interacting with ChatGPT but specifically trained on your website’s information.

​
What You’ll Build

A complete website chatbot with:

  • Automatic content crawling and indexing
  • Conversational AI powered by RAG architecture
  • Customizable chat interface
  • Easy website integration with a simple script
  • Analytics and performance monitoring

This solution transforms static website content into an interactive knowledge base, enhancing user engagement and providing a powerful way for visitors to find information instantly.

​
Prerequisites

Before starting this tutorial, make sure you have:

  • An active Prisme.ai account
  • A website with content you want to make interactive
  • Basic understanding of HTML (for embedding the chat widget)

​
Step 1: Creating Your Website RAG Workspace

Let’s start by setting up a dedicated workspace using a pre-built template:

1

Access Prisme.ai Studio

Log in to your Prisme.ai account and navigate to the Studio builder

2

Find the Website to RAG Template

Look for the “Website to RAG” option in the project suggestions

3

Duplicate the Template

Click on “duplicate” to create your workspace based on this template

4

Explore the Activity Feed

You’ll be automatically directed to the activity feed, which logs all actions within your workspace

​
Step 2: Getting Familiar with the Workspace

Now, let’s explore the components of your new workspace:

1

Expand the Sidebar

Click on the menu icon to expand the sidebar, revealing Pages and Automations

2

View Installed Apps

Navigate to the Apps section to see pre-installed applications

3

Identify Key Components

Note the main components:

  • Crawler App: For fetching and processing website content (based on robots.txt rules)
  • Knowledge Client: For linking your workspace to AI Knowledge Agent based on Agent Id & API Key.

​
Step 3: Configuring the Website Crawler

The crawler is the heart of your RAG agent, responsible for reading and processing your website’s content:

1

Access Crawler Configuration

In the Apps section, click on the “Crawler” app

2

Enter Your Website URL

Input the URL of the website you want the chatbot to read

3

Configure Crawling Parameters

Adjust settings as needed:

  • Crawl Depth: How many levels of links to follow
  • URLs to Include/Exclude: Specific patterns to focus on or skip
  • *Authentication: Set up authentication if required.
  • Periodicity: Control the periodicity of URLs wrawling
4

Save Configuration

Click the “Save” button to apply your crawler settings

5

Monitor Crawling Progress

Navigate to the “Crawler” page under “Pages” to view the current status

The crawler may take some time to process your website, depending on its size. You can begin testing with partially crawled content while the process continues in the background. A maximum document quota is often enforced on your instance. Please contact your internal point of contact to request an increase of this limit.

​
Step 4: Testing Your RAG Chatbot

Once the crawler has processed some of your website content, you can start interacting with your chatbot:

1

Open the Chat Page

Navigate to the Chat page in your workspace

2

Ask Questions About Your Website

Try asking questions related to the content on your website

3

Explore Available Documents

If you’re unsure what to ask, explore the AI knowledge hub from the sidebar

4

Test with Specific Queries

Select a document from the knowledge hub and formulate questions based on its content

​
Step 5: Customizing the Chat Widget

Now let’s customize how your chat interface will appear on your website:

1

Open AI Store

Navigate to your agent, click on “Share Agent”, and copy the page URL or embed script.

2

Customize Appearance

In the script, you can adjust the widget settings to match your website’s design:

  • Background Color: Define the chat window’s background color
  • Chat Icon: Choose the icon that visitors click to open the chat
  • Close Icon Color: Set the color of the close (X) button

3

Advanced Styling

Use the CSS editor for deeper customization and fine-grained control of the widget’s style.

4

Preview Changes

Instantly preview how your changes affect the widget’s appearance in real time.

​
Step 6: Integrating the Chatbot into Your Website

Now it’s time to add your chatbot to your website:

1

Get the Embed Code

On the Widget page, locate and copy the provided script code

2

Add the Script to Your Website

Paste the script code into your website’s HTML, ideally just before the closing </body> tag

<script src="https://cdn-assets.prisme.ai/blocks/popover/inject/index.js"></script>
<script type="text/javascript">
Prismeai.popover({
"url": "https://ai-knowledge-chat.pages.prisme.ai/agent?id=your-agent-id",
"config": {
"header": {
  "closeColor": "#7f7f7f",
  "title":" "
},
}
})
</script>
3

Test Integration

Visit your website to verify that the chat widget appears and functions correctly

​
Step 7: Understanding the RAG Architecture

Your website chatbot is powered by a sophisticated RAG (Retrieval-Augmented Generation) architecture:

The system works through several key processes:

  1. Document Processing: Your website content is crawled, segmented into chunks, and converted into vector embeddings
  2. Query Understanding: When a user asks a question, the system processes and enhances it for better retrieval
  3. Relevant Content Retrieval: The system searches for the most relevant chunks of your website content
  4. Response Generation: Using the retrieved content as context, the AI generates a comprehensive, accurate response

AI Knowledge breaks documents into optimally sized “chunks” for efficient retrieval. This chunking process is configurable, allowing you to adjust settings like chunk size and overlap to match your specific content needs.

​
Step 8: Advanced Customization

For developers looking to extend the functionality:

1

Access Advanced Settings

In AI Knowledge, you can fine-tune embeddings, chunk management, and query enhancement

2

Use the Webhook Feature

Implement custom RAG pipelines using the Webhook feature

3

Add Python Custom Code

For advanced implementations using LlamaIndex or Langchain, use Python Custom Code capabilities within the Builder

4

Explore Templates

Check the suggestions section of the Low-code Builder product for predefined templates designed for specific RAG pipelines

​
Step 9: Monitoring and Optimization

Keep your website chatbot performing at its best:

1

Monitor Usage

Track user interactions and popular questions to understand how visitors use your chatbot

2

Review Performance

Analyze response times and accuracy to identify areas for improvement

3

Update Content

Regularly recrawl your website to ensure the chatbot has access to the latest content

4

Refine Responses

Adjust settings based on user feedback to improve response quality

​
Best Practices for Website RAG Agents

To maximize the effectiveness of your website chatbot:

Content Structure

Organize your website content with clear headings and logical structure for better chunking

Regular Updates

Schedule regular recrawling to keep your chatbot’s knowledge current

User Guidance

Provide example questions to help users understand what they can ask

Response Tuning

Adjust chunk size and retrieval settings based on the nature of your content

​
Conclusion

By following this tutorial, you’ve successfully transformed your static website into an interactive knowledge base with an intelligent chatbot. Your visitors can now engage with your content in a natural, conversational way, finding information faster and more intuitively.

This implementation not only enhances user experience but also provides valuable insights into what information your visitors are seeking, helping you continually improve your website content and structure.

​
Next Steps

Build a Document Classification System

Create an AI system that automatically organizes uploaded documents

Create a No-Code RAG Agent

Explore more advanced RAG capabilities without writing code

Implement Webhook Integration

Connect your RAG agent to other systems using webhooks

Develop Custom Applications

Build more sophisticated applications using AI Builder

Was this page helpful?

Raise issue