How We Added an AI Assistant to Our Homepage Using Chatbase

At Creative AI Space, we’re all about using AI to work smarter—not harder. So when we decided to make our homepage more interactive, we chose a tool that aligned perfectly with our mission: Chatbase.

Here’s how we used it to quickly build and launch an AI assistant that helps visitors get oriented, ask questions, and engage with what we offer—right from the first click.

Why Chatbase?

We needed something that:

• Could be trained on custom knowledge (like our courses, FAQs, and site info)

• Was easy to embed directly into our Squarespace homepage

• Matched our brand tone and kept answers helpful and on-topic

• Required no coding or backend maintenance

Chatbase made all of this possible in under an hour.

What We Did

1. Trained It on Our Site Info
   We uploaded a custom knowledge file with answers to common visitor questions—like what we offer, how to get started with courses, and where to find resources.

2. Customized the Behavior
   We gave it a friendly greeting, suggested prompts, and set clear boundaries for what it should and shouldn’t respond to.

3. Embedded It in Squarespace
   Using Chatbase’s embed code, we added it to the Advanced settings of our Squarespace homepage. No plugins, no friction.

4. Tested & Refined
   We ran a few test conversations and cleaned up anything unclear. Within minutes, we had a working homepage assistant live.

The Result

Now when a visitor lands on our homepage, they can immediately ask questions like:

• “What is Creative AI Space?”

• “How do I join the member site?”

• “Where can I learn about prompt engineering?”

It’s like having a helpful concierge available 24/7—powered by our own words.

🔧 Pro Tips from Our Chatbase Setup

1. Add AI Only Where It Makes Sense First

Start small. We embedded the AI only on the homepage to ensure performance and relevance before rolling it out to member areas. This helped us test and iterate quickly without overwhelming the full site.

2. Use Clear Guardrails in Chat Instructions

Our bot was instructed to stick to the training data and avoid off-topic answers. This kept responses on-brand and prevented the “ChatGPT wander” effect.

3. Inject Code at the Page Level, Not Globally

In Squarespace, adding the Chatbase embed code under the Page Settings > Advanced > Header section of the homepage only gave us precise control. It also avoids unexpected AI pop-ups across unrelated pages.

4. Watch for JavaScript Errors in the Console

Early on, the wrong embed snippet caused a 404 error and broke functionality. By checking the browser console, we spotted and fixed it fast.

5. Customize Suggested Prompts

Setting a few smart starter prompts made the assistant feel more helpful and guided the user conversation (e.g., “Where do I start?” or “What courses do you offer?”).

6. Train on the Right Tone & Content

Uploading a short, focused knowledge file helped ensure that answers aligned with your tone, offerings, and audience needs—without feeding the assistant too much fluff.

Coming Soon: Member Site Integration

Right now, this AI assistant is only active on the homepage, but we’re already working on expanding it to our members-only pages. Soon, members will be able to get on-demand help navigating lessons, workshops, and downloads.

If you’re building your own AI-powered brand, I highly recommend trying Chatbase for a fast, flexible, and friendly assistant—without the dev overhead.

Reference: https://www.chatbase.co/