Limeblock Docs

How to Export Limeblock to Your Project

This guide will walk you through the steps to integrate the Limeblock chat widget into your project. Follow these instructions to get your AI-powered chat widget up and running in no time.

Step 1: Installation

First, install the Limeblock package using npm or yarn:

bash
npm install @limeblock/react

Or if you prefer yarn:

bash
yarn add @limeblock/react

Step 2: Import the ChatWidget Component

Import the ChatWidget component into your React component:

jsx
import { ChatWidget } from '@limeblock/react';

Step 3: Configure Your API Key

You'll need to provide your Limeblock API key to authenticate your requests. You can find this in your Limeblock dashboard under API settings.

jsx
// Example of using your API key
const API_KEY = "lime_YOUR_API_KEY";

Important: Never expose your API key in client-side code in production. Consider using environment variables and server-side authentication for security.

Step 4: Add Context Parameters (Optional)

Context parameters help personalize the chat experience by providing additional information like user ID, board ID, or any custom parameters your implementation requires.

jsx
// Example context parameters
const contextParams = {
  board_id: "YOUR_BOARD_ID",
  user_id: "USER_ID",
  // Any other context parameters you want to include
};

Step 5: Add the ChatWidget to Your Component

Now, add the ChatWidget component to your JSX with the required props:

jsx
// Basic implementation
<ChatWidget
  apiKey={API_KEY}
  contextParams={contextParams}
/>

Step 6: Customization Options

Limeblock offers several customization options to match your application's design:

jsx
// Customized implementation
<ChatWidget
  apiKey={API_KEY}
  contextParams={contextParams}
    // Customize everything about your block in the limeblock app, not in the code
/>

Complete Implementation Example

Here's a complete example of implementing the Limeblock chat widget in a React component:

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import { ChatWidget } from '@limeblock/react';

const MyApp = () => {
  const API_KEY = process.env.NEXT_PUBLIC_LIMEBLOCK_API_KEY || "lime_YOUR_API_KEY";
  
  const contextParams = {
    board_id: "679fdb26a14496f9423891fe",
    user_id: "user_2tFLPXZyEnTmNQsenlQXNU3Q5Z4",
  };
  
  return (
    <div>
      {/* Your application content */}
      <h1>Welcome to My App</h1>
      
      {/* Limeblock ChatWidget */}
      <ChatWidget
        apiKey={API_KEY}
        contextParams={contextParams}
      />
    </div>
  );
};

export default MyApp;

Important Note: If you are using NextJS please add "use client"; to the top of the page

Next.js Specific Implementation

If you're using Next.js, here's how you can add the widget to your layout or page:

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// pages/_app.js or app/layout.js (for App Router)
  
"use client";
import { ChatWidget } from '@limeblock/react';

export default function Layout({ children }) {
  const contextParams = {
    board_id: process.env.NEXT_PUBLIC_LIMEBLOCK_BOARD_ID,
    user_id: "anonymous", // You might want to use a dynamic user ID
  };

  return (
    <html lang="en">
      <body>
        {children}
        <ChatWidget
          apiKey={process.env.NEXT_PUBLIC_LIMEBLOCK_API_KEY}
          contextParams={contextParams}
        />
      </body>
    </html>
  );
}

Troubleshooting

Widget not displaying

Ensure your API key is correct and that you've included all required props.

Authentication errors

Check that your API key is valid and has not expired. You can verify this in your Limeblock dashboard.

Custom styling not applying

Ensure you are using # in your hex codes and that you hit the save button

Getting Help

If you encounter any issues or have questions about implementing Limeblock: