{"_id":"@ailifebot/react","name":"@ailifebot/react","dist-tags":{"latest":"0.10.14"},"versions":{"0.10.14":{"name":"@ailifebot/react","version":"0.10.14","description":"Convenient library to display typebots on your React app","license":"FSL-1.1-ALv2","type":"module","main":"./dist/index.js","types":"./dist/packages/embeds/react/src/index.d.ts","exports":{".":{"types":"./dist/packages/embeds/react/src/index.d.ts","default":"./dist/index.js"},"./package.json":"./package.json"},"nx":{"targets":{"build":{"executor":"@nx/esbuild:esbuild","outputs":["{options.outputPath}"],"defaultConfiguration":"production","options":{"outputPath":"{workspaceRoot}/packages/embeds/react/dist","main":"{workspaceRoot}/packages/embeds/react/src/index.ts","additionalEntryPoints":["{workspaceRoot}/packages/embeds/react/src/web.ts"],"tsConfig":"{workspaceRoot}/packages/embeds/react/tsconfig.lib.json","platform":"browser","esbuildOptions":{"splitting":true},"format":["esm"],"bundle":true,"thirdParty":true,"external":["react","react/jsx-runtime"],"declaration":true},"configurations":{"development":{"minify":false,"deleteOutputPath":false},"production":{"minify":true}}}}},"dependencies":{"react":"^19.2.4","@ailifebot/js":"0.10.14"},"devDependencies":{"@types/react":"^19.2.14"},"peerDependencies":{"react":">=18"},"publishConfig":{"access":"public"},"gitHead":"8f1ff3f85e6fece1f47dc4ce91a77f4fc9bfc1a9","_id":"@ailifebot/react@0.10.14","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-mzlXmPOF7HDGnSoKhjTK1SACNPzg8hd8HDbpwfvPu9mOsqGz6oiQshhYvrtb+t7q6qzN4rYfOdZSlzJi8ORENw==","shasum":"3531d6587969ed6815f13f193f69644259a92ba8","tarball":"https://registry.npmjs.org/@ailifebot/react/-/react-0.10.14.tgz","fileCount":17,"unpackedSize":745487,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEvHRQ9WbvD81X+KJ5m0WmDuoPC500NAYTTuEaR5zLfHAiEAmV/qWz247dOMvTPCMsPq+BtP8CuMo7jdbogfD3SbUfA="}]},"_npmUser":{"name":"rajaryan001","email":"raj.aryan@ailifebot.in"},"directories":{},"maintainers":[{"name":"rajaryan001","email":"raj.aryan@ailifebot.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.10.14_1787037218103_0.28089932756099567"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-18T07:13:37.953Z","0.10.14":"2026-08-18T07:13:38.262Z","modified":"2026-08-18T07:13:38.494Z"},"maintainers":[{"name":"rajaryan001","email":"raj.aryan@ailifebot.in"}],"description":"Convenient library to display typebots on your React app","license":"FSL-1.1-ALv2","readme":"## Install\n\n```bash\nnpm install @ailifebot/react\n```\n\n## Standard\n\n```tsx\nimport { Standard } from \"@ailifebot/react\";\n\nconst App = () => {\n  return (\n    <Standard\n      typebot=\"lead-generation-copy-3luzm6b\"\n      style={{ width: \"100%\", height: \"600px\" }}\n    />\n  );\n};\n```\n\nThis code is creating a container with a 100% width (will match parent width) and 600px height.\n\n## Popup\n\n```tsx\nimport { Popup } from \"@ailifebot/react\";\n\nconst App = () => {\n  return <Popup typebot=\"lead-generation-copy-3luzm6b\" autoShowDelay={3000} />;\n};\n```\n\nThis code will automatically trigger the popup window after 3 seconds.\n\n### Open or Close a popup\n\nYou can use these commands:\n\n```js\nimport { open } from \"@ailifebot/react\";\n\nopen();\n```\n\n```js\nimport { close } from \"@ailifebot/react\";\n\nclose();\n```\n\n```js\nimport { toggle } from \"@ailifebot/react\";\n\ntoggle();\n```\n\n## Bubble\n\n```tsx\nimport { Bubble } from \"@ailifebot/react\";\n\nconst App = () => {\n  return (\n    <Bubble\n      typebot=\"lead-generation-copy-3luzm6b\"\n      previewMessage={{\n        message: \"I have a question for you!\",\n        autoShowDelay: 5000,\n        avatarUrl: \"https://avatars.githubusercontent.com/u/16015833?v=4\",\n      }}\n      theme={{\n        button: { backgroundColor: \"#0042DA\", iconColor: \"#FFFFFF\" },\n        previewMessage: { backgroundColor: \"#ffffff\", textColor: \"black\" },\n      }}\n    />\n  );\n};\n```\n\nThis code will show the bubble and let a preview message appear after 5 seconds.\n\n### Open or close the preview message\n\nYou can use these commands:\n\n```js\nimport { showPreviewMessage } from \"@ailifebot/react\";\n\nTypebot.showPreviewMessage();\n```\n\n```js\nimport { hidePreviewMessage } from \"@ailifebot/react\";\n\nTypebot.hidePreviewMessage();\n```\n\n### Open or close the chat window\n\nYou can use these commands:\n\n```js\nimport { open } from \"@ailifebot/react\";\n\nopen();\n```\n\n```js\nimport { close } from \"@ailifebot/react\";\n\nclose();\n```\n\n```js\nimport { toggle } from \"@ailifebot/react\";\n\ntoggle();\n```\n\n## Additional configuration\n\nYou can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:\n\n```tsx\nimport { Standard } from \"@ailifebot/react\";\n\nconst App = () => {\n  return (\n    <Standard\n      typebot=\"lead-generation-copy-3luzm6b\"\n      style={{ width: \"100%\", height: \"600px\" }}\n      prefilledVariables={{\n        \"Current URL\": \"https://my-site/account\",\n        \"User name\": \"John Doe\",\n      }}\n    />\n  );\n};\n```\n\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).\n\nNote that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.\n","readmeFilename":"README.md","_rev":"1-b95fb222748ff9e26fa7d385901ec4c4"}