Embedding

<script
  src="https://replr.ai/embed.js"
  data-replr-id="rpl_x4y5z6a7b8c9"
  data-theme="dark"
  data-position="bottom-right"
  data-primary-color="#8b5cf6"
  data-greeting="Hey! How can I help you today?"
  data-width="400"
  data-height="640"
  data-open="false"
  data-hide-branding="false"
></script>

// Open the widget when a custom button is clicked
document.getElementById("help-btn").addEventListener("click", () => {
  REPLR.open();
});

// Send a contextual message based on the current page
REPLR.sendMessage("I have a question about " + document.title);

REPLR.on("ready", () => {
  console.log("Widget loaded");
});

REPLR.on("message", (data) => {
  console.log(`[${data.role}]: ${data.content}`);

  // Track messages in your analytics
  analytics.track("replr_message", {
    role: data.role,
    length: data.content.length,
  });
});

REPLR.on("error", (err) => {
  console.error("REPLR error:", err.code, err.message);
});

:root {
  --replr-font: "Inter", sans-serif;
  --replr-radius: 16px;
  --replr-z-index: 50000;
}

"use client";

import { useEffect, useRef } from "react";

interface ReplrWidgetProps {
  replrId: string;
  theme?: "light" | "dark" | "auto";
  position?: "bottom-right" | "bottom-left";
  primaryColor?: string;
  greeting?: string;
  width?: number;
  height?: number;
  open?: boolean;
  hideBranding?: boolean;
}

export function ReplrWidget({
  replrId,
  theme = "auto",
  position = "bottom-right",
  primaryColor,
  greeting,
  width,
  height,
  open,
  hideBranding,
}: ReplrWidgetProps) {
  const loaded = useRef(false);

  useEffect(() => {
    if (loaded.current) return;
    loaded.current = true;

    const script = document.createElement("script");
    script.src = "https://replr.ai/embed.js";
    script.async = true;
    script.dataset.replrId = replrId;
    script.dataset.theme = theme;
    script.dataset.position = position;

    if (primaryColor) script.dataset.primaryColor = primaryColor;
    if (greeting) script.dataset.greeting = greeting;
    if (width) script.dataset.width = String(width);
    if (height) script.dataset.height = String(height);
    if (open) script.dataset.open = "true";
    if (hideBranding) script.dataset.hideBranding = "true";

    document.body.appendChild(script);

    return () => {
      script.remove();
    };
  }, [replrId, theme, position, primaryColor, greeting, width, height, open, hideBranding]);

  return null;
}