🌐 Lesson 7.2: Embedding AI Agents in Websites and CRMs

 

🌐 Lesson 7.2: Embedding AI Agents in Websites and CRMs

🎯 Lesson Objective

By the end of this lesson, you will:

  • Understand how to embed your AI agent interface into websites or CRMs

  • Learn different embedding options: iFrames, custom HTML widgets, API endpoints

  • Enable AI features like live chat, document search, and automation directly inside web apps

  • Explore integration strategies with platforms like WordPress, Webflow, HubSpot, and Salesforce

  • Manage authentication, context, and user tracking

🔌 1. Why Embed an AI Agent?

Embedding an AI agent allows your users or team to:

  • Access chatbots and assistants directly from your website or CRM

  • Use AI-powered document search or support tools without extra logins

  • Automate customer interactions, lead qualification, and data analysis

Use cases:

  • Customer support widget

  • Internal sales assistant in CRM

  • AI tutor in a course website

  • Lead qualification agent on landing pages

🧩 2. Methods of Embedding Agents

Method Description
iFrame Embed Embed hosted UI (e.g., Gradio or Streamlit app) in website via <iframe>
API Integration Use a backend endpoint (FastAPI, Flask) and build custom frontend UI
Chat Widget SDK Use prebuilt JS SDKs like Botpress, Tidio, or build your own bubble/chat UI
CRM Plugin Use native plugin systems (e.g., Salesforce Lightning, HubSpot Custom Code)

✅ Method 1: Embedding with iFrame

Step 1: Host your Streamlit or Gradio app (locally or on Streamlit Cloud)

Step 2: Use an <iframe> in your site HTML:

<iframe src="https://your-app.streamlit.app"
        width="100%" height="600px"
        frameborder="0">
</iframe>

✅ Works with:

  • WordPress (via Custom HTML block)

  • Webflow

  • Custom sites

✅ Method 2: Custom Web Frontend + Backend API

Step 1: Build an AI backend using FastAPI:

# app.py
from fastapi import FastAPI
from pydantic import BaseModel
from langchain.chains import ConversationChain

app = FastAPI()

class UserInput(BaseModel):
    message: str

conversation = ConversationChain(...)  # Your LLM logic here

@app.post("/chat")
def chat(input: UserInput):
    response = conversation.run(input.message)
    return {"response": response}

Step 2: Build frontend in React, Vue, or HTML/JS and call /chat via fetch/Axios:

async function sendMessage(message) {
  const res = await fetch('/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });
  const data = await res.json();
  showResponse(data.response);
}

✅ Works inside:

  • Web apps

  • CRMs with JS embedding (e.g., HubSpot, Pipedrive)

  • Portals and dashboards

🧠 3. Embedding in CRM Systems

✅ Salesforce

Options:

  • Use Lightning Components to embed iframe or React-based chatbot

  • Connect to OpenAI via Apex + External Services

  • Store memory in custom fields or records

✅ HubSpot

Options:

  • Use Custom Code Workflows to call an LLM API

  • Embed an iframe or React chatbot on a page

  • Use Private Apps to integrate with CRM data

✅ Pipedrive, Zoho, Monday.com

Options:

  • Webhooks + API integration

  • Native extension development

  • Browser plugin + local LLM APIs

💬 4. Adding Chat Bubble to Website (Custom or 3rd-Party)

🛠️ Option A: Use Chatbot Platforms

  • Tidio, Crisp, Botpress, Drift support OpenAI and can be embedded with 1-line JS

  • Example with Drift:

<script>
  drift.load('your-drift-ID');
</script>

Then connect it to your OpenAI API via backend.

🛠️ Option B: Build Your Own Chat Bubble (React)

Use a small React widget embedded via iFrame or JS:

http://your-agent-widget.js

In React, you’d build a small component like:

const ChatWidget = () => {
  const [messages, setMessages] = useState([]);
  const sendMessage = async (text) => {
    const res = await fetch('/chat', {...});
    ...
  };
  return <div className="chat-widget">...</div>;
};

🔐 5. Handling Auth and User Context

👤 Track Sessions

  • Use cookies or localStorage for anonymous session IDs

  • Store chat history in backend (SQLite, Supabase, Redis)

🔒 Authenticate Users

  • If embedding into a CRM or internal site, use:

    • CRM’s user info (OAuth, token)

    • JWT-based auth from frontend

    • Secure headers to verify access level

📦 6. Hosting and Scalability

Option Best For
Streamlit Cloud Prototypes, public tools
Render/Heroku Small business tools
Docker + VPS Custom, private deployments
Vercel + FastAPI React + API agents

✅ Summary

Topic Key Takeaways
Embedding Methods iFrame, custom JS, API endpoints, or widgets
CRM Integration Salesforce, HubSpot, and others via plugin/API
Chat UI Options Use Gradio, Streamlit, or build custom React UI
Hosting + Auth Choose hosting and secure your agent per user
Real-World Use Support bots, sales assistants, knowledge helpers

e can build it step-by-step!

54
PreviousNext