Integration Guide

The Integration page provides everything you need to deploy your AI chatbot on your website or share it with your users. Access it from Admin > Integration in your admin panel.

Administration Panel URL

This is the URL for accessing your admin dashboard. Share this with team members who need administrative access.

https://xinfer.ai/t/[your-subdomain]/admin

Only users with admin privileges can access this URL. Regular users will be redirected to sign in or denied access.

Full Chat Interface URL

This is the direct link to your full-page chat interface. Share this URL with users who need the complete chat experience.

https://xinfer.ai/t/[your-subdomain]

Use this URL for:

Sharing on social media
Adding to email signatures
Linking from your website's navigation
QR codes for print materials

Embeddable Chat Widget

Add a floating chat widget to any website. The widget appears as a button in the corner of the page that expands into a full chat interface when clicked.

Simple Integration

Add this single line to your HTML, just before the closing </body> tag:

<script src="https://xinfer.ai/t/[your-workspace]/widget.js" async></script>

Replace [your-workspace] with your workspace subdomain (e.g., mycompany).

This creates a chat button in the bottom-right corner of your website.

Important: The widget URL must follow the /t/[workspace]/widget.js pattern. URLs like /embed.js or /widget.js without the tenant path do not exist.

Advanced Integration - Data Attributes

Pass customer information using HTML data attributes:

<script
  src="https://xinfer.ai/t/[your-subdomain]/widget.js"
  data-customer-id="12345"
  data-customer-name="John Doe"
  data-customer-email="john@example.com"
  data-customer-phone="+1-555-123-4567"
  data-position="bottom-right"
  async
></script>

Advanced Integration - JavaScript Configuration

For more control, use JavaScript configuration with callback support:

<script>
  window.XinferChat = {
    customerId: '12345',
    customerName: 'John Doe',
    customerEmail: 'john@example.com',
    customerPhone: '+1-555-123-4567',
    position: 'bottom-left',
    onReady: function() {
      console.log('Chat widget is ready');
    }
  };
</script>
<script src="https://xinfer.ai/t/[your-subdomain]/widget.js" async></script>

Widget Configuration Options

Option	Data Attribute	Description
Customer ID	`data-customer-id`	Your internal customer identifier for session linking and analytics
Customer Name	`data-customer-name`	Pre-fills the name field in follow-up forms
Customer Email	`data-customer-email`	Pre-fills the email field in follow-up forms
Customer Phone	`data-customer-phone`	Pre-fills the phone field in follow-up forms
Position	`data-position`	Widget position: `bottom-right` (default) or `bottom-left`

Programmatic Control

When using JavaScript configuration, you can control the widget programmatically:

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

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

// Toggle the chat widget
window.XinferChat.toggle();

Best Practices

Use customer data - Pass customer information when available to provide personalized experiences and pre-fill forms
Position carefully - Choose a widget position that doesn't overlap with other UI elements on your site
Load asynchronously - Always include the async attribute to prevent the widget from blocking page load
Test thoroughly - Test the widget on different devices and screen sizes before going live
Monitor conversations - Use the admin dashboard to review chat history and improve responses

Troubleshooting

Widget not appearing?

Check that the script URL is correct
Verify your subdomain is active
Check browser console for JavaScript errors

Customer data not showing?

Ensure data attributes are spelled correctly
Check that values don't contain special characters that need escaping

Widget in wrong position?

Verify the data-position attribute value
Check for CSS conflicts with position: fixed elements

App Config - Customize widget appearance and behavior
Follow Ups - View and manage customer inquiries from the widget
Users - Manage admin access to the dashboard