Customize your chat button to tailor the widget to seamlessly integrate with your brand’s aesthetic and functionality.

You can create custom buttons like “Chat Now”, “Talk to us” or even use icon-based buttons anywhere on your page.

Installation

Add the installation script to your HTML file. Replace <YOUR-AGENT-ID> with your actual agent ID.

<script
  data-agent-id="<YOUR-AGENT-ID>"
  src="https://widget.uselumen.co/static/widget-v1.js"
></script>

Optional: Hide Default Launcher

Customize your launcher further by hiding the default floating chat button using the hideDefaultLauncher setting.

window.lumenSettings = {
  // ... other settings
  hideDefaultLauncher: true,
};

Launch the Widget

Implement a custom launcher button that triggers the Lumen widget using window.lumenAI.launch()

Feel free to adjust the CSS styles to match your design preferences, ensuring the launcher button aligns perfectly with your brand’s visual identity.