AI Chat Agent Embedded

Integration Methods

1. JavaScript Embed (Recommended)

This is the preferred method. Paste the following code before the closing </body> tag in your website’s HTML:

<script>
	window.embeddedAI Chat AgentConfig = {
	  AI Chat AgentId: "your-AI Chat Agent-id",
	  divId: "kipps-AI Chat Agent",
	  user_detail: {
	    id: "user-123",
	    name: "John Doe",
	    email: "john@example.com",
	    companyId: "company-123",
	    companyName: "Acme Inc."
	  }
	};

	let rootDiv = document.createElement("div");
	rootDiv.id = window.embeddedAI Chat AgentConfig.divId;
	document.body.appendChild(rootDiv);

	let script = document.createElement("script");
	script.src = "https://your-cdn-url/AI Chat Agent.js";
	script.defer = true;
	script.async = true;
	document.body.appendChild(script);
</script>

2. Iframe Integration

For platforms that limit JavaScript usage or require iframe-based integration:

<iframe src="https://your-domain.com/iframe/your-AI Chat Agent-id" title="AI AI Chat Agent" width="100%" height="600px" frameborder="0"> </iframe>

Configuration Options

Basic Configuration

• AI Chat AgentId: A unique identifier generated for your AI Chat Agent instance
• divId: The HTML id of the container element where the AI Chat Agent interface will be injected
• user_detail (optional): Pass authenticated or contextual user data for a personalized AI Chat Agent experience (name, email, company, etc)

Customization Features

• Inherits theme colors, logo, and branding
• Custom header, welcome message, input placeholder
• Light/dark mode support
• Automatic lead form display (name, email, phone)
• Real-time validation & thank-you message

Implementation Steps

1. Get Code → Agent > Embed
2. Copy Code → Choose JS or iframe
3. Paste Code → Insert in your HTML
4. Test → Verify the AI Chat Agent loads
5. Customize → Appearance, welcome text, forms

Security & Privacy

Data Protection

• End-to-end encrypted data
• GDPR-compliant infra
• Custom data retention
• Built-in consent management

Cross-Domain Security

• CORS-enabled APIs
• Input sanitization
• Rate limiting against abuse

Troubleshooting

Common Issues

• Invalid AI Chat AgentId or URL
• CSS overrides from site theme
• Incomplete layout rendering
• Script loading conflicts

Debug Tips

• Use browser dev tools
• Check console for JS errors
• Test in a clean HTML page
• Confirm AI Chat Agent is trained & live

Best Practices

• Always use async + defer for loading
• Keep script at the end of body
• Ensure AI Chat Agent appearance is consistent with site branding

Achieve 100% Brand Consistency, Instantly. Your master settings from appearance and behavior to lead forms are automatically synced to every embedded bot, eliminating configuration drift and ensuring a unified customer experience.

Frequently Asked Questions

Can I embed the same AI Chat Agent on multiple websites? Yes. The same embed code can be pasted into multiple websites. All instances use the same agent configuration, knowledge base, and appearance settings. Changes made in the Kipps.AI dashboard are reflected across all embedded instances.

Does the embed code work with website builders like Wix, Squarespace, or Webflow? Yes. Use the iframe method for no-code website builders that do not allow custom JavaScript. For platforms that support custom code injection (like Webflow or Squarespace's custom code sections), the JavaScript embed method is preferred.

Will the AI Chat Agent slow down my website's loading speed? The JavaScript embed uses async and defer attributes, so it does not block your page from loading. The AI Chat Agent script loads in the background after the main page content is rendered.

How do I pass the logged-in user's information to the embedded chat? Populate the user_detail object in the JavaScript embed configuration with your application's user data (id, name, email, company). This personalizes the chat experience and allows lead tracking to be associated with known users.

What happens to the conversation if a user refreshes the page? Conversation history is maintained using session storage. When a user refreshes the same page, the previous conversation context is typically restored. This provides continuity without requiring the user to repeat themselves.

Can I hide or show the chat widget programmatically based on user actions? Yes. The JavaScript embed exposes controls through the embeddedAIChatAgentConfig object. You can trigger the widget to open or close using JavaScript events on your page. Consult the developer documentation for the available API methods.

Is the embedded chat widget GDPR compliant? The Kipps.AI platform includes built-in consent management features. You can configure the chat widget to display a consent notice before collecting any user data. Review your specific regional requirements and enable the appropriate consent settings in the agent's appearance configuration.