{"_id":"@calq/talq-widget","_rev":"3-9c4f87214489b2e7098be0b836ae302e","name":"@calq/talq-widget","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@calq/talq-widget","version":"0.1.0","keywords":["ai","assistant","chat","chatbot","embed","talq","widget"],"author":{"url":"https://github.com/reefki","name":"Rifki Aria Gumelar"},"license":"MIT","_id":"@calq/talq-widget@0.1.0","maintainers":[{"name":"reefki","email":"rifki@rifki.net"}],"homepage":"https://github.com/Calq-dev/talq-widget#readme","bugs":{"url":"https://github.com/Calq-dev/talq-widget/issues"},"dist":{"shasum":"dc87144c98c014181e0426edf4ff42d108ebcf12","tarball":"https://registry.npmjs.org/@calq/talq-widget/-/talq-widget-0.1.0.tgz","fileCount":9,"integrity":"sha512-OZxXh9ru5wdsmW8OsLnz9dkx2xqxCOzWYm+i80WrzFInILY9FdVitl0FZEW27Kx5cTvp5Js5yA1y5twrL5j4Wg==","signatures":[{"sig":"MEQCIE+K4XJZphpeSkZUXaOLUr190nxr/zxst6cXRp1/XM9XAiBDAC3co5QfQvTqEu92RLXq/PBsAAgX/TxTZdNIezdoAA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29415},"main":"dist/widget.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=16"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/widget.js"}},"gitHead":"84e406a3e92b21c525efabb046b24f00972880b3","scripts":{"dev":"NODE_ENV=development rollup -c -w","lint":"eslint src","build":"NODE_ENV=production rollup -c","format":"prettier --write \"src/**/*.{ts,css}\"","lint:fix":"eslint src --fix","format:check":"prettier --check \"src/**/*.{ts,css}\""},"_npmUser":{"name":"reefki","email":"rifki@rifki.net"},"repository":{"url":"git+https://github.com/Calq-dev/talq-widget.git","type":"git"},"_npmVersion":"10.9.3","description":"Talq embedable script to insert chat widget","directories":{},"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","dotenv":"^17.2.3","eslint":"^9.39.2","rollup":"^2.79.2","prettier":"^3.8.1","typescript":"^5.8.3","@types/node":"^24.3.1","rollup-plugin-serve":"^3.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-replace":"^6.0.3","eslint-config-prettier":"^10.1.8","rollup-plugin-import-css":"^4.0.1","rollup-plugin-livereload":"^2.0.5","@rollup/plugin-typescript":"^12.1.4","@typescript-eslint/parser":"^8.53.1","@typescript-eslint/eslint-plugin":"^8.53.1"},"_npmOperationalInternal":{"tmp":"tmp/talq-widget_0.1.0_1770230314515_0.7009737088597299","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@calq/talq-widget","version":"0.1.1","keywords":["ai","assistant","chat","chatbot","embed","talq","widget"],"author":{"url":"https://github.com/reefki","name":"Rifki Aria Gumelar"},"license":"MIT","_id":"@calq/talq-widget@0.1.1","maintainers":[{"name":"reefki","email":"rifki@rifki.net"}],"homepage":"https://github.com/Calq-dev/talq-widget#readme","bugs":{"url":"https://github.com/Calq-dev/talq-widget/issues"},"dist":{"shasum":"55a934d2325b4ae65d529a0dbcf5faf8ea56bff5","tarball":"https://registry.npmjs.org/@calq/talq-widget/-/talq-widget-0.1.1.tgz","fileCount":9,"integrity":"sha512-9NAB68US5ArzFHjquNTd00lCS0jB7q+pHfU8loz9bhIOoafjN1TwnR+MMd4D+7JTbvy1oxUD47BAc7qAildL6g==","signatures":[{"sig":"MEYCIQDHdcaqCwOSvGdN4FlCbg7WJQorwG4RHMJmo5SKLvoCjAIhALOuAeqf9rMSlDMeXxrE0Rq/FdAv6KA1CN81rgfH5eds","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31461},"main":"dist/widget.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=16"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/widget.js"}},"gitHead":"c2aa81a8d9fe49fc23f873840f5ca6774b1a728d","scripts":{"dev":"NODE_ENV=development rollup -c -w","lint":"eslint src","build":"NODE_ENV=production rollup -c","format":"prettier --write \"src/**/*.{ts,css}\"","lint:fix":"eslint src --fix","format:check":"prettier --check \"src/**/*.{ts,css}\""},"_npmUser":{"name":"reefki","email":"rifki@rifki.net"},"repository":{"url":"git+https://github.com/Calq-dev/talq-widget.git","type":"git"},"_npmVersion":"10.9.3","description":"Talq embedable script to insert chat widget","directories":{},"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","dotenv":"^17.2.3","eslint":"^9.39.2","rollup":"^2.79.2","prettier":"^3.8.1","typescript":"^5.8.3","@types/node":"^24.3.1","rollup-plugin-serve":"^3.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-replace":"^6.0.3","eslint-config-prettier":"^10.1.8","rollup-plugin-import-css":"^4.0.1","rollup-plugin-livereload":"^2.0.5","@rollup/plugin-typescript":"^12.1.4","@typescript-eslint/parser":"^8.53.1","@typescript-eslint/eslint-plugin":"^8.53.1"},"_npmOperationalInternal":{"tmp":"tmp/talq-widget_0.1.1_1777552191139_0.9205589037106652","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@calq/talq-widget","type":"module","version":"0.2.0","description":"Talq embedable script to insert chat widget","main":"dist/widget.js","types":"dist/index.d.ts","engines":{"node":">=16"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/widget.js"}},"repository":{"type":"git","url":"git+https://github.com/Calq-dev/talq-widget.git"},"keywords":["ai","assistant","chat","chatbot","embed","talq","widget"],"homepage":"https://github.com/Calq-dev/talq-widget#readme","bugs":{"url":"https://github.com/Calq-dev/talq-widget/issues"},"publishConfig":{"access":"public"},"scripts":{"prepublishOnly":"npm run build","build":"NODE_ENV=production rollup -c","dev":"NODE_ENV=development rollup -c -w","lint":"eslint src","lint:fix":"eslint src --fix","format":"prettier --write \"src/**/*.{ts,css}\"","format:check":"prettier --check \"src/**/*.{ts,css}\""},"author":{"name":"Rifki Aria Gumelar","url":"https://github.com/reefki"},"license":"MIT","devDependencies":{"@rollup/plugin-replace":"^6.0.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.4","@types/node":"^24.3.1","@typescript-eslint/eslint-plugin":"^8.53.1","@typescript-eslint/parser":"^8.53.1","dotenv":"^17.2.3","eslint":"^9.39.2","eslint-config-prettier":"^10.1.8","prettier":"^3.8.1","rollup":"^2.79.2","rollup-plugin-import-css":"^4.0.1","rollup-plugin-livereload":"^2.0.5","rollup-plugin-serve":"^3.0.0","tslib":"^2.8.1","typescript":"^5.8.3"},"_id":"@calq/talq-widget@0.2.0","gitHead":"46ba3f2c6106223f6d79a2bf08c8fbc348061c45","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-OL9rnBiUcjp3vjg6Mc/VCYQppoGQq3AutdnNjp8A0WCo5sKc5RuwhBKN3UOGzVhJxsBgYkPKuoCEh9YGccz8aw==","shasum":"048c0528f2067720afc2f35cf23ea38f304a8ea0","tarball":"https://registry.npmjs.org/@calq/talq-widget/-/talq-widget-0.2.0.tgz","fileCount":9,"unpackedSize":33535,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGsju+KqhHeTU0KM4Z3Up0bK6v6fVybRNdU9P6EAqmPCAiB0oflJxrGIjCYRFQbaQpGuH/L8lYEJDp+Ep+Z/CUZk4g=="}]},"_npmUser":{"name":"reefki","email":"rifki@rifki.net"},"directories":{},"maintainers":[{"name":"reefki","email":"rifki@rifki.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/talq-widget_0.2.0_1789644278280_0.19761591739614315"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-04T18:38:34.405Z","modified":"2026-09-17T11:24:38.582Z","0.1.0":"2026-02-04T18:38:34.669Z","0.1.1":"2026-04-30T12:29:51.301Z","0.2.0":"2026-09-17T11:24:38.418Z"},"bugs":{"url":"https://github.com/Calq-dev/talq-widget/issues"},"author":{"name":"Rifki Aria Gumelar","url":"https://github.com/reefki"},"license":"MIT","homepage":"https://github.com/Calq-dev/talq-widget#readme","keywords":["ai","assistant","chat","chatbot","embed","talq","widget"],"repository":{"type":"git","url":"git+https://github.com/Calq-dev/talq-widget.git"},"description":"Talq embedable script to insert chat widget","maintainers":[{"name":"reefki","email":"rifki@rifki.net"}],"readme":"# Talq Widget\n\n[![npm version](https://badge.fury.io/js/@calq%2Ftalq-widget.svg)](https://badge.fury.io/js/@calq%2Ftalq-widget)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA lightweight, embeddable chat widget for integrating Talq AI assistant into your website or web application. Supports both inline and floating bubble modes with customizable styling and positioning.\n\n## Features\n\n- 🚀 **Easy Integration** - Simple JavaScript API with minimal setup\n- 💬 **Two Display Modes** - Inline embedding or floating bubble widget\n- 🎨 **Customizable** - Configurable colors, positioning, and styling\n- 📱 **Responsive** - Works seamlessly on desktop and mobile devices\n- ⚡ **Lightweight** - Minimal footprint with no external dependencies\n- 🔧 **TypeScript Support** - Full TypeScript definitions included\n\n## Installation\n\n### Via NPM\n\n```bash\nnpm install @calq/talq-widget\n```\n\n### Via CDN\n\n```html\n<script src=\"https://unpkg.com/@calq/talq-widget@latest/dist/widget.js\"></script>\n```\n\n## Quick Start\n\n### Bubble Widget (Floating)\n\nCreate a floating chat bubble that appears on your website:\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n    <script src=\"https://unpkg.com/@calq/talq-widget@latest/dist/widget.js\"></script>\n</head>\n<body>\n    <script>\n        Talq.createBubbleWidget({\n            baseUrl: \"https://widget.talq.io\",\n            widgetId: \"your-widget-id\",\n            position: \"right\"\n        });\n    </script>\n</body>\n</html>\n```\n\n### Inline Widget (Embedded)\n\nEmbed the chat widget directly into a container element:\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n    <script src=\"https://unpkg.com/@calq/talq-widget@latest/dist/widget.js\"></script>\n</head>\n<body>\n    <div id=\"chat-container\" style=\"width: 400px; height: 600px;\"></div>\n\n    <script>\n        Talq.createInlineWidget({\n            baseUrl: \"https://widget.talq.io\",\n            widgetId: \"your-widget-id\",\n            element: \"chat-container\"\n        });\n    </script>\n</body>\n</html>\n```\n\n## API Reference\n\n### `createBubbleWidget(options)`\n\nCreates a floating bubble chat widget.\n\n**Parameters:**\n- `options` (Object): Configuration options\n  - `baseUrl` (string): The base URL of your Talq instance\n  - `widgetId` (string): Your unique widget identifier\n  - `position` (string): Position of the bubble - `\"left\"` or `\"right\"` (default: `\"right\"`)\n\n**Returns:**\n- `TalqBubbleWidgetInstance`: Widget instance with methods\n  - `destroy()`: Remove the widget from the page\n  - `toggle()`: Programmatically toggle the widget open/closed\n  - `sendMessage(content, options?)`: Send a message into the chat on behalf of the visitor. Opens the widget unless `options.open` is `false`\n\n**Example:**\n```javascript\nconst widget = Talq.createBubbleWidget({\n    baseUrl: \"https://widget.talq.io\",\n    widgetId: \"your-widget-id\",\n    position: \"left\"\n});\n\n// Toggle the widget programmatically\nwidget.toggle();\n\n// Send a message from the page, for example from an \"Ask about this product\" button\nwidget.sendMessage(\"Tell me more about the blue running shoes\");\n\n// Send without opening the widget; the reply shows up as a notification\nwidget.sendMessage(\"Tell me more about the blue running shoes\", { open: false });\n\n// Remove the widget\nwidget.destroy();\n```\n\n### `createInlineWidget(options)`\n\nCreates an inline chat widget embedded in a container.\n\n**Parameters:**\n- `options` (Object): Configuration options\n  - `baseUrl` (string): The base URL of your Talq instance\n  - `widgetId` (string): Your unique widget identifier\n  - `element` (HTMLElement | string): Container element or element ID\n\n**Returns:**\n- `TalqInlineWidgetInstance`: Widget instance with methods\n  - `destroy()`: Remove the widget from the container\n  - `sendMessage(content)`: Send a message into the chat on behalf of the visitor\n\n**Example:**\n```javascript\nconst widget = Talq.createInlineWidget({\n    baseUrl: \"https://widget.talq.io\",\n    widgetId: \"your-widget-id\",\n    element: document.getElementById(\"chat-container\")\n});\n\n// Send a message from the page\nwidget.sendMessage(\"Tell me more about the blue running shoes\");\n\n// Remove the widget\nwidget.destroy();\n```\n\n## Advanced Usage\n\n### ES6 Modules\n\nIf you're using a module bundler like Webpack or Vite:\n\n```javascript\nimport { createBubbleWidget, createInlineWidget } from '@calq/talq-widget';\n\n// Create bubble widget\nconst bubbleWidget = createBubbleWidget({\n    baseUrl: \"https://widget.talq.io\",\n    widgetId: \"your-widget-id\",\n    position: \"right\"\n});\n\n// Create inline widget\nconst inlineWidget = createInlineWidget({\n    baseUrl: \"https://widget.talq.io\",\n    widgetId: \"your-widget-id\",\n    element: \"#chat-container\"\n});\n```\n\n### TypeScript\n\nThe package includes TypeScript definitions:\n\n```typescript\nimport {\n    createBubbleWidget,\n    createInlineWidget,\n    TalqBubbleWidgetOptions,\n    TalqInlineWidgetOptions\n} from '@calq/talq-widget';\n\nconst bubbleOptions: TalqBubbleWidgetOptions = {\n    baseUrl: \"https://widget.talq.io\",\n    widgetId: \"your-widget-id\",\n    position: \"right\"\n};\n\nconst widget = createBubbleWidget(bubbleOptions);\n```\n\n## Styling and Customization\n\nThe widget automatically adapts to your website's theme and supports custom accent colors through CSS custom properties:\n\n```css\n:root {\n    --talq-widget-accent-color: #your-brand-color;\n}\n```\n\n### CSS Classes\n\nThe widget uses the following CSS classes that you can style:\n\n- `.talq-widget` - Base widget container\n- `.talq-widget-bubble` - Bubble widget container\n- `.talq-widget-inline` - Inline widget container\n- `.talq-widget__button` - Bubble toggle button\n- `.talq-widget__wrapper` - Widget content wrapper\n- `.talq-widget__iframe` - Chat iframe\n\n## Browser Support\n\n- Chrome 60+\n- Firefox 55+\n- Safari 11+\n- Edge 79+\n\n## Getting Your Widget ID\n\n1. Sign up at [Talq](https://talq.io)\n2. Create a new chat widget in your dashboard\n3. Copy the widget ID from the integration settings\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Support\n\n- 📧 Email: [support@talq.io](mailto:support@talq.io)\n- 🐛 Issues: [GitHub Issues](https://github.com/Calq-dev/talq-widget/issues)\n- 📖 Documentation: [Talq Docs](https://docs.talq.io)\n","readmeFilename":"README.md"}