@ryklen/ryklen-js

v1.0.37

Published

6 months ago

AI-powered chatbot component by Ryklen.

0High
0Medium
0Low

Ryklen Chatbot - `@ryklen/ryklen-js`

🚀 Ryklen Chatbot is an AI-powered chatbot component that can be used in both React and non-React environments.

📦 Installation

For React & Next.js

Install via npm:

npm install @ryklen/ryklen-js

Or with yarn:

yarn add @ryklen/ryklen-js

🚀 Usage

1️⃣ React (JS/TS)

import "@ryklen/ryklen-js/style.css";
import { RyklenChat } from "@ryklen/ryklen-js";

function App() {
  const token = "some token";

  return (
    <RyklenChat
      getToken={async () => {
        return token;
      }}
      options={{ displayMode: "dialog", chatSessionKey: "testChatId" }}
    />
  );
}

export default App;

2️⃣ Next.js

Same as React, but add 'use client' at the top:

'use client';
import "@ryklen/ryklen-js/style.css";
import { RyklenChat } from "@ryklen/ryklen-js";

function ChatPage() {
  return <RyklenChat getToken={async () => "your-token"} />;
}

export default ChatPage;

3️⃣ Plain JavaScript (UMD)

No React required! Just use a tag.

✅ Always load the latest version:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ryklen Chatbot</title>
    <link rel="stylesheet" href="https://unpkg.com/@ryklen/ryklen-js/dist/ryklen-js.css" />
    <script src="https://unpkg.com/@ryklen/ryklen-js/dist/ryklen-js.umd.js"></script>
  </head>
  <body>
    <script>
      window.addEventListener("load", async function () {
        await Ryklen.load({
          getToken: async () => {
            const token =
              "some token";

            return token;
          },
        });
      });
    </script>
  </body>
</html>

🔒 Lock to a specific version (e.g., 1.0.0):

<link rel="stylesheet" href="https://unpkg.com/@ryklen/[email protected]/dist/ryklen-js.css" />
<script src="https://unpkg.com/@ryklen/[email protected]/dist/ryklen-js.umd.js"></script>

⚙️ Configuration Options

The RyklenChat component accepts the following props:

Required Props

| Prop | Type | Description | | ---------------- | ----------------------- | ----------------------------------------------------------------------------------- | | organizationId | string | The organization ID for all API requests. Required. | | getToken | () => Promise<string> | A function that returns a fresh authentication token for API requests. (Optional) |

Optional Props (inside `options` object)

| Option | Type | Default | Description | | -------------------- | ------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | | displayMode | "dialog" or "standalone" | "dialog" | Defines how the chatbot is displayed: "dialog" (floating button) or "standalone" (always visible). | | chatSessionKey | string | "chatSessionId" | Custom session key for chat persistence. If omitted, the default session key is used. | | requestInterceptor | (config: RequestInterceptorConfig) => Promise<RequestInterceptorConfig> | undefined | Function to modify API requests before they are sent (e.g., add headers). |

Example Usage

<RyklenChat
  getToken={async () => "your-token"}
  options={{
    displayMode: "dialog",
    chatSessionKey: "customChatId",
    requestInterceptor: async (config) => {
      config.headers = {
        ...config.headers,
        Authorization: `Bearer my-custom-token`,
      };
      return config;
    },
  }}
/>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Ryklen Chatbot - @ryklen/ryklen-js