SnapIT Agent Documentation

Complete developer guide for integrating AI agents into your applications

📋 Table of Contents

Quick Start Guide
Widget Integration
REST API Reference
JavaScript SDK
Code Examples

What is SnapIT Agent?

SnapIT Agent is a powerful platform that allows you to create, deploy, and manage AI-powered customer service agents. Our platform provides:

🤖 AI-Powered Conversations

Advanced language models including GPT, Gemini, and Claude for natural conversations

🔧 Easy Integration

Simple widget embedding, REST API, and SDKs for popular frameworks

📊 Analytics & Insights

Detailed conversation analytics, customer satisfaction metrics, and performance tracking

🎧 Multi-channel Support

Chat, voice calls, SMS, and integrations with popular platforms

⚙️ Customizable Workflows

Built-in CRM integration, appointment booking, and custom business logic

🔒 Enterprise Security

SOC2 compliant, end-to-end encryption, and GDPR ready

Architecture Overview

SnapIT Agent is built on a modern, serverless architecture that scales automatically with your needs:

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Your Website  │───▶│   SnapIT Widget  │───▶│  SnapIT Agent   │
│                 │    │                  │    │     Platform    │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                                        │
                               ┌────────────────────────┼────────────────────────┐
                               │                        │                        │
                       ┌───────▼────────┐    ┌─────────▼────────┐    ┌─────────▼────────┐
                       │   AI Providers │    │   Communication  │    │    Analytics     │
                       │  (GPT, Claude,  │    │   (Voice, SMS,   │    │   (Metrics,      │
                       │   Gemini)       │    │    WhatsApp)     │    │   Insights)      │
                       └────────────────┘    └──────────────────┘    └──────────────────┘

🚀 Getting Started

Ready to add an AI agent to your website? Start with our Quick Start Guide to have your first agent running in under 5 minutes!

Quick Start Guide

Get your AI agent running in under 5 minutes

Step 1: Create Your Agent

First, create your AI agent using our web interface:

Go to the SnapIT Agent Dashboard
Sign in with Google or create a free account
Click "Create Agent" and follow the wizard
Configure your agent's personality, knowledge base, and features

✅ Free Tier Available

Start with 100 free conversations per month. No credit card required!

Step 2: Get Your Widget Code

After creating your agent, you'll get a unique widget code:

<!-- SnapIT Agent Widget -->
<div id="snapit-agent-widget"></div>
<script>
  window.SnapitAgentConfig = {
    agentId: 'your-agent-id',
    apiUrl: 'https://api.snapitagent.com',
    position: 'bottom-right',
    buttonText: '💬 Chat with AI',
    buttonColor: '#aa336a'
  };
</script>
<script src="https://api.snapitagent.com/widget.js"></script>

Step 3: Add to Your Website

Simply paste the widget code before the closing </body> tag of your HTML:

For Static Websites

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>Your content here...</p>
    
    <!-- SnapIT Agent Widget -->
    <div id="snapit-agent-widget"></div>
    <script>
      window.SnapitAgentConfig = {
        agentId: 'your-agent-id',
        apiUrl: 'https://api.snapitagent.com'
      };
    </script>
    <script src="https://api.snapitagent.com/widget.js"></script>
</body>
</html>

For WordPress

Use the "Insert Headers and Footers" plugin or add to your theme's footer.php:

<!-- Add this before </body> in footer.php -->
<div id="snapit-agent-widget"></div>
<script>
  window.SnapitAgentConfig = {
    agentId: 'your-agent-id',
    apiUrl: 'https://api.snapitagent.com'
  };
</script>
<script src="https://api.snapitagent.com/widget.js"></script>

Step 4: Test Your Agent

Once you've added the widget code:

Refresh your website
Look for the chat button (usually bottom-right corner)
Click the button to start a conversation
Test various questions to see how your agent responds

🔧 Customization Options

Want to customize colors, position, or behavior? Check out our Widget Customization Guide.

Next Steps

Congratulations! Your AI agent is now live. Here's what you can do next:

Monitor conversations: Check your dashboard for analytics and insights
Improve responses: Update your agent's knowledge base based on user questions
Enable advanced features: Add voice calls, SMS support, or appointment booking
Scale up: Upgrade to a paid plan for unlimited conversations

Go to Dashboard Customize Widget

Authentication

Secure access to SnapIT Agent APIs

Overview

SnapIT Agent uses JWT (JSON Web Tokens) for API authentication. All API requests must include a valid authentication token.

Getting Your API Token

Method 1: Dashboard

Sign in to your SnapIT Agent Dashboard
Go to Settings → API Keys
Click "Generate New Token"
Copy and securely store your token

Method 2: OAuth Authentication

For applications that need to authenticate on behalf of users:

POST https://api.snapitagent.com/auth/google

{
  "credential": "google-oauth-credential-token"
}

Response:

{
  "success": true,
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "user_123",
    "email": "user@example.com",
    "name": "John Doe"
  },
  "expiresIn": "24h"
}

Using Your Token

Include your token in the Authorization header of all API requests:

Authorization: Bearer your-jwt-token-here

Example Request

curl -X GET "https://api.snapitagent.com/agents" \
  -H "Authorization: Bearer your-jwt-token-here" \
  -H "Content-Type: application/json"

Token Security

⚠️ Security Best Practices

Never expose tokens in client-side code or public repositories
Use environment variables to store tokens securely
Implement token rotation for production applications
Monitor token usage and revoke suspicious tokens immediately

Token Verification

Verify your token is valid before making API calls:

POST https://api.snapitagent.com/verify-token

fetch('https://api.snapitagent.com/verify-token', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer your-token-here',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ token: 'your-token-here' })
})

Widget Installation

Complete guide to installing the SnapIT Agent widget

Basic Installation

The SnapIT Agent widget can be installed on any website with just a few lines of code:

<!-- SnapIT Agent Widget -->
<div id="snapit-agent-widget"></div>
<script>
  window.SnapitAgentConfig = {
    agentId: 'your-agent-id-here'
  };
</script>
<script src="https://api.snapitagent.com/widget.js"></script>

Platform-Specific Instructions

WordPress

📝 Method 1: Using a Plugin (Recommended)

Install the "Insert Headers and Footers" plugin
Go to Settings → Insert Headers and Footers
Paste the widget code in "Scripts in Footer"
Save changes

🎨 Method 2: Theme Editor

Go to Appearance → Theme Editor
Select footer.php
Add the widget code before </body>
Update file

Shopify

1. Go to Online Store → Themes
2. Click "Actions" → "Edit Code"
3. Open layout/theme.liquid
4. Add widget code before </body>
5. Save

Webflow

1. Open your project settings
2. Go to Custom Code tab
3. Add widget code to "Footer Code"
4. Publish site

React/Next.js

import { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Configure SnapIT Agent
    window.SnapitAgentConfig = {
      agentId: 'your-agent-id-here'
    };
    
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://api.snapitagent.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return <Component {...pageProps} />;
}

Configuration Options

Customize your widget behavior with these configuration options:

Parameter	Type	Default	Description
agentId	string	required	Your unique agent identifier
position	string	bottom-right	Widget position: top-left, top-right, bottom-left, bottom-right
buttonText	string	💬 Chat with AI	Text displayed on the chat button
buttonColor	string	#aa336a	Hex color code for the chat button
welcomeMessage	string	Hi! How can I help?	First message shown to users
autoOpen	boolean	false	Automatically open chat window on page load
soundNotifications	boolean	false	Play sound for new messages

Advanced Configuration Example

window.SnapitAgentConfig = {
  agentId: 'your-agent-id-here',
  position: 'bottom-left',
  buttonText: '🤖 Ask AI Assistant',
  buttonColor: '#2563eb',
  welcomeMessage: 'Welcome! How can I assist you today?',
  chatTitle: 'Customer Support',
  autoOpen: false,
  soundNotifications: true,
  showOnlineIndicator: true,
  theme: 'light', // 'light' or 'dark'
  language: 'en', // Language code
  customCSS: 'https://yoursite.com/custom-widget.css'
};

REST API Overview

Complete reference for SnapIT Agent REST API

Base URL

https://api.snapitagent.com

Authentication

All API requests require authentication using JWT tokens in the Authorization header:

Authorization: Bearer your-jwt-token-here

Response Format

All API responses follow this standard format:

Success Response

{
  "success": true,
  "data": { ... },
  "message": "Operation completed successfully"
}

Error Response

{
  "success": false,
  "error": "Error description",
  "code": "ERROR_CODE",
  "details": { ... }
}

Rate Limits

📊 Rate Limits

Free Tier: 100 requests per minute, 1,000 per day
Pro Tier: 1,000 requests per minute, 10,000 per day
Business Tier: 5,000 requests per minute, 100,000 per day

API Endpoints

GET /health

Health check endpoint

POST /auth/google

Authenticate with Google OAuth

GET /agents

List all agents

POST /agents

Create a new agent

GET /agents/{agentId}

Get specific agent details

POST /chat

Send chat message to agent

GET /analytics

Get conversation analytics

Error Codes

Code	Status	Description
INVALID_TOKEN	401	Authentication token is invalid or expired
AGENT_NOT_FOUND	404	Specified agent ID does not exist
RATE_LIMIT_EXCEEDED	429	API rate limit exceeded
VALIDATION_ERROR	400	Request validation failed
INTERNAL_ERROR	500	Internal server error

