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.

Choose Framework:

React
Vue

Step 1: Installation

First, install the Limeblock package using npm or yarn:

bash
npm install @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:

javascript
const API_KEY = process.env.NEXT_PUBLIC_LIMEBLOCK_API_KEY || "lime_YOUR_API_KEY";

Important: Never expose your API key in client-side code in production. Use environment variables and proper security measures.

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. These are essential to backend API actions. Make sure you format them in proper casing (same as you did in the API endpoint tree).

javascript
const contextParams = {
  board_id: "YOUR_BOARD_ID",
  user_id: "USER_ID",
};

Step 5: Add the ChatWidget

Add the ChatWidget component to your JSX with these props (position props not required):

jsx
<ChatWidget
  apiKey={API_KEY}
  contextParams={contextParams}
  widgetPosition="bottom-[8px] md:bottom-[24px] right-[8px] md:right-[24px]"
  chatPosition="bottom-[0px] right-[0px]"
/>

Step 6: Customization Options

Limeblock offers several customization options to match your application's design (position props not required):

jsx
<ChatWidget
  apiKey={API_KEY}
  contextParams={contextParams}
  widgetPosition="bottom-[8px] md:bottom-[24px] right-[8px] md:right-[24px]"
  chatPosition="bottom-[0px] right-[0px]"
/>

Complete Implementation Example

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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>
      <ChatWidget
        apiKey={API_KEY}
        contextParams={contextParams}
      />
    </div>
  );
};

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

Next.js Implementation

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",
  };

  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 properly configured

Authentication errors

Verify API key validity and environment configuration

Styling issues

Check Tailwind configuration and purge settings

Getting Help

Contact support for additional assistance: