Embedding the Widget

Add the LoopReply chat widget to your website with a simple code snippet.

Basic Installation

Add this code before the closing </body> tag on every page where you want the widget:


<script
  src="https://widget.loopreply.com/embed.js"
  data-agent-id="your-agent-id"
  async
></script>

Replace your-agent-id with your actual agent ID (found in the Deploy tab).

Passing User Data

Identify logged-in users for personalized experiences:


<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"
  async
></script>

Available Attributes

Attribute	Description
`data-agent-id`	Required. Your bot’s unique ID
`data-user-id`	User’s unique identifier
`data-user-name`	User’s display name
`data-user-email`	User’s email address
`data-user-phone`	User’s phone number
`data-custom`	JSON string of custom fields

Framework Integration

React / Next.js


import { useEffect } from 'react'
 
export default function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://widget.loopreply.com/embed.js'
    script.async = true
    script.dataset.agentId = 'your-agent-id'
    document.body.appendChild(script)
 
    return () => {
      document.body.removeChild(script)
    }
  }, [])
 
  return null
}

Vue.js


<script setup>
import { onMounted, onUnmounted } from 'vue'
 
let script = null
 
onMounted(() => {
  script = document.createElement('script')
  script.src = 'https://widget.loopreply.com/embed.js'
  script.async = true
  script.dataset.agentId = 'your-agent-id'
  document.body.appendChild(script)
})
 
onUnmounted(() => {
  if (script) document.body.removeChild(script)
})
</script>

Programmatic Control

After the widget loads, you can control it programmatically:


// Open the widget
window.LoopReply.open()
 
// Close the widget
window.LoopReply.close()
 
// Toggle the widget
window.LoopReply.toggle()
 
// Set user data
window.LoopReply.setUser({
  id: 'user-123',
  name: 'John Doe',
  email: 'john@example.com'
})

Visual customization (colors, branding, position) is configured in the dashboard:

Go to your bot’s Appearance tab (under Configuration)
Use the visual editor to customize appearance
Changes apply automatically to your embedded widget

See Widget Customization for details.

Next Steps

Widget Customization — Configure appearance in the dashboard
Events and Callbacks — Programmatic control