Overview
This guide explains how to embed your TeamAI chatbot on your website to enhance user engagement and provide instant support to visitors. You'll learn two different integration methods: iframe embedding and popup implementation.
Learning Objectives:
Access the chatbot embedding options in TeamAI
Implement iframe embedding for in-page chatbot placement
Set up a popup chatbot that appears in the corner of your website
Verify proper chatbot functionality after implementation
Prerequisites
You'll Need:
Access to your workspace with agent management permissions
A configured TeamAI agent ready for deployment
Access to edit your website's HTML code
Basic understanding of HTML implementation (helpful but not required)
Accessing Embed Options
Navigating to Website Integration
Sign in to https://app.teamai.com
In the left sidebar, open Agents
On the agent row or card, open the options menu (⋯), then click Edit.
Do not click Use Agent; that opens a chat session, not the editor.
In the agent editor, click Channels in the left sidebar (below tabs such as General and Tools).
Note: You need permission to edit the agent to see Edit in the options menu. If Edit is missing, ask a workspace admin to grant edit access or to configure the embed for you. The agent must be published before the embed works on a live site.
Choose a website embed option
On the Agent Channels page, select the Website channel
Pick an embed type:
Iframe: embed the agent inline on a page.
Popup: show a chat bubble (typically bottom-right).
Copy the embed code TeamAI provides.
Paste the code into your site HTML.
Open the live page and confirm the agent loads and responds.
Publish and test
Confirm the agent is published (not draft-only) before testing the embed.
If the widget does not appear, verify embed code placement and that you edited the correct agent.
Verifying Implementation
Testing Your Embedded Chatbot
Open your website in a browser
Navigate to the page where you implemented the chatbot
Ensure the page has fully loaded
Confirm the chatbot appears correctly
For iframe: Check that the chatbot appears in the designated area
For popup: Verify the chatbot icon appears in the bottom-right corner
Test chatbot functionality
Interact with the chatbot by sending a test message
Confirm the chatbot responds appropriately
Test any specific features your chatbot should provide
Result: A properly functioning chatbot that enhances your website's user experience.
Important: If your website uses a Content Security Policy (CSP), you may need to update it to allow content from TeamAI domains.
Best Practices
Choose the right embedding method: Select iframe for dedicated support pages and popup for general website presence.
Customize appearance: Use the TeamAI interface to match your chatbot's appearance to your website's branding.
Test across devices: Ensure your chatbot works well on desktop, tablet, and mobile devices.
Monitor performance: Review chatbot analytics regularly to improve effectiveness.
Common Questions
Q: Can I customize the appearance of the chatbot?
A: Yes, you can customize colors, chat bubble text, and other appearance settings in the TeamAI interface before copying the embed code.
Q: Will the chatbot work on mobile devices?
A: Yes, the embedded chatbot is responsive and adapts to different screen sizes.
Q: Can I have different chatbots on different pages of my website?
A: Yes, you can embed different chatbot agents on different pages by using the corresponding embed codes.
Q: How do I update my chatbot after embedding?
A: Changes made to your agent in the TeamAI platform will automatically reflect in the embedded chatbot without requiring code changes.
Q: Does embedding a chatbot affect my website's loading speed?
A: The chatbot loads asynchronously, minimizing impact on your website's performance.
Q: Can I control when the popup chatbot appears?
A: Yes, advanced settings allow you to control timing, triggers, and initial messages.