🚀 Astroid Chat Widget - Integration Guide

Welcome! Here's how to add the Astroid chat widget to your website.

📋 Step 1: Add the Script

Copy and paste this code before the closing </body> tag of your website:

<!-- Astroid Chat Widget -->
<script>
  // Your unique configuration (provided by Astroid)
  window.AstroidChatConfig = {
    tenantId: "YOUR_TENANT_ID",        // Required: Your unique company ID
    apiUrl: "https://api.astroid.io",   // Optional: API endpoint
    companyName: "Your Company",        // Optional: Display name
    primaryColor: "#2563eb",           // Optional: Brand color
    position: "right"                  // Optional: "left" or "right"
  };
</script>
<script src="https://cdn.astroid.io/widget/asteroid-widget.iife.js"></script>
  

⚙️ Configuration Options

Option	Type	Required	Description
`tenantId`	string	✅ Yes	Your unique company identifier (provided by Astroid)
`apiUrl`	string	No	Custom API endpoint URL
`companyName`	string	No	Name displayed in chat header
`primaryColor`	string	No	Hex color for branding (e.g., "#ff5500")
`position`	string	No	"left" or "right" - widget position

🎮 JavaScript API

You can also control the widget programmatically:

// Open the chat widget
window.AstroidChat.open();

// Close the chat widget
window.AstroidChat.close();

// Initialize with custom config
window.AstroidChat.init({
  tenantId: "abc123",
  companyName: "My Company"
});
  

✅ Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>

  <h1>Welcome to My Website</h1>
  <p>Your content here...</p>

  <!-- Astroid Chat Widget -->
  <script>
    window.AstroidChatConfig = {
      tenantId: "company_abc123",
      companyName: "ABC Corp Support",
      primaryColor: "#10b981"
    };
  </script>
  <script src="https://cdn.astroid.io/widget/asteroid-widget.iife.js"></script>

</body>
</html>
  

📞 Need Help?
Contact Astroid support at support@astroid.io