Embedding Guide

Integrate AurraCloud agents into your websites and applications

Overview

AurraCloud agents can be embedded anywhere on the web using our simple iframe integration or API. This guide covers all the options for embedding your agents, from basic iframe implementation to advanced API integration and UI customization.

Simple iframe embed
Customizable appearance
API integration
Basic Embedding with iframe

The simplest way to embed your agent is using an iframe. Copy this code and replace YOUR_AGENT_ID with your agent's ID.

<iframe
  src="https://aurracloud.com/embed?agentId=YOUR_AGENT_ID"
  width="400"
  height="600"
  style="border: none; border-radius: 8px;"
  loading="eager"
></iframe>

How to get your Agent ID

  1. Go to your Agents Dashboard
  2. Select the agent you want to embed
  3. Click the "Embed" button in the agent details page
  4. Copy the provided iframe code or just the Agent ID
Customization Options

You can customize your embedded agent by adding URL parameters to the iframe src attribute.

ParameterTypeDescriptionExample
agentIdstringRequired. Your agent's unique identifier.agentId=abc123
themestringColor theme for the chat interface.theme=dark or theme=light
welcomeMessagestringCustom welcome message.welcomeMessage=Hello%20there!
suggestedQuestionsbooleanShow suggested questions.suggestedQuestions=true
chatIdstringOptional chat session ID.chatId=session123

Example with Customization

<iframe
  src="https://aurracloud.com/embed?agentId=YOUR_AGENT_ID&theme=dark&welcomeMessage=Hello%20there!&suggestedQuestions=true"
  width="400"
  height="600"
  style="border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
  loading="eager"
></iframe>
Advanced Integration Patterns

Floating Chat Button

Add a floating chat button to your website that opens the agent in a popup when clicked.

<!-- Container for the floating button and chat -->
<div id="aurra-chat-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
  <!-- Chat button -->
  <button 
    id="aurra-chat-button" 
    style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"
    onclick="toggleAurraChat()"
  >
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M22 2L11 13"></path>
      <path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
    </svg>
  </button>
  
  <!-- Chat iframe (hidden by default) -->
  <div id="aurra-chat-iframe" style="display: none; position: absolute; bottom: 70px; right: 0; width: 350px; height: 500px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.2);">
    <iframe
      src="https://aurracloud.com/embed?agentId=YOUR_AGENT_ID"
      width="100%"
      height="100%"
      style="border: none;"
      loading="eager"
    ></iframe>
  </div>
</div>

<script>
  function toggleAurraChat() {
    const iframe = document.getElementById('aurra-chat-iframe');
    if (iframe.style.display === 'none') {
      iframe.style.display = 'block';
    } else {
      iframe.style.display = 'none';
    }
  }
</script>
Mobile Integration

When embedding agents on mobile websites or web apps, consider these best practices:

Mobile Best Practices

  • Use responsive design to adapt to different screen sizes
  • Consider using a floating button that expands to full screen on mobile
  • Set height to at least 70vh on mobile for better user experience
  • Add loading="eager" to improve performance
  • Test your integration on multiple mobile devices and browsers

Mobile-Optimized Example

<!-- Mobile-optimized agent embed -->
<div class="mobile-chat-container">
  <iframe
    src="https://aurracloud.com/embed?agentId=YOUR_AGENT_ID"
    width="100%"
    height="100%"
    style="border: none;"
    loading="eager"
  ></iframe>
</div>

<style>
  .mobile-chat-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70vh;
    z-index: 100;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }
  
  @media (min-width: 768px) {
    .mobile-chat-container {
      left: auto;
      right: 20px;
      bottom: 20px;
      width: 400px;
      height: 600px;
      border-radius: 12px;
    }
  }
</style>
API Integration

For more advanced use cases, you can integrate your agent directly via our API. This gives you complete control over the UI and interaction flow.

const response = await fetch('https://api-v1.aurracloud.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({
    model: 'gpt-4o-mini',
    messages: [
      {
        role: 'user',
        content: 'What is the current price of ETH?'
      }
    ],
    agent_id: 'YOUR_AGENT_ID'
  })
});

API Benefits

  • Complete control over the chat UI and experience
  • Seamless integration with your existing application design
  • Custom event handling and message processing
  • Server-side integration options
Security and Privacy Considerations

When embedding AI agents on your website, consider these security and privacy best practices:

  • Add a clear privacy policy explaining how user conversations are processed
  • Consider implementing Content Security Policy (CSP) headers
  • Use HTTPS on your website to ensure secure communication
  • Be transparent about AI usage and data handling
  • Consider adding user consent mechanisms before activating the agent

Next Steps

API Reference

Complete API documentation for advanced integrations

Creating Agents

Learn how to create and customize AI agents

Need Help with Integration?

Join our community or reach out to our team for support

    We use cookies to enhance your experience, analyze site usage, and personalize content.

    AurraCloud - a Monemetrics Product