Iframes introduce a whole new range of use cases for Eagle agent, allowing for seamless integration into various platforms and websites. This method offers flexibility and reduces potential conflicts with existing scripts or stylesheets.

​
Why Use Iframes?

Versatility

Easily integrate your agent into various platforms and websites.

Conflict Avoidance

Minimize potential conflicts with existing scripts or stylesheets.

Customization

Tailor the agent’s appearance and behavior to fit specific use cases.

Ease of Sharing

Quickly deploy your agent via URL or embed code.

​
Implementation Guide

To integrate your Eagle Agent using an iframe, follow these steps:
1

Get Your Agent's Iframe URL

  1. Log in to your Eagle Dashboard
  2. Navigate to your agent and click on Deploy in the upper right.
  3. Copy the iframe code snippet located beneath iframe
2

Choose Your Integration Method

Decide where and how you want to embed your agent (e.g., website, platform, shareable link).
3

Add the Iframe Code

Insert the iframe code into your chosen location. Here’s a basic example:
<iframe
  src="https://eagleagentss.ai/app/eu/render/YOUR_AGENT_ID/iframe"
  style="width: 100%; height: 600px;"
  frameborder="0">
</iframe>
Replace YOUR_AGENT_ID with your actual Eagle Agent ID.
4

Customize Appearance

Adjust the iframe’s width, height, and other attributes to fit your specific use case.We like to set the border radius to the same as your agent as this makes for a more complete style.
<iframe
  src="https://eagleagents.ai/app/eu/render/YOUR_AGENT_ID/iframe"
  width="550" height="650" style={{borderRadius: '1.2rem' }}
  frameborder="0">
</iframe>

​
Advanced Integration Ideas

Responsive Design

Use CSS media queries to adjust the iframe’s size based on screen dimensions, ensuring a good experience on all devices.

Modal Integration

Implement the iframe within a modal for a pop-up experience that doesn’t require constant screen real estate.

Multi-Agent Dashboard

Create a dashboard with multiple iframes, each representing a different specialized agent.

Interactive Product Pages

Embed agent iframes on product pages to provide instant, AI-powered product information and support.

​
Best Practices

  • Ensure your agent’s responses are tailored to the context in which the iframe is used.
  • Regularly update your agent’s knowledge base to keep information current.
  • Monitor user interactions to continually improve your agent’s performance.
  • Consider implementing a feedback mechanism within the iframe to gather user input.

​
Conclusion

Iframe integration opens up a world of possibilities for Eagle Agents. By thinking creatively and leveraging the flexibility of iframes, you can create unique, engaging, and highly functional AI-powered experiences across various platforms and use cases.