{"id":30877599,"url":"https://github.com/wlad1slav/chatbot-widget","last_synced_at":"2025-09-08T04:49:11.443Z","repository":{"id":304176471,"uuid":"1003029808","full_name":"Wlad1slav/chatbot-widget","owner":"Wlad1slav","description":"AI Chatbot Widget — customizable animated AI chatbot widget for e-commerce sites enhancing visitor engagement and sales.","archived":false,"fork":false,"pushed_at":"2025-07-24T14:33:16.000Z","size":183,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-24T19:25:55.279Z","etag":null,"topics":["chatbot","chatbot-ui","e-commerce","e-commerce-app","widget"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wlad1slav.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-16T14:09:21.000Z","updated_at":"2025-07-24T14:33:20.000Z","dependencies_parsed_at":"2025-07-11T15:32:35.000Z","dependency_job_id":null,"html_url":"https://github.com/Wlad1slav/chatbot-widget","commit_stats":null,"previous_names":["wlad1slav/chatbot-widget"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Wlad1slav/chatbot-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wlad1slav%2Fchatbot-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wlad1slav%2Fchatbot-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wlad1slav%2Fchatbot-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wlad1slav%2Fchatbot-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wlad1slav","download_url":"https://codeload.github.com/Wlad1slav/chatbot-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wlad1slav%2Fchatbot-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274135664,"owners_count":25228204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatbot","chatbot-ui","e-commerce","e-commerce-app","widget"],"created_at":"2025-09-08T04:49:10.238Z","updated_at":"2025-09-08T04:49:11.431Z","avatar_url":"https://github.com/Wlad1slav.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI Chatbot Widget\n\nThis chatbot widget was developed for [Agile Alpaca](https://agile-alpaca.com) clients who have used our AI-agent integration services in their online stores. It’s designed for commercial websites to help visitors quickly get answers to their questions and place orders.\n\n![preview](https://github.com/user-attachments/assets/998e8caa-0bb5-430e-b906-e9a77cc928e1)\n\n## Features\n- [x] Theme customization – the theme parameter applies predefined styles that change the background, button, and message-bubble colors.\n- [x] Animated popup window – the chat window is anchored to the bottom-right corner and opens/collapses with smooth animation.\n- [x] Open button + message badge\n- [x] Welcome message\n- [x] Previous dialogue restoration\n- [x] Quick-reply prompts (chat prompts)\n- [x] Page context (pageContext) – lets you run arbitrary scripts (e.g., auto-show the chat or display a personalized message) once a visitor has spent timer ms on a specific pathname.\n- [x] Full control via context object – the execPageContext function provides external code with a complete set of setters (open, messageOptions, input, promptsOptions) plus a scrollToBottom method, simplifying integration with analytics or business logic.\n- [x] Input with Shift+Enter support – pressing Enter sends a message; Shift+Enter inserts a newline.\n- [x] Automatic scroll to the latest message\n- [x] Responsive design\n- [ ] Full-page context handling – ability to send the entire page context to the server along with the user’s message.\n\n## Usage\n```html\n\u003chead\u003e\n    \u003c!-- ... --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/ai-chatbot-widget@latest/dist/index.css\" /\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003c!-- ... --\u003e\n\n    \u003cdiv id=\"chatbot\"\u003e\u003c/div\u003e\n\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/ai-chatbot-widget@latest/dist/chatbot-widget.iife.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n        const greeting = 'Hello! 👋 I’m the AI assistant.'\n        const contactUsMessage = `To get in touch with our manager, please leave your email address 📧, WhatsApp, or phone number 📱.\n\nWe'll get back to you during our business hours 🕖 7:00 a.m. – 4:00 p.m. CST.\n\nThank you for reaching out! 💬`\n\n        const chatPrompts = [\n            'I want a custom sign',\n            'I want to track my order',\n            'What are production and delivery times?',\n            'What are your shipping and refund policies?',\n            'I have problem with my order'\n        ]\n\n        ChatbotWidget.mountChatbotWidget(\"#chatbot\", {\n            chatbotUrl: 'https://.../webhook/...',\n            dialogeBaseUrl: 'https://.../webhook/...',\nty, futuristic, o Canada\n            greeting,\n            chatPrompts,\n\n            title: 'Bsign Assistant',\n            imageUrl: 'https://cdn.shopify.com/s/files/1/0248/8198/7665/files/chatbot-logo.png?v=1750682293',\n            imageWidth: '120px',\n\n            // Modify the chat states depending on the user's URL\n            pageContext: {\n                '/pages/contact-us': {\n                    timer: 1000,\n                    exec: ({ open, messageOptions }) =\u003e { \n                        messageOptions.setMessages(prev =\u003e [\n                            ...prev, \n                            {content: contactUsMessage, sender: 'bot'}\n                        ])\n                        open.setIsOpen(true);\n                    }\n                }\n            },\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n```\n\n### Themes\n\nAvaible themes: `futuristic`, `lighty`, `boring`, `o Canada`.\n\nThe themes are stylized using tailwind, you can see them here: `/widget-vite/src/utils/styles.ts`.\n\nThere is currently no solution for creating custom themes by passing props. If needed, you can use plain CSS with the !important directive.\n\n#### lighty\n\n![Screenshot 2025-06-23 at 6 07 37 PM](https://github.com/user-attachments/assets/ac98f294-9e9d-4a61-961c-26c86186d431)\n\nThe “lighty” theme combines minimalism with vibrant accents:\n- A clean white background makes the interface feel light and airy.\n- A contrasting dark header adds structure and focuses attention on navigation.\n- Gradiented bot messages in purple-pink hues enliven the space without overwhelming it.\n- Black-and-white user messages (with subtle transparency) maintain a sleek look.\n- Buttons and input fields feature delicate purple outlines for a modern yet refined style.\n\n#### boring\n\n![Screenshot 2025-06-23 at 6 07 46 PM](https://github.com/user-attachments/assets/8500550e-4aa3-475e-abed-a38fda720c8a)\n\nThe “boring” theme offers a maximally neutral and formal interface:\n- A pure white background and a solid dark header (no gradients) create a very simple backdrop.\n- Bot messages in dark gray blocks with white text look like a classic terminal chat.\n- User messages and icons are in black without any color accents—utterly restrained.\n- Inputs and buttons have thin gray borders that barely draw attention.\n- This style suits corporate or internal tools where functionality matters more than aesthetics.\n\n#### futuristic\n\n![Screenshot 2025-06-23 at 6 07 19 PM](https://github.com/user-attachments/assets/7201bac1-703a-4ee0-8aed-655f5f53901c)\n\nThe “futuristic” theme plunges you into a cyberpunk, sci-fi world:\n- A deep gradient from dark slate through purple to near-black evokes the infinity of space.\n- Bright purple-to-blue accents in the header and open button emit neon energy.\n- Bot messages in warm purple-pink gradients with white text resemble holograms.\n- Semi-transparent, heavily blurred user message backgrounds create a digital cocoon.\n- Glow effects on the open button and notification badge complete the high-tech vibe.\n\n#### o Canada\n\n![Screenshot 2025-06-23 at 6 07 28 PM](https://github.com/user-attachments/assets/56aa6560-6b96-4680-b4c1-c54dfca76596)\n\nThe “o Canada” theme embodies nature and stability:\n- A white background recalls Canadian forests, snowy landscapes, and purity.\n- The header and bot elements use a deep green (#016553), reminiscent of evergreen woods.\n- The gold notification badge (#D1A205) symbolizes the warm hues of sunlight over the plains.\n- User messages and input fields remain understated so nothing distracts from the core content.\n- This style works well for eco-friendly, educational, or official projects that value trust and reliability.\n\n### Widget context\n\nOne of the chatbot’s most important features is its ability to manipulate widget states based on the page context (and this functionality will only expand over time).\n\nAt the moment, you can only modify states based on the URL the user is visiting.\n\nExample usage:\n```typescript\npageContext: {\n  '/pages/contact-us': {\n    timer: 1000, // after how many ms executed\n    exec: ({ open, messageOptions }) =\u003e {\n\n        // Adds messages to existing\n        messageOptions.setMessages(prev =\u003e [\n          ...prev,\n          { content: \"Hello! Do you want to contact us?\", sender: 'bot' }\n        ]);\n\n        // Automatically expands the widget\n        open.setIsOpen(true);\n    }\n  }\n}\n```\n\nAll modifiable states are:\n```typescript\n{\n    open: {\n      isOpen: boolean, // whether the widget is open\n      setIsOpen: (v: boolean) =\u003e void // open / close the widget\n    },\n\n    messageOptions: {\n        // All existing messages\n        messages: {\n          content: string,\n          sender: \"user\" | \"bot\"\n        }[],\n\n        // Function for setting messages\n        setMessages: (messages: {\n          content: string,\n          sender: \"user\" | \"bot\"\n        }[]) =\u003e void,\n    },\n\n    // Input field\n    input: {\n      inputValue: string,\n      setInputValue: (value: string) =\u003e void,\n    },\n\n    // Tips for the user\n    promptsOptions: {\n      prompts: string[],\n      setPrompts: (prompts: string[]) =\u003e void\n    },\n\n    // Thing that unfortunately doesn't work\n    scrollToBottom: () =\u003e void\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlad1slav%2Fchatbot-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwlad1slav%2Fchatbot-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlad1slav%2Fchatbot-widget/lists"}