Skip to Content
WidgetInstallation

Widget Installation

Add the LoopReply chat widget to your website.

Basic Installation

Add this script tag 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>

Finding Your Agent ID

  1. Open your bot in the dashboard
  2. Go to the Deploy tab
  3. Copy the agent ID from the embed code

Installation by Platform

HTML / Static Sites

Add the script tag to your HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your content -->
 
  <!-- LoopReply Widget -->
  <script
    src="https://widget.loopreply.com/embed.js"
    data-agent-id="your-agent-id"
    async
  ></script>
</body>
</html>

WordPress

Option 1: Theme Footer

  1. Go to Appearance → Theme Editor
  2. Select footer.php
  3. Add the script before </body>
  4. Save

Option 2: Plugin

  1. Install “Insert Headers and Footers” plugin
  2. Go to Settings → Insert Headers and Footers
  3. Add the script to “Scripts in Footer”
  4. Save

Shopify

  1. Go to Online Store → Themes
  2. Click Actions → Edit code
  3. Open theme.liquid
  4. Add the script before </body>
  5. Save

Wix

  1. Go to Settings → Custom Code
  2. Click Add Custom Code
  3. Paste the script
  4. Set placement to “Body - end”
  5. Save

Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Add the script to “Footer”
  3. Save

Webflow

  1. Go to Project Settings → Custom Code
  2. Add the script to “Footer Code”
  3. Publish your site

Framework Integration

React

import { useEffect } from 'react'
 
declare global {
  interface Window {
    LoopReply?: {
      open: () => void
      close: () => void
      toggle: () => void
      setUser: (user: { id?: string; name?: string; email?: string }) => void
    }
  }
}
 
export function ChatWidget({ agentId }: { agentId: string }) {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://widget.loopreply.com/embed.js'
    script.async = true
    script.dataset.agentId = agentId
    document.body.appendChild(script)
 
    return () => {
      document.body.removeChild(script)
    }
  }, [agentId])
 
  return null
}

Next.js

// components/ChatWidget.tsx
'use client'
 
import { useEffect } from 'react'
 
export function ChatWidget({ agentId }: { agentId: string }) {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://widget.loopreply.com/embed.js'
    script.async = true
    script.dataset.agentId = agentId
    document.body.appendChild(script)
 
    return () => {
      document.body.removeChild(script)
    }
  }, [agentId])
 
  return null
}
 
// app/layout.tsx
import { ChatWidget } from '@/components/ChatWidget'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ChatWidget agentId="your-agent-id" />
      </body>
    </html>
  )
}

Vue.js

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
 
const props = defineProps<{
  agentId: string
}>()
 
let script: HTMLScriptElement | null = null
 
onMounted(() => {
  script = document.createElement('script')
  script.src = 'https://widget.loopreply.com/embed.js'
  script.async = true
  script.dataset.agentId = props.agentId
  document.body.appendChild(script)
})
 
onUnmounted(() => {
  if (script) {
    document.body.removeChild(script)
  }
})
</script>
 
<template>
  <!-- Widget renders itself -->
</template>

Angular

// chat-widget.component.ts
import { Component, Input, OnInit, OnDestroy, PLATFORM_ID, Inject } from '@angular/core'
import { isPlatformBrowser } from '@angular/common'
 
@Component({
  selector: 'app-chat-widget',
  template: ''
})
export class ChatWidgetComponent implements OnInit, OnDestroy {
  @Input() agentId!: string
  private script?: HTMLScriptElement
 
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
 
  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.script = document.createElement('script')
      this.script.src = 'https://widget.loopreply.com/embed.js'
      this.script.async = true
      this.script.dataset['agentId'] = this.agentId
      document.body.appendChild(this.script)
    }
  }
 
  ngOnDestroy() {
    if (this.script) {
      document.body.removeChild(this.script)
    }
  }
}

Verification

After installation:

  1. Open your website
  2. Look for the chat launcher (bottom-right by default)
  3. Click to open the widget
  4. Send a test message

Troubleshooting

Widget not appearing

  • Check browser console for errors
  • Verify the agent ID is correct
  • Ensure the bot is active (not paused)
  • Check if ad blockers are interfering

Widget loads but doesn’t respond

  • Verify API connectivity
  • Check if the bot has a valid configuration
  • Try testing in the dashboard first

Styling conflicts

  • The widget uses prefixed CSS classes to minimize style conflicts
  • Check for CSS that targets all elements (* {})
  • Use dashboard customization to adjust appearance
Last updated on
OverviewCustomization