Portfolio Chatbot Widget

A plug-and-play AI chatbot widget for your portfolio. Visitors can ask questions about you — your skills, experience, projects, and more — and get instant answers powered by your own data.

Demo

Click the image above to watch the full demo.

How It Works

1. Create an account and fill in your profile at portfolio-chatbot-omega-one.vercel.app
2. Copy your Chat ID from the dashboard
3. Install this package and paste your Chat ID
4. Done — your chatbot is live

Step 1 — Set Up Your Profile

This is the most important step. The chatbot answers questions based on the information you add here.

Visit: https://portfolio-chatbot-omega-one.vercel.app

• First time? Click Create Account
• Already have an account? Login directly

Once logged in, fill in your profile:

• Personal info (name, bio, location, contact)
• Work experience
• Skills & technologies
• Projects
• Education
• Certifications
• Achievements

The more detail you add, the better your chatbot will answer.

After saving your profile, go to the Dashboard and copy your Chat ID.

Step 2 — Install the Package

npm install portfolio-chatbot-widget

Step 3 — Add to Your React App

Paste your Chat ID and you're good to go.

import { PortfolioChatbot } from 'portfolio-chatbot-widget';

export default function App() {
  return (
    <PortfolioChatbot
      config={{
        chatId: "YOUR_CHAT_ID_HERE",  // paste your Chat ID from the dashboard
        welcomeMessage: "Hi! Ask me anything about my work.",
      }}
    />
  );
}

That's it. The chatbot will appear as a floating button on your site.

Configuration Options

| Property | Type | Required | Default | Description | |---|---|---|---|---| | chatId | string | ✅ Yes | — | Your Chat ID from the dashboard | | welcomeMessage | string | No | — | First message the bot shows | | title | string | No | "Chat with Portfolio" | Header title text | | placeholder | string | No | "Ask me anything..." | Input field hint text | | position | string | No | "bottom-right" | "bottom-right" or "bottom-left" | | animation | string | No | "slide" | "slide", "fade", or "scale" | | theme | ThemeConfig | No | Light theme | Customize all colors (see below) |

Theming

You can use a built-in theme helper or customize individual colors.

Option A — Use a preset theme

import { PortfolioChatbot, createDarkTheme } from 'portfolio-chatbot-widget';

<PortfolioChatbot
  config={{
    chatId: "YOUR_CHAT_ID_HERE",
    theme: createDarkTheme("#6366f1"),  // pass your brand color
  }}
/>

Available helpers: createDarkTheme, createLightTheme, createMinimalTheme, createBrandTheme

Option B — Custom colors

Only set the colors you want to change. Everything else uses the default.

<PortfolioChatbot
  config={{
    chatId: "YOUR_CHAT_ID_HERE",
    theme: {
      toggleButtonBackgroundColor: "#6366f1",
      userMessageBackgroundColor: "#6366f1",
      headerBackgroundColor: "#6366f1",
      headerTextColor: "#ffffff",
    },
  }}
/>

All Theme Properties

| Property | Default | What it controls | |---|---|---| | borderRadius | "1rem" | Rounded corners on all elements | | windowBackgroundColor | #ffffff | Chat window background | | windowBorderColor | #e5e7eb | Chat window border | | windowShadowColor | rgba(0,0,0,0.1) | Chat window shadow | | headerBackgroundColor | #ffffff | Header background | | headerTextColor | #111827 | Header title color | | headerBorderColor | #e5e7eb | Line below header | | headerCloseButtonColor | #6b7280 | Close (X) button color | | headerCloseButtonHoverColor | #374151 | Close button on hover | | messageAreaBackgroundColor | #f9fafb | Background behind messages | | botMessageBackgroundColor | #ffffff | Bot bubble background | | botMessageTextColor | #111827 | Bot bubble text | | botMessageBorderColor | #e5e7eb | Bot bubble border | | userMessageBackgroundColor | #3b82f6 | Your message bubble background | | userMessageTextColor | #ffffff | Your message text | | userMessageBorderColor | #2563eb | Your message bubble border | | inputSectionBackgroundColor | #ffffff | Area behind the input box | | inputSectionBorderColor | #e5e7eb | Line above input area | | inputBackgroundColor | #f9fafb | Input field background | | inputTextColor | #111827 | Input text color | | inputPlaceholderColor | #9ca3af | Placeholder text color | | inputBorderColor | #d1d5db | Input field border | | inputFocusBorderColor | #3b82f6 | Input border when focused | | inputFocusRingColor | #3b82f6 | Glow ring when focused | | sendButtonColor | #6b7280 | Send icon color | | sendButtonHoverColor | #3b82f6 | Send icon on hover | | sendButtonDisabledColor | #d1d5db | Send icon when disabled | | toggleButtonBackgroundColor | #3b82f6 | Floating chat button background | | toggleButtonIconColor | #ffffff | Floating button icon color | | toggleButtonHoverBackgroundColor | #2563eb | Floating button on hover | | toggleButtonShadowColor | rgba(59,130,246,0.3) | Floating button shadow | | typingIndicatorColor | #9ca3af | Animated typing dots color | | typingIndicatorBackgroundColor | #ffffff | Typing indicator background | | scrollbarTrackColor | #f3f4f6 | Scrollbar track | | scrollbarThumbColor | #d1d5db | Scrollbar thumb | | scrollbarThumbHoverColor | #9ca3af | Scrollbar thumb on hover |

Full Example (Copy & Paste)

import { PortfolioChatbot } from 'portfolio-chatbot-widget';

export default function App() {
  return (
    <PortfolioChatbot
      config={{
        chatId: "YOUR_CHAT_ID_HERE",
        welcomeMessage: "Hi! I'm John's AI assistant. Ask me about his work.",
        placeholder: "Ask about skills, projects, experience...",
        position: "bottom-right",
        animation: "slide",
        theme: {
          toggleButtonBackgroundColor: "#6366f1",
          userMessageBackgroundColor: "#6366f1",
          userMessageBorderColor: "#4f46e5",
          headerBackgroundColor: "#6366f1",
          headerTextColor: "#ffffff",
          inputFocusBorderColor: "#6366f1",
          inputFocusRingColor: "#6366f1",
          sendButtonHoverColor: "#6366f1",
        },
      }}
    />
  );
}

Framework Support

Works with any React setup:

• Next.js (App Router & Pages Router)
• Vite + React
• Create React App

Requires React 16.8 or higher.

License

MIT