JavaScript SDK

Official JavaScript SDK for SnapIT Agent

Installation

Via CDN

<script src="https://api.snapitagent.com/sdk/snapit-agent.min.js"></script>

Via NPM

npm install snapit-agent-sdk

import SnapitAgent from 'snapit-agent-sdk';

Quick Start

// Initialize the SDK
const agent = new SnapitAgent({
  agentId: 'your-agent-id',
  apiKey: 'your-api-key'
});

// Send a message
agent.sendMessage('Hello, how can you help me?')
  .then(response => {
    console.log('AI Response:', response.message);
  })
  .catch(error => {
    console.error('Error:', error);
  });

SDK Methods

Constructor

const agent = new SnapitAgent(options)

Option	Type	Required	Description
agentId	string	Yes	Your agent's unique identifier
apiKey	string	No	API key for authenticated requests
baseUrl	string	No	Custom API base URL
debug	boolean	No	Enable debug logging

sendMessage()

agent.sendMessage(message, options)
  .then(response => {
    // Handle response
  });

startConversation()

const conversationId = await agent.startConversation({
  userId: 'user123',
  metadata: {
    source: 'website',
    page: window.location.pathname
  }
});

getConversationHistory()

const history = await agent.getConversationHistory(conversationId);

Event Listeners

// Listen for incoming messages
agent.on('message', (data) => {
  console.log('New message:', data.message);
});

// Listen for typing indicators
agent.on('typing', (data) => {
  console.log('Agent is typing...');
});

// Listen for errors
agent.on('error', (error) => {
  console.error('SDK Error:', error);
});

// Listen for connection status
agent.on('connected', () => {
  console.log('Connected to SnapIT Agent');
});

agent.on('disconnected', () => {
  console.log('Disconnected from SnapIT Agent');
});

Complete Example

// Initialize with configuration
const agent = new SnapitAgent({
  agentId: 'agent_123',
  apiKey: 'your-api-key',
  debug: true
});

// Set up event listeners
agent.on('connected', () => {
  console.log('✅ Connected to SnapIT Agent');
});

agent.on('message', (data) => {
  displayMessage(data.message, 'agent');
});

agent.on('error', (error) => {
  console.error('❌ Error:', error);
});

// Start conversation
async function initializeChat() {
  try {
    const conversationId = await agent.startConversation({
      userId: getCurrentUserId(),
      metadata: {
        userAgent: navigator.userAgent,
        referrer: document.referrer,
        timestamp: new Date().toISOString()
      }
    });
    
    console.log('Started conversation:', conversationId);
  } catch (error) {
    console.error('Failed to start conversation:', error);
  }
}

// Send message function
async function sendMessage(message) {
  try {
    const response = await agent.sendMessage(message, {
      includeContext: true,
      expectResponse: true
    });
    
    displayMessage(message, 'user');
    displayMessage(response.message, 'agent');
  } catch (error) {
    console.error('Failed to send message:', error);
  }
}

// Initialize chat when page loads
document.addEventListener('DOMContentLoaded', initializeChat);

Code Examples

Practical examples to get you started quickly

Basic Widget Integration

Minimal Setup

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    
    <!-- SnapIT Agent Widget -->
    <script>
      window.SnapitAgentConfig = {
        agentId: 'agent_123456789'
      };
    </script>
    <script src="https://api.snapitagent.com/widget.js"></script>
</body>
</html>

Custom Styling

<script>
  window.SnapitAgentConfig = {
    agentId: 'agent_123456789',
    position: 'bottom-left',
    buttonText: '🤖 Need Help?',
    buttonColor: '#2563eb',
    welcomeMessage: 'Hi! I\'m your AI assistant. How can I help?',
    chatTitle: 'Customer Support',
    theme: 'light',
    autoOpen: false,
    soundNotifications: true
  };
</script>
<script src="https://api.snapitagent.com/widget.js"></script>

React Integration

Using useEffect Hook

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Configure SnapIT Agent
    window.SnapitAgentConfig = {
      agentId: 'agent_123456789',
      position: 'bottom-right',
      buttonText: '💬 Chat with AI',
      theme: 'light'
    };
    
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://api.snapitagent.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    // Cleanup function
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      <h1>My React App</h1>
      <p>The SnapIT Agent widget will appear here!</p>
    </div>
  );
}

export default App;

Custom React Component

import React, { useEffect, useState } from 'react';

