LuukAI Widget Demo

This page demonstrates how to embed the LuukAI widget into any website.

Loading widget...

Basic Implementation

The widget is automatically loaded with a floating action button (FAB) in the bottom right corner.

<script type="module">
  import { init } from "https://ai.myluuk.app/widget/v1/luukai-widget.js";
  init({
    partnerID: "your-partner-id",
    agentID: "your-agent-id",
    fab: true,
    fabRight: "55px",
    fabBottom: "55px",
  });
</script>
        

🆕 Frata Compatibility Mode

When the frata: true flag is enabled, clicking the FAB shows a fork screen to choose between LuukAI and Frata services. Frata will automatically open when the user selects it (via #frata hash).

<script type="module">
  import { init } from "https://frata.myluuk.app/widget/v2/frata-widget.js";
  init({
      vendor: "librederm",
      lang: "ru",
      fab: false,
  });
  import { init } from "https://ai.myluuk.app/widget/v1/luukai-widget.js";
  init({
    partnerID: "your-partner-id",
    agentID: "your-agent-id",
    frata: true,  // Enable Frata compatibility
    fab: true,
    fabRight: "55px",
    fabBottom: "55px",
  });
</script>
        

Frata Test Controls:

Current Implementation:

<script type="module">
init({
    partnerID: "c66988425bdf11f0",
    agentID: "e5d8bba85bdf11f08d5a1343",
    fab: true,
    fabRight: "55px", 
    fabBottom: "55px",
    frata: true,  // Frata compatibility enabled
    popup: {
        enabled: true,
        heading: "Welcome to LuukAI!",
        text: "Ask about your specific problem and get a personalized solution",
        startButtonText: "Get Started",
        laterButtonText: "Maybe Later",
        cooldownHours: 0.05 // Very short cooldown for demo (3 minutes)
    }
});
        

Programmatic Control

You can also control the widget programmatically:

Popup Position Testing

Test different popup positions (independent from FAB position):

Configuration Options

URL Integration: The widget automatically opens when #luukai is in the URL and updates the URL when opened/closed.

Popup: Optional popup that appears before the main widget, with customizable content and cooldown period.

partnerID: Your partner identifier (required for API calls)
agentID: Your agent identifier (required for API calls)
fab: Enable/disable the floating action button (default: true)
fabRight: Distance from right edge (default: "20px")
fabBottom: Distance from bottom edge (default: "20px")
fabLeft: Distance from left edge (overrides fabRight)
fabTop: Distance from top edge (overrides fabBottom)
fabSize: Size of the FAB button (default: "60px")
frata: Enable Frata compatibility (default: false)
popup.enabled: Enable/disable popup (default: false)
popup.fullscreen: Enable fullscreen popup mode (default: false)
popup.heading: Popup heading text
popup.text: Popup description text
popup.startButtonText: Text for start button (default: "Start")
popup.laterButtonText: Text for later button (default: "Maybe later")
popup.cooldownHours: Hours before popup shows again (default: 24)
popup.delaySeconds: Seconds to wait before showing the popup after page load (default: 3)
popup.popupRight: Distance from right edge (falls back to fabRight if not set)
popup.popupBottom: Distance from bottom edge (falls back to fabBottom if not set)
popup.popupLeft: Distance from left edge (overrides popupRight, falls back to fabLeft if not set)
popup.popupTop: Distance from top edge (overrides popupBottom, falls back to fabTop if not set)

Popup Example

<script type="module">
  import { init } from "https://ai.myluuk.app/widget/v1/luukai-widget.js";
  init({
    fab: true,
    popup: {
      enabled: true,
      heading: "Find out what your skin needs",
      text: "Upload a photo and get a personalized treatment plan today",
      startButtonText: "Get Started",
      laterButtonText: "Maybe Later",
      cooldownHours: 24
    }
  });
</script>
        

Fullscreen Popup Example

<script type="module">
  import { init } from "https://ai.myluuk.app/widget/v1/luukai-widget.js";
  init({
    partnerID: "c66988425bdf11f0",
    agentID: "e5d8bba85bdf11f08d5a1343",
    fab: true,
    fabRight: "55px", 
    fabBottom: "55px",
    popup: {
        enabled: true,
        fullscreen: true,
        cooldownHours: 0.05 // Very short cooldown for demo (3 minutes)
    }
  });
</script>
        

Popup Position Example

You can position the popup independently from the FAB. If popup positioning is not specified, it will use the FAB positioning parameters.

<script type="module">
  import { init } from "https://ai.myluuk.app/widget/v1/luukai-widget.js";
  init({
    partnerID: "your-partner-id",
    agentID: "your-agent-id",
    fab: true,
    fabRight: "20px",      // FAB on the right
    fabBottom: "20px",
    popup: {
        enabled: true,
        popupLeft: "20px",  // Popup on the left (independent from FAB)
        popupBottom: "20px",
        heading: "Welcome!",
        text: "This popup is positioned on the left side",
        cooldownHours: 24
    }
  });
</script>
        

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.