Before You Start

What You'll Need

  • A website where you can add HTML code
  • Your website's URL
  • 5-10 minutes of your time

What You'll Get

  • Smart chat widget on your website
  • AI responses based on your content
  • 24/7 customer support capabilities
  • Analytics dashboard

Step-by-Step Setup

Follow these 7 simple steps to get your AI-powered chat widget live on your website

Step 1: Create Your Account

2 minutes

Sign up and verify your email to get started

Instructions:

  1. 1Visit helpninja.app/signup
  2. 2Enter your business email and company details
  3. 3Verify your email address
  4. 4Choose your plan (start with free trial)

Tips:

  • Use your business email for better organization
  • Enter your primary website URL accurately
  • Choose a strong password for security

Step 2: Register and Verify Your Website

3 minutes

Add your website and verify domain ownership

Instructions:

  1. 1Go to Sites → Manage Sites in dashboard
  2. 2Click 'Add Site' and enter your domain
  3. 3Choose verification method (Meta Tag or DNS)
  4. 4Add verification code to your website
  5. 5Click 'Verify' to confirm ownership

Tips:

  • Meta tag method is usually fastest
  • Place verification code in <head> section
  • Changes may take a few minutes to propagate

Step 3: Add Your Website Content

1 minute

Let helpNINJA learn about your business automatically

Instructions:

  1. 1Go to Content → Ingestion in dashboard
  2. 2Select your verified site from dropdown
  3. 3Enter your website URL
  4. 4Click 'Start Crawling'
  5. 5Wait 2-5 minutes for processing

Tips:

  • All public pages will be crawled
  • FAQ sections are especially valuable
  • Clear headings and structure work best

Step 4: Get Your Widget Code

30 seconds

Generate your unique widget installation code

Instructions:

  1. 1Go to Sites → Manage Sites
  2. 2Find your verified site
  3. 3Click 'Setup' button
  4. 4Choose your framework (HTML, React, etc.)
  5. 5Copy the generated widget code

Tips:

  • Each site gets a unique code
  • Code includes security tokens
  • Choose the right framework for easier setup
Widget Code Example:
<script src="https://helpninja.app/api/widget?t=YOUR_TENANT_KEY&s=YOUR_SITE_ID&k=YOUR_VERIFICATION_TOKEN&voice=friendly"></script>

Step 5: Add Widget to Your Website

2 minutes

Install the widget on your website

Instructions:

  1. 1Paste code before closing </body> tag
  2. 2Save and upload changes
  3. 3Clear browser cache if needed

Platform-Specific Instructions:

WordPress
Appearance → Theme Editor → footer.php
Shopify
Online Store → Themes → Edit Code → theme.liquid
Squarespace
Settings → Advanced → Code Injection → Footer
HTML
Edit HTML files → Add before </body>

Step 6: Test Your Widget

1 minute

Verify everything is working correctly

Instructions:

  1. 1Visit your website
  2. 2Look for chat bubble (usually bottom right)
  3. 3Click to open chat window
  4. 4Send a test message about your business

Test Questions to Try:

"What services do you offer?"
"How can I contact you?"
"What are your hours?"
"Tell me about your pricing"

Step 7: Customize Your Widget

2 minutes

Optional: Brand your widget to match your site

Instructions:

  1. 1Go to Sites → Manage Sites → Widget
  2. 2Choose colors to match your brand
  3. 3Set welcome message
  4. 4Upload your logo
  5. 5Adjust AI voice/tone
  6. 6Preview and save changes

Tips:

  • Use your primary brand color
  • Keep welcome messages friendly
  • Logo should be square, 40x40px minimum

Troubleshooting

Common issues and their solutions

Widget Not Showing Up?

  • Ensure site is verified in dashboard
  • Check widget code is for correct site
  • Clear browser cache (Ctrl+F5)
  • Verify code is before </body> tag
  • Check browser console for errors

Chat Not Responding?

  • Wait 5-10 minutes after content crawling
  • Verify website was crawled successfully
  • Check content ingestion was done for correct site
  • Test on different devices/networks

Domain Verification Issues?

  • Wait up to 24 hours for DNS propagation
  • Ensure meta tag is in <head> section
  • Check for invisible characters in code
  • Use domain without http:// or www
  • Contact support for manual verification

What Happens Next?

Your AI-powered support is now live! Here's how to get the most out of it.

Immediate Benefits

  • 24/7 instant customer support
  • Reduced support workload
  • Better customer experience

First Week

  • Monitor conversations daily
  • Identify knowledge gaps
  • Add more content as needed

Ongoing

  • Weekly performance reviews
  • Content updates and optimization
  • Customer feedback collection

Congratulations!

You now have AI-powered customer support running on your website. Your customers will love getting instant, helpful answers!

View DashboardGet Support