{"_id":"@altbot/react","_rev":"1-14eb65f90641f6de235d8993b57cf052","name":"@altbot/react","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@altbot/react","version":"1.0.0","description":"React library to display altbot on your website","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"stories:dev":"ladle serve -p 3006","stories:build":"ladle build","dev":"rollup --watch --config rollup.config.js","build":"rollup --config rollup.config.js","lint":"eslint --fix \"src/**/*.ts*\""},"keywords":[],"author":{"name":"Asadul islam"},"license":"ISC","dependencies":{"@ladle/react":"2.5.1"},"devDependencies":{"@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.5","@rollup/plugin-babel":"6.0.3","@rollup/plugin-node-resolve":"15.0.2","@rollup/plugin-terser":"0.4.1","@rollup/plugin-typescript":"11.1.0","@altbot/js":"workspace:*","@types/node":"18.16.3","@types/react":"18.2.0","@typebot.io/prisma":"workspace:*","eslint":"8.39.0","eslint-config-custom":"workspace:*","@typebot.io/schemas":"workspace:*","react":"18.2.0","rollup":"3.20.2","rollup-plugin-typescript-paths":"1.4.0","@typebot.io/tsconfig":"workspace:*","tslib":"2.5.0","tsx":"3.12.7","typescript":"5.0.4","@typebot.io/lib":"workspace:*"},"peerDependencies":{"@altbot/js":"workspace:*","react":"18.x"},"repository":{"type":"git","url":"git+https://github.com/AltSolutions1/altbot.git"},"bugs":{"url":"https://github.com/AltSolutions1/altbot/issues"},"homepage":"https://github.com/AltSolutions1/altbot#readme","_id":"@altbot/react@1.0.0","gitHead":"a1dabb756c9d63d0ba910e218d4b3a958137d5a1","_nodeVersion":"20.10.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-GAjrI724y7Ml2DXZ7CpaERtDoTAb+gYt5rPqVCtvPk1eoB/Hyci8q/Q2H6fN90Ld5utkHbD+zXcxtlbNDYrBuA==","shasum":"01bb2603532f344d0fc5faf76505f1fc6d8e5d7b","tarball":"https://registry.npmjs.org/@altbot/react/-/react-1.0.0.tgz","fileCount":21,"unpackedSize":11880,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3NHuLMLP8r2/XfSTNI+6hKvLGwugDXfx+TlStAwf04AiEA1s7FaWO7RqpINSsp+f02YisXVZn34QFc2C2q4/61n4E="}]},"_npmUser":{"name":"ai.sohag327","email":"ai.sohag327@gmail.com"},"directories":{},"maintainers":[{"name":"ai.sohag327","email":"ai.sohag327@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_1.0.0_1708596950318_0.5834945060216183"},"_hasShrinkwrap":false},"1.0.1":{"name":"@altbot/react","version":"1.0.1","description":"React library to display altbot on your website","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"stories:dev":"ladle serve -p 3006","stories:build":"ladle build","dev":"rollup --watch --config rollup.config.js","build":"rollup --config rollup.config.js","lint":"eslint --fix \"src/**/*.ts*\""},"keywords":[],"author":{"name":"Asadul islam"},"license":"ISC","dependencies":{"@ladle/react":"2.5.1"},"devDependencies":{"@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.5","@rollup/plugin-babel":"6.0.3","@rollup/plugin-node-resolve":"15.0.2","@rollup/plugin-terser":"0.4.1","@rollup/plugin-typescript":"11.1.0","@altbot/js":"workspace:*","@types/node":"18.16.3","@types/react":"18.2.0","@typebot.io/prisma":"workspace:*","eslint":"8.39.0","eslint-config-custom":"workspace:*","@typebot.io/schemas":"workspace:*","react":"18.2.0","rollup":"3.20.2","rollup-plugin-typescript-paths":"1.4.0","@typebot.io/tsconfig":"workspace:*","tslib":"2.5.0","tsx":"3.12.7","typescript":"5.0.4","@typebot.io/lib":"workspace:*"},"peerDependencies":{"@altbot/js":"workspace:*","react":"18.x"},"repository":{"type":"git","url":"git+https://github.com/AltSolutions1/altbot.git"},"bugs":{"url":"https://github.com/AltSolutions1/altbot/issues"},"homepage":"https://github.com/AltSolutions1/altbot#readme","_id":"@altbot/react@1.0.1","gitHead":"a1dabb756c9d63d0ba910e218d4b3a958137d5a1","_nodeVersion":"20.10.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-eooABUpja5CgJDT6tzktbqKcM4IQB7qKsu0T369eoZb9AnMMWvt8qJkhi0wKJYF2zBBemrVGKp2dokikov8Mzw==","shasum":"a844112c0993f2c7d04a59a14deff099cd1b45f2","tarball":"https://registry.npmjs.org/@altbot/react/-/react-1.0.1.tgz","fileCount":21,"unpackedSize":11880,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhoriAP3LodLBplBDVr/Hyh8+hoLX5XUCzi9MUw4bU4AiEAwEwrOYnNskZZM5LmzQrOxLpJSymg8QAo6R7CsK7KJc8="}]},"_npmUser":{"name":"ai.sohag327","email":"ai.sohag327@gmail.com"},"directories":{},"maintainers":[{"name":"ai.sohag327","email":"ai.sohag327@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_1.0.1_1708597080915_0.5973200418453508"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-22T10:15:50.234Z","1.0.0":"2024-02-22T10:15:50.463Z","modified":"2024-02-22T10:18:02.044Z","1.0.1":"2024-02-22T10:18:01.088Z"},"maintainers":[{"name":"ai.sohag327","email":"ai.sohag327@gmail.com"}],"description":"React library to display altbot on your website","homepage":"https://github.com/AltSolutions1/altbot#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/AltSolutions1/altbot.git"},"author":{"name":"Asadul islam"},"bugs":{"url":"https://github.com/AltSolutions1/altbot/issues"},"license":"ISC","readme":"## Install\r\n\r\n```bash\r\nnpm install @@altbot/js @altbot/react\r\n```\r\n\r\n## Standard\r\n\r\n```tsx\r\nimport { Standard } from '@altbot/react'\r\n\r\nconst App = () => {\r\n  return (\r\n    <Standard\r\n      typebot=\"lead-generation-copy-3luzm6b\"\r\n      style={{ width: '100%', height: '600px' }}\r\n    />\r\n  )\r\n}\r\n```\r\n\r\nThis code is creating a container with a 100% width (will match parent width) and 600px height.\r\n\r\n## Popup\r\n\r\n```tsx\r\nimport { Popup } from '@altbot/react'\r\n\r\nconst App = () => {\r\n  return <Popup typebot=\"lead-generation-copy-3luzm6b\" autoShowDelay={3000} />\r\n}\r\n```\r\n\r\nThis code will automatically trigger the popup window after 3 seconds.\r\n\r\n### Open or Close a popup\r\n\r\nYou can use these commands:\r\n\r\n```js\r\nimport { open } from '@altbot/react'\r\n\r\nopen()\r\n```\r\n\r\n```js\r\nimport { close } from '@altbot/react'\r\n\r\nclose()\r\n```\r\n\r\n```js\r\nimport { toggle } from '@altbot/react'\r\n\r\ntoggle()\r\n```\r\n\r\n## Bubble\r\n\r\n```tsx\r\nimport { Bubble } from '@altbot/react'\r\n\r\nconst App = () => {\r\n  return (\r\n    <Bubble\r\n      typebot=\"lead-generation-copy-3luzm6b\"\r\n      previewMessage={{\r\n        message: 'I have a question for you!',\r\n        autoShowDelay: 5000,\r\n        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',\r\n      }}\r\n      theme={{\r\n        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },\r\n        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },\r\n      }}\r\n    />\r\n  )\r\n}\r\n```\r\n\r\nThis code will show the bubble and let a preview message appear after 5 seconds.\r\n\r\n### Open or close the preview message\r\n\r\nYou can use these commands:\r\n\r\n```js\r\nimport { showPreviewMessage } from '@altbot/react'\r\n\r\nTypebot.showPreviewMessage()\r\n```\r\n\r\n```js\r\nimport { hidePreviewMessage } from '@altbot/react'\r\n\r\nTypebot.hidePreviewMessage()\r\n```\r\n\r\n### Open or close the chat window\r\n\r\nYou can use these commands:\r\n\r\n```js\r\nimport { open } from '@altbot/react'\r\n\r\nopen()\r\n```\r\n\r\n```js\r\nimport { close } from '@altbot/react'\r\n\r\nclose()\r\n```\r\n\r\n```js\r\nimport { toggle } from '@altbot/react'\r\n\r\ntoggle()\r\n```\r\n\r\n## Additional configuration\r\n\r\nYou can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:\r\n\r\n```tsx\r\nimport { Standard } from '@altbot/react'\r\n\r\nconst App = () => {\r\n  return (\r\n    <Standard\r\n      typebot=\"lead-generation-copy-3luzm6b\"\r\n      style={{ width: '100%', height: '600px' }}\r\n      prefilledVariables={{\r\n        'Current URL': 'https://my-site/account',\r\n        'User name': 'John Doe',\r\n      }}\r\n    />\r\n  )\r\n}\r\n```\r\n\r\nIt will prefill the `Current URL` variable with \"https://my-site/account\" and the `User name` variable with \"John Doe\". More info about variables: [here](/editor/variables).\r\n\r\nNote that if your site URL contains query params the variables will automatically be injected to the altbot. So you don't need to manually transfer query params to the bot embed configuration.\r\n","readmeFilename":"README.md"}