Sematkan KorinAI di halaman HTML apa pun

<!-- jsDelivr (disarankan) -->
<script src="https://cdn.jsdelivr.net/npm/@korinai/embed@latest/dist/embed.js"></script>
<!-- atau unpkg -->
<!-- <script src="https://unpkg.com/@korinai/embed@latest/dist/embed.js"></script> -->

<div id="korin-floating-chat"></div>

<script>
  // window.KorinAI diekspos oleh build IIFE dari CDN
  window.KorinAI.init({
    target: "#korin-floating-chat",
    variant: "floating", // 'floating' | 'page'

    // Opsi provider
    baseUrl: "https://api.korinai.com",
    chatApi: "https://api.korinai.com/api/chat",
    language: "id",
    // authToken: "TOKEN_STATIS_ANDA",                // tidak direkomendasikan
    // getAuthToken: async () => "TOKEN_DINAMIS_ANDA", // direkomendasikan

    // Opsi bantu (opsional)
    ensureStyles: true,

    // Properti komponen (diteruskan)
    props: {
      title: "Chat dengan KorinAI",
      showFloatingButton: true,
      triggerIconSize: 28,
      // Bisa assign props PageChat
      variant: "flat",
      ui: { showAttach: true },
    },
  });

  // Jika perlu
  // window.KorinAI.unmount('#korin-floating-chat');
  // window.KorinAI.toggleFloatingChat(true);
</script>

<div id="korin-page-chat" style="min-height: 520px"></div>
<div
  id="korin-floating-chat"
  style="position: fixed; bottom: 24px; right: 24px"
></div>
<script>
  window.KorinAI.init({
    target: "#korin-page-chat",
    variant: "page",
    ensureStyles: false,
    baseUrl: "https://api.korinai.com",
    chatApi: "https://api.korinai.com/api/chat",
    language: "id",
    props: { variant: "flat" },
  });
  window.KorinAI.init({
    target: "#korin-floating-chat",
    variant: "floating",
    baseUrl: "https://api.korinai.com",
    chatApi: "https://api.korinai.com/api/chat",
    language: "id",
    props: { title: "Chat" },
  });
</script>

<script>
  window.KorinAI.init({
    target: "#korin-floating-chat",
    baseUrl: "https://api.korinai.com",
    variant: "floating",
    language: "id",
    translations: {
      en: {
        startChat: "Start chat",
        thinking: "Thinking…",
        preparingExperience: "Setting things up for you…",
      },
      id: {
        startChat: "Mulai Obrolan",
        thinking: "Memproses…",
      },
    },
    props: { title: "Chat dengan KorinAI" },
  });
</script>

export const KORIN_TRANSLATIONS = {
  en: {
    startChat: "Start Chat",
    closeChat: "Close Chat",
    newChat: "New Chat",
    chatHistory: "Chat History",
    loadingConversation: "Loading conversation...",
    noChatHistory: "No chat history yet",
    startConversation: "Start a conversation to see it here",
    previous: "Previous",
    next: "Next",
    page: "Page",
    of: "of",
    thinking: "Thinking...",
    usingTool: "Using {toolName}...",
    attachedFile: "Attached file",
    sharedLink: "Shared a link",
    failedToLoadHistory: "Failed to load chat history",
    tryAgainLater: "Please try again later",
    ai: "AI",
    helloImYourAIAssistant:
      "Hello! I'm your AI assistant. How can I help you today? ",
    preparingExperience:
      "Preparing your chat experience… Please ensure your API URL and API key are configured.",
    templates: "Templates",
    fileSizeError: "File size must be less than 10MB",
    fileTypeError: "File type not supported",
    uploadSuccess: "File uploaded successfully",
    uploadFailed: "Upload failed",
    dropFile: "Drop your file here",
    retry: "Retry",
    selectAgent: "Select Agent",
    attachFile: "Attach File",
    stopGenerating: "Stop generating",
    sendMessage: "Send message",
    noCredits: "No credits available",
    selectFile: "Select File",
  },
  id: {
    startChat: "Mulai Obrolan",
    closeChat: "Tutup Obrolan",
    newChat: "Obrolan Baru",
    chatHistory: "Riwayat Obrolan",
    loadingConversation: "Memuat percakapan...",
    noChatHistory: "Belum ada riwayat obrolan",
    startConversation: "Mulai percakapan untuk melihatnya di sini",
    previous: "Sebelumnya",
    next: "Selanjutnya",
    page: "Halaman",
    of: "dari",
    thinking: "Memproses...",
    usingTool: "Menggunakan {toolName}...",
    attachedFile: "Berkas terlampir",
    sharedLink: "Membagikan tautan",
    failedToLoadHistory: "Gagal memuat riwayat obrolan",
    tryAgainLater: "Silakan coba lagi nanti",
    ai: "AI",
    helloImYourAIAssistant:
      "Halo! Saya asisten AI Anda. Ada yang bisa saya bantu? 👋",
    preparingExperience:
      "Menyiapkan pengalaman chat Anda… Pastikan URL API dan kunci API Anda telah dikonfigurasi.",
    templates: "Template",
    fileSizeError: "Ukuran file harus kurang dari 10MB",
    fileTypeError: "Tipe file tidak didukung",
    uploadSuccess: "File berhasil diunggah",
    uploadFailed: "Gagal mengunggah",
    dropFile: "Letakkan file Anda di sini",
    retry: "Coba Lagi",
    selectAgent: "Pilih Agen",
    attachFile: "Lampirkan File",
    stopGenerating: "Hentikan pembuatan",
    sendMessage: "Kirim pesan",
    noCredits: "Kredit tidak tersedia",
    selectFile: "Pilih File",
  },
} as const;

<script>
  const { unmount } = window.KorinAI.init({
    target: "#korin-floating-chat",
    variant: "floating",
    baseUrl,
    chatApi,
  });
  // Kemudian
  window.KorinAI.toggleFloatingChat(true);
  unmount();
  // Muat ulang varian floating dengan properti baru saat runtime
  window.KorinAI.floating.reload({ props: { showFloatingButton: false } });
</script>