> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convocore.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Iframe

> Explore the versatile applications of iframes for Convocore AI agents

Iframes introduce a whole new range of use cases for Convocore 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?

<CardGroup cols={2}>
  <Card title="Versatility" icon="shapes">
    Easily integrate your agent into various platforms and websites.
  </Card>

  <Card title="Conflict Avoidance" icon="shield-halved">
    Minimize potential conflicts with existing scripts or stylesheets.
  </Card>

  <Card title="Customization" icon="paintbrush">
    Tailor the agent's appearance and behavior to fit specific use cases.
  </Card>

  <Card title="Ease of Sharing" icon="share-nodes">
    Quickly deploy your agent via URL or embed code.
  </Card>
</CardGroup>

## Popular Use Cases

<AccordionGroup>
  <Accordion title="Platform Integration" icon="puzzle-piece">
    Make your agent available within your own platform or third-party services like PowerBI, Slack, Teams, or Monday.com.

    <Tip>
      Consider the specific requirements and limitations of each platform when integrating your agent.
    </Tip>
  </Accordion>

  <Accordion title="SaaS Add-on" icon="rocket">
    Offer your Convocore Agent as a value-added feature in your SaaS platform.

    <Note>
      This approach allows for various monetization strategies, such as monthly retainer fees or custom setups with credit-based subscription models.
    </Note>

    <Card title="Embeddable Pricing" icon="money-bill-trend-up" href="/whitelabeling/agency/embeddable-pricing">
      Learn more about turning your agent into a branded client-facing offer with Convocore's embeddable pricing flow.
    </Card>
  </Accordion>

  <Accordion title="Website Layout Enhancement" icon="browser">
    Integrate the agent directly into your website's layout for a unique user experience.

    <CardGroup cols={2}>
      <Card title="Homepage Integration" icon="house">
        Embed the agent on your front page for immediate user engagement.
      </Card>

      <Card title="Interactive FAQ" icon="circle-question">
        Replace traditional FAQ pages with an AI-powered, interactive experience.
      </Card>
    </CardGroup>
  </Accordion>

  {" "}

  <Accordion title="Shareable URL" icon="link">
    Use the iframe's source URL to easily share your agent via email, chat, or as
    a linked button on your website.
  </Accordion>
</AccordionGroup>

## Implementation Guide

**To integrate your Convocore Agent using an iframe, follow these steps:**

<Steps>
  <Step title="Get Your Agent's Iframe URL">
    1. Log in to your Convocore Dashboard
    2. Navigate to your agent and click on `Deploy` in the upper right.
    3. Copy the iframe code snippet located beneath `iframe`

    <img src="https://mintcdn.com/convocore/uZzIbBiivXuGDpf1/images/deploy_iframe.png?fit=max&auto=format&n=uZzIbBiivXuGDpf1&q=85&s=860ba0ce43b28921f2c3a2c643b57c6e" width="500" data-path="images/deploy_iframe.png" />
  </Step>

  {" "}

  <Step title="Choose Your Integration Method">
    Decide where and how you want to embed your agent **(e.g., website, platform,
    shareable link)**.
  </Step>

  <Step title="Add the Iframe Code">
    Insert the iframe code into your chosen location. Here's a basic example:

    ```html theme={null}
    <iframe
      src="https://convocore.ai/app/eu/render/YOUR_AGENT_ID/iframe"
      style="width: 100%; height: 600px;"
      frameborder="0">
    </iframe>
    ```

    <Warning>
      Replace `YOUR_AGENT_ID` with your actual Convocore Agent ID.
    </Warning>
  </Step>

  <Step title="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.

    ```html theme={null}
    <iframe
      src="https://convocore.ai/app/eu/render/YOUR_AGENT_ID/iframe"
      width="550" height="650" style={{borderRadius: '1.2rem' }}
      frameborder="0">
    </iframe>
    ```

    <Accordion title="See it in action">
      **This is the iframe above:**

      <iframe src="https://convocore.ai/app/eu/render/wca8mwi90qwbrj57/iframe" width="550" height="650" style={{borderRadius: '1.2rem' }} frameborder="0" />

      ## While youre learning about earth, listen to some house tunes (cause why not):

      <iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1E8NZPyWpy01o7?utm_source=generator" width="550" height="450" style={{borderRadius: '1.2rem' }} frameborder="0" />
    </Accordion>
  </Step>
</Steps>

## Advanced Integration Ideas

<CardGroup cols={2}>
  <Card title="Responsive Design" icon="mobile-screen">
    Use CSS media queries to adjust the iframe's size based on screen
    dimensions, ensuring a good experience on all devices.
  </Card>

  <Card title="Modal Integration" icon="window-maximize">
    Implement the iframe within a modal for a pop-up experience that doesn't
    require constant screen real estate.
  </Card>

  <Card title="Multi-Agent Dashboard" icon="table-columns">
    Create a dashboard with multiple iframes, each representing a different
    specialized agent.
  </Card>

  <Card title="Interactive Product Pages" icon="cart-shopping">
    Embed agent iframes on product pages to provide instant, AI-powered product
    information and support.
  </Card>
</CardGroup>

## Best Practices

<Check>
  * 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.
</Check>

## Conclusion

Iframe integration opens up a world of possibilities for Convocore. 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.