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 assistant (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
Navigate to your assistant's settings
Open your TeamAI workspace
Select the assistant (agent) you want to embed
Access the Channels section
Locate and click on "Channels" in the assistant navigation menu
This displays all available deployment options for your assistant
Select Website integration
Click on "Website" from the available channels
The website integration window will appear showing embedding options
Result: You'll see the different embedding options available for your chatbot.
Embed your chatbot
Under website integration you will find the different options:
Option 1: Embedding via iframe
Embedding your chatbot using an iframe allows you to place it anywhere on your webpage. Here’s how:
Click on the "website integration" tab and choose the first option.
Copy the provided iframe code.
Paste this iframe code into the HTML of your webpage where you want the chatbot to appear.
Option 2: Embedding as a Popup
Embedding your chatbot as a popup places it at the bottom right corner of your website, making it easily accessible without taking up much space. Follow these steps:
Click on the "website integration" tab and choose the second option.
Select the second script option for embedding as a popup.
Paste this script code into the HTML of your webpage.
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 assistants on different pages by using the corresponding embed codes.
Q: How do I update my chatbot after embedding?
A: Changes made to your assistant 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.