Events & Callbacks

Control the widget programmatically and respond to user interactions.

Initialization Methods

There are three ways to configure the widget:

1. Global Config Object

Set configuration before the script loads:


window.loopReplyConfig = {
  agentId: 'your-agent-id',
  user: {
    id: 'user-123',
    name: 'John Doe',
    email: 'john@example.com',
    phone: '+1234567890'
  },
  customFields: {
    plan: 'premium',
    company: 'Acme Inc'
  }
}

2. Data Attributes

Configure via script tag attributes:


<script
  src="https://widget.loopreply.com/embed.js"
  data-agent-id="your-agent-id"
  data-user-name="John Doe"
  data-user-email="john@example.com"
  data-custom='{"plan":"premium"}'
  async
></script>

3. JavaScript API

Initialize programmatically:


LoopReply.init({
  agentId: 'your-agent-id',
  user: { name: 'John', email: 'john@example.com' },
  customFields: { plan: 'premium' }
})

Configuration Options

Option	Type	Description
`agentId`	string	Required. Your bot’s unique ID
`apiUrl`	string	Optional. Custom API endpoint URL
`preview`	boolean	Enable preview mode for testing
`user`	object	User identification data
`customFields`	object	Custom data to attach to conversations

User Object


{
  id?: string      // Your internal user ID
  name?: string    // Display name
  email?: string   // Email address
  phone?: string   // Phone number
}

Methods

init(config)

Initialize the widget with configuration:


LoopReply.init({
  agentId: 'your-agent-id',
  user: { name: 'John', email: 'john@example.com' }
})

open()

Open the chat widget:


LoopReply.open()

close()

Close the chat widget:


LoopReply.close()

toggle()

Toggle the widget open/closed:


LoopReply.toggle()

setUser(user)

Update user information:


LoopReply.setUser({
  id: 'user-123',
  name: 'John Doe',
  email: 'john@example.com',
  phone: '+1234567890'
})

setCustomFields(fields)

Update custom fields:


LoopReply.setCustomFields({
  plan: 'enterprise',
  company: 'Acme Inc',
  accountId: 'acc_123'
})

reset()

Reset the widget state and clear session:


LoopReply.reset()

Use Cases

Custom Open Triggers

Open the widget from custom buttons:


<button onclick="LoopReply.open()">
  Chat with us
</button>
 
<a href="#" onclick="LoopReply.open(); return false;">
  Need help?
</a>

Pre-fill User Data

Identify logged-in users:


// After widget script loads
const user = getCurrentUser() // Your auth system
 
if (user) {
  LoopReply.setUser({
    id: user.id,
    name: user.fullName,
    email: user.email
  })
}

Track Custom Data

Attach context to conversations:


// On page load
LoopReply.setCustomFields({
  page: document.title,
  url: window.location.href,
  referrer: document.referrer
})
 
// When cart updates
function onCartUpdate(cart) {
  LoopReply.setCustomFields({
    cartItems: cart.items.length,
    cartTotal: cart.total
  })
}

Reset on Logout

Clear widget state when user logs out:


function handleLogout() {
  LoopReply.reset()
  // ... rest of logout logic
}

TypeScript Support

Type definitions for the widget API:


interface LoopReplyUser {
  id?: string
  name?: string
  email?: string
  phone?: string
}
 
interface LoopReplyConfig {
  agentId: string
  apiUrl?: string
  preview?: boolean
  user?: LoopReplyUser
  customFields?: Record<string, any>
}
 
interface LoopReply {
  init(config: LoopReplyConfig): void
  open(): void
  close(): void
  toggle(): void
  setUser(user: LoopReplyUser): void
  setCustomFields(fields: Record<string, any>): void
  reset(): void
}
 
declare global {
  interface Window {
    LoopReply?: LoopReply
    loopReplyConfig?: LoopReplyConfig
  }
}