Framer Integration

Integrate AssistLoop.ai's AI chatbot into your Framer designs and prototypes to create interactive customer support experiences within your web projects.

Prerequisites

• A Framer account and project
• An AssistLoop.ai account with a trained AI agent
• Basic familiarity with Framer's interface

Step 1: Sign Up and Train Your AI Agent

Create an Account

1. Visit AssistLoop.ai and sign up for a free account
2. Complete your account setup and verify your email

Train Your AI Agent

1. After signing up, create your AI agent
2. Provide training materials such as:
   • Your website URL
   • PDF documents
   • DOCX files
   • Text-based Q&A pairs
3. This enables the chatbot to understand and respond accurately to user inquiries

Step 2: Install the AssistLoop Plugin

Access Framer Marketplace

1. Open your Framer project
2. Navigate to the Components panel
3. Click on the "+" button to add new components

Search for AssistLoop

1. Search for "AssistLoop" in the Framer marketplace
2. Look for the official AssistLoop AI Chatbot component
3. Click "Add to Project" to install

Step 3: Add Chatbot to Your Design

Place the Component

1. Drag the AssistLoop Chatbot component from your components panel
2. Position it where you want the chatbot to appear on your canvas
3. Resize and adjust the component as needed

Configure the Component

1. Select the AssistLoop component on your canvas
2. In the right panel, find the configuration options
3. Enter your Agent ID from your AssistLoop dashboard

Step 4: Customize the Chatbot

Visual Customization

Customize the chatbot appearance to match your design:

• Position: Adjust placement and size
• Colors: Match your design's color scheme
• Typography: Use your project's font styles
• Layout: Integrate seamlessly with your design

Behavior Settings

• Trigger: Set when the chatbot appears
• Greeting: Customize the initial message
• Responses: Configure suggested replies
• Availability: Set operating hours if needed

Step 5: Test and Deploy

Preview Mode

1. Enter Framer's preview mode
2. Test the chatbot functionality
3. Verify responses and interactions
4. Check mobile responsiveness

Publish Your Project

1. Once satisfied with the integration
2. Publish your Framer project
3. The AI chatbot will be live and functional

Features

• Design Integration: Seamlessly fits into your Framer designs
• Interactive Prototypes: Test AI functionality in prototypes
• Responsive Design: Works across all device sizes
• Real-time AI: Live chatbot responses in your designs
• Easy Customization: Simple visual and behavioral adjustments

Troubleshooting

Component Not Loading

• Ensure the AssistLoop plugin is properly installed
• Check if your Agent ID is correctly entered
• Verify your AssistLoop.ai account is active

Chatbot Not Responding

• Confirm your AI agent is properly trained
• Check the Agent ID configuration
• Ensure your internet connection is stable

Design Issues

• Adjust component positioning and sizing
• Check for overlapping elements
• Verify responsive breakpoints

Next Steps

After successful integration:

1. Test the chatbot with various user scenarios
2. Gather feedback from prototype users
3. Iterate on the design and functionality
4. Prepare for production deployment

Your Framer project now includes an intelligent AI-powered customer support chatbot!