Dashboard

Documentation

AI Chat Widget - Quick Start Guide

Embed the AI chat widget, configure providers, and track usage with Stripe credits.

AI Chat Widget - Quick Start Guide

Add an AI-powered chatbot to your website in minutes. No coding experience required!

What You Get

The AI Chat widget adds a smart assistant to your website that can:

  • Answer visitor questions automatically, 24/7
  • Match your brand with custom colors
  • Adapt to different pages (support, sales, product info, etc.)
  • Work on any website - WordPress, Shopify, Wix, custom sites

Pricing: You only pay for actual conversations. See pricing at demeterics.com/pricing

Step 1: Create Your Widget

  1. Go to your Demeterics dashboard
  2. Click AI Chat in the sidebar
  3. Click Create Agent

Fill in the Settings

Widget Name

Give your widget a name you'll recognize in your dashboard.

Examples: "Support Bot", "Sales Helper", "Product Assistant"

Brand Color

Pick your website's main color. The widget will automatically match your brand.

How to find your color:

  • Look at your website's header or buttons
  • Most website builders show colors in their theme settings
  • If you're not sure, try #1DA7A0 (a nice teal color)

The widget automatically adjusts text colors so everything is readable.

Rate Limit

How many conversations per minute your widget can handle.

Recommendation:

  • Small sites: Use 30
  • Medium sites: Use 60
  • Popular sites: Use 100+

This prevents abuse and controls costs.

Your Website Address

Enter the website(s) where you want the widget to appear. One per line.

Examples:

mywebsite.com
www.mywebsite.com
shop.mywebsite.com

Important: The widget will ONLY work on domains you list here. This keeps your widget secure.

Choose Your AI Model

Pick the AI brain that powers your chatbot. Don't worry - you can change this later!

We recommend starting with:

  • Llama 3.1 8B Instant - Fast and affordable, great for most websites
  • Llama 3.3 70B Versatile - Smarter responses, costs a bit more

Tip: Start with the faster model. Upgrade later if you need better answers.

Avatar Style

Choose how the chat bot looks:

  • Neutral (recommended) - Professional gray avatar
  • Friendly - Warm, welcoming style
  • Tech - Modern, technical look
  1. Click Create to save your widget

Step 2: Teach Your Widget About Your Business

After creating your widget, you'll see Prompts. Think of prompts as "instruction cards" that tell your chatbot what to say.

Your First Prompt: "default"

Every widget starts with a "default" prompt. This is what the chatbot uses unless you create specific prompts for different pages.

  1. Click on the default prompt
  2. Click Edit

What to Write

In the System Prompt box, tell the AI about your business. The more specific you are, the better it performs.

Template:

You are a helpful assistant for [Your Business Name].

About us:
- We sell/offer [your products or services]
- Our specialty is [what makes you unique]
- We're located in [location, if relevant]

Important info:
- Shipping: [your shipping policy]
- Returns: [your return policy]
- Contact: [email or phone]

Your job:
- Answer questions about our products and services
- Be friendly and helpful
- If you don't know something, tell customers to contact us at [email]
- Never make up prices or policies

Example for an online plant store:

You are a helpful assistant for Green Thumb Gardens.

About us:
- We sell indoor and outdoor plants
- We specialize in easy-care plants for beginners
- Free shipping on orders over $50

Important info:
- We ship Monday-Wednesday to keep plants healthy
- 30-day guarantee on all plants
- Contact us at hello@greenthumbgardens.com

Your job:
- Help customers choose the right plants
- Answer questions about plant care
- Be friendly and encouraging
- If you don't know something, direct them to hello@greenthumbgardens.com
- Never make up information about plant care or availability
  1. Keep Temperature at the recommended setting (usually around 0.5-0.7)
  2. Keep Max Response Length at Medium (1024) to start
  3. Click Save

Need Help Writing Your Prompt?

Click the "Recreate for my site" button! This feature:

  1. Visits your website
  2. Reads your About page, products, and other content
  3. Writes a custom prompt for you automatically

This takes 5-10 seconds. You can edit the result before saving.

Note: If this feature doesn't work, contact us at support@demeterics.com - we'll help you set it up!

Creating Prompts for Different Pages (Optional)

Want different chatbot personalities on different pages? Create multiple prompts!

Common examples:

