Documentation

Setup Chat Widget

Get the embed code for your chat widget and configure its appearance. Access it from Admin > Widget Setup in your admin panel.

Embed Code

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://[your-subdomain].xinfer.ai/widget.js" async></script>

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

Advanced Integration - Data Attributes

Pass customer information using HTML data attributes:

<script
  src="https://[your-subdomain].xinfer.ai/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://[your-subdomain].xinfer.ai/widget.js" async></script>

Configuration Options

OptionData AttributeDescription
Customer IDdata-customer-idYour internal customer identifier for session linking and analytics
Customer Namedata-customer-namePre-fills the name field in follow-up forms
Customer Emaildata-customer-emailPre-fills the email field in follow-up forms
Customer Phonedata-customer-phonePre-fills the phone field in follow-up forms
Positiondata-positionWidget position: bottom-right (default) or bottom-left

Widget Config

The Widget Config section in your admin panel lets you customize the widget's appearance and behavior:

  • Logo - Upload a custom logo displayed for the full web chat
  • Favicon - Custom favicon for the full web chat
  • Colors - Primary color theme for the widget
  • Greeting - Welcome message shown when the widget opens
  • Suggested Actions - Clickable prompts that appear in the widget

Changes to widget config take effect immediately for new visitors.

Activating the Widget

After embedding the script on your website:

  1. Visit your website in a browser
  2. Look for the chat button in the bottom corner
  3. Click it to open the chat interface
  4. Test a conversation to verify everything works

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();

Full Chat Interface

In addition to the embeddable widget, your AI agent has a full-page chat interface at:

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

Use this URL for:

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

Best Practices

  1. Use customer data - Pass customer information when available to provide personalized experiences and pre-fill forms
  2. Position carefully - Choose a widget position that doesn't overlap with other UI elements on your site
  3. Load asynchronously - Always include the async attribute to prevent the widget from blocking page load
  4. Test thoroughly - Test the widget on different devices and screen sizes before going live

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

Related Pages