const SnapitAgentWidget = ({ agentId, config = {} }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  
  useEffect(() => {
    // Set configuration
    window.SnapitAgentConfig = {
      agentId,
      ...config
    };
    
    // Load script
    const script = document.createElement('script');
    script.src = 'https://api.snapitagent.com/widget.js';
    script.async = true;
    script.onload = () => setIsLoaded(true);
    document.head.appendChild(script);
    
    return () => {
      if (document.head.contains(script)) {
        document.head.removeChild(script);
      }
    };
  }, [agentId, config]);
  
  return (
    <div id="snapit-agent-widget">
      {!isLoaded && <div>Loading AI assistant...</div>}
    </div>
  );
};

// Usage
function MyApp() {
  return (
    <div>
      <h1>My App</h1>
      <SnapitAgentWidget 
        agentId="agent_123456789"
        config={{
          position: 'bottom-right',
          buttonText: '🤖 AI Support',
          theme: 'dark'
        }}
      />
    </div>
  );
}

Vue.js Integration

<template>
  <div id="app">
    <h1>My Vue App</h1>
    <div id="snapit-agent-widget"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    // Configure SnapIT Agent
    window.SnapitAgentConfig = {
      agentId: 'agent_123456789',
      position: 'bottom-right',
      buttonText: '💬 Chat Support',
      theme: 'light'
    };
    
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://api.snapitagent.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
  },
  
  beforeDestroy() {
    // Clean up if needed
    if (window.SnapitAgent) {
      window.SnapitAgent.destroy();
    }
  }
}
</script>

Advanced Customization

Custom Event Handling

<script>
  window.SnapitAgentConfig = {
    agentId: 'agent_123456789',
    position: 'bottom-right',
    
    // Event callbacks
    onWidgetReady: function() {
      console.log('SnapIT Agent widget is ready!');
      // Track widget load event
      gtag('event', 'widget_loaded', {
        'agent_id': 'agent_123456789'
      });
    },
    
    onChatOpen: function() {
      console.log('Chat window opened');
      // Track chat open event
      gtag('event', 'chat_opened', {
        'agent_id': 'agent_123456789'
      });
    },
    
    onChatClose: function() {
      console.log('Chat window closed');
    },
    
    onMessageSent: function(message) {
      console.log('User sent message:', message);
      // Track user engagement
      gtag('event', 'user_message', {
        'message_length': message.length
      });
    },
    
    onMessageReceived: function(message) {
      console.log('Agent responded:', message);
    },
    
    onError: function(error) {
      console.error('SnapIT Agent error:', error);
      // Report errors to your monitoring service
      Sentry.captureException(error);
    }
  };
</script>

Conditional Loading

<script>
  // Only load the widget for certain pages or conditions
  function shouldLoadWidget() {
    // Don't show on mobile devices
    if (window.innerWidth < 768) return false;
    
    // Only show on specific pages
    const allowedPages = ['/support', '/contact', '/pricing'];
    if (!allowedPages.some(page => window.location.pathname.includes(page))) {
      return false;
    }
    
    // Don't show for returning visitors who already interacted
    if (localStorage.getItem('snapit_agent_interacted')) {
      return false;
    }
    
    return true;
  }
  
  if (shouldLoadWidget()) {
    window.SnapitAgentConfig = {
      agentId: 'agent_123456789',
      position: 'bottom-right',
      // Auto-open after 30 seconds if user hasn't scrolled much
      autoOpen: window.scrollY < 100,
      
      onChatClose: function() {
        // Remember that user interacted
        localStorage.setItem('snapit_agent_interacted', 'true');
      }
    };
    
    // Load script after 3 seconds to avoid blocking page load
    setTimeout(() => {
      const script = document.createElement('script');
      script.src = 'https://api.snapitagent.com/widget.js';
      script.async = true;
      document.head.appendChild(script);
    }, 3000);
  }
</script>

E-commerce Integration

<script>
  // Pass shopping cart context to the agent
  function getShoppingContext() {
    return {
      cartItems: getCartItems(), // Your cart function
      cartTotal: getCartTotal(), // Your total function
      currentProduct: getCurrentProduct(), // Current product page
      customerId: getCustomerId(), // Logged in user
      previousOrders: getPreviousOrders() // Order history
    };
  }
  
  window.SnapitAgentConfig = {
    agentId: 'ecommerce_agent_123',
    position: 'bottom-right',
    buttonText: '🛒 Shopping Assistant',
    
    // Pass context with every message
    contextProvider: getShoppingContext,
    
    // Custom welcome based on cart status
    welcomeMessage: function() {
      const cartItems = getCartItems();
      if (cartItems.length > 0) {
        return `Hi! I see you have ${cartItems.length} items in your cart. Need help with checkout?`;
      }
      return "Hi! I'm here to help you find what you're looking for!";
    },
    
    onMessageSent: function(message) {
      // Track customer inquiries
      analytics.track('Customer Inquiry', {
        message: message,
        cart_value: getCartTotal(),
        page: window.location.pathname
      });
    }
  };
</script>