Widget Customization

Style and configure the LoopReply widget to match your brand.

Dashboard Configuration

Widget customization is done through the LoopReply dashboard:

Go to your bot’s Appearance tab (under Configuration)
Use the visual editor to customize:
- Colors and branding
- Header text and avatar
- Welcome messages
- Launcher style
Preview changes in real-time
Changes apply automatically to your embedded widget

Theme Settings

Setting	Description
Primary Color	Header and button background
Background	Chat window background
Border Radius	Corner roundness

Header Configuration

Setting	Description
Title	Header text (e.g., “Support”)
Subtitle	Secondary text (e.g., “We typically reply in minutes”)
Avatar	Bot profile image

Launcher Configuration

Setting	Description
Position	Bottom-right or bottom-left
Icon	Custom launcher icon

Embed Code Options

The embed code supports these data 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"
  async
></script>

Available Attributes

Attribute	Description
`data-agent-id`	Required. Your bot’s unique ID
`data-api-url`	Optional. Custom API endpoint
`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

Passing User Data

Identify users for personalized experiences:


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

Programmatic Configuration

For more control, use the JavaScript API:


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

Then load the script:


<script src="https://widget.loopreply.com/embed.js" async></script>

Responsive Behavior

The widget automatically adapts to different screen sizes:

Desktop: Fixed position, standard size
Mobile: Optimized for touch, larger tap targets

Conditional Loading

Load the widget only when needed:


// Load only for logged-in users
if (user.isLoggedIn) {
  const script = document.createElement('script')
  script.src = 'https://widget.loopreply.com/embed.js'
  script.dataset.agentId = 'your-agent-id'
  document.body.appendChild(script)
}