Prompt Name Where to Use What It Does
support Help/FAQ pages Answers policy questions, handles complaints
sales Product pages Explains features, helps with decisions
checkout Shopping cart Helps complete purchase, answers shipping questions
home Homepage Welcomes visitors, explains what you do

To create a new prompt:

  1. Click Add Prompt
  2. Give it a simple name like "support" or "sales" (lowercase, no spaces)
  3. Write instructions specific to that page
  4. Click Save

You'll use these names when embedding the widget (see Step 3).

Step 3: Add the Widget to Your Website

Now let's put the widget on your site!

Get Your Widget Code

  1. Go back to the widget detail page
  2. Find your Agent Key (looks like DEM-A4E4OWSVGHBN)
  3. Copy the embed code shown on the page

WordPress Instructions

  1. Go to Appearance → Theme File Editor (or use a plugin like "Insert Headers and Footers")
  2. Find your theme's footer.php file
  3. Add this code just before </body>:
<!-- Demeterics AI Chat Widget -->
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Need help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual key
  2. Click Update File

Safer Option: Use a plugin like "Insert Headers and Footers":

  1. Install the plugin
  2. Paste the code in the "Scripts in Footer" section
  3. Save

Other Website Builders

Shopify:

  1. Go to Online Store → Themes → Actions → Edit Code
  2. Find theme.liquid
  3. Add the code before </body>

Wix:

  1. Go to Settings → Custom Code
  2. Click Add Custom Code
  3. Paste the code, set it to load in the Body - End

Squarespace:

  1. Go to Settings → Advanced → Code Injection
  2. Paste the code in Footer

Custom HTML sites:
Just paste the code before the </body> tag in your HTML.

Customize the Widget

You can change how the widget appears:

Change the title:

<dem-agent name="default" title="Chat with us!"></dem-agent>

Start the widget open (instead of minimized):

<dem-agent name="default" title="Need help?" state="open"></dem-agent>

Use a specific prompt (like "sales" or "support"):

<dem-agent name="sales" title="Product Questions?"></dem-agent>

Embed inline (inside your page content instead of floating):

<dem-agent mode="embedded" name="support" title="FAQ Assistant"></dem-agent>

Use Different Prompts on Different Pages

If you created multiple prompts (support, sales, etc.), you can show different ones on different pages.

In WordPress:
Use conditional tags in your theme or a plugin.

Simple approach: Manually change the name attribute based on the page template you're editing.

Common Questions

The widget isn't showing up

Check these:

  1. Is the code in the right place (before </body>)?
  2. Did you replace DEM-YOUR-KEY-HERE with your actual key?
  3. Is your website address added to "Allowed Domains" in your widget settings?
  4. Try disabling ad blockers (some block chat widgets)
  5. Clear your browser cache and refresh

Still not working? Email us at support@demeterics.com with your website URL.

"Domain not allowed" error

You need to add your website to the Allowed Domains list:

  1. Go to your widget settings
  2. Add your domain (e.g., yoursite.com)
  3. Save
  4. Refresh your website

Too many visitors are using it (Rate limit exceeded)

  1. Go to your widget settings
  2. Increase the Rate Limit number
  3. Save

Note: More conversations = higher costs. You might also want to check if bots are triggering the widget.

The chatbot gives wrong answers

The AI only knows what you tell it! Try:

  1. Edit your prompt to be more specific
  2. Add more details about your products, policies, and services
  3. Test the widget by asking questions yourself
  4. Update the prompt based on what's missing

Need help? Email support@demeterics.com - we can help you write better prompts!

"Recreate for my site" doesn't work

This feature may not be available on all accounts. Contact support@demeterics.com and we'll either:

  • Enable it for your account, or
  • Help you write a great prompt manually

How much does this cost?

You pay only for actual conversations. Pricing is based on:

  • How long the conversations are
  • Which AI model you chose

See current pricing: demeterics.com/pricing

Cost control tips:

  • Use the faster, cheaper model (Llama 3.1 8B Instant)
  • Keep the "Max Response Length" at Medium or Short
  • Set a reasonable rate limit to prevent abuse

Need More Help?

Email us: support@demeterics.com

We're here to help! Common things we help with:

  • Writing effective prompts for your business
  • Choosing the right settings
  • Installing the widget on your site
  • Troubleshooting issues
  • Optimizing costs

More resources:

Ready to launch? Your AI assistant is ready to help your customers 24/7! 🚀