{"_id":"@ailifebot/js","name":"@ailifebot/js","dist-tags":{"latest":"0.10.14"},"versions":{"0.10.14":{"name":"@ailifebot/js","version":"0.10.14","description":"Javascript library to display typebots on your website","license":"FSL-1.1-ALv2","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/packages/embeds/js/src/index.d.ts","exports":{"./package.json":"./package.json",".":{"types":"./dist/packages/embeds/js/src/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./web":{"types":"./dist/packages/embeds/js/src/web.d.ts","import":"./dist/web.js","default":"./dist/web.js"}},"scripts":{"test":"bun test"},"devDependencies":{"@ai-sdk/ui-utils":"^1.2.11","@ark-ui/solid":"^5.19.0","@fix-webm-duration/fix":"^1.0.1","@stripe/stripe-js":"^7.4.0","@ailifebot/blocks-bubbles":"workspace:*","@ailifebot/blocks-inputs":"workspace:*","@ailifebot/blocks-integrations":"workspace:*","@ailifebot/blocks-logic":"workspace:*","@ailifebot/chat-api":"workspace:*","@ailifebot/env":"workspace:*","@ailifebot/lib":"workspace:*","@ailifebot/logs":"workspace:*","@ailifebot/rich-text":"workspace:*","@ailifebot/schemas":"workspace:*","@ailifebot/settings":"workspace:*","@ailifebot/theme":"workspace:*","@ailifebot/ui":"workspace:*","@ailifebot/zendesk-block":"workspace:*","@types/dompurify":"^3.2.0","dompurify":"^3.3.3","esbuild-plugin-solid":"^0.6.0","ky":"^1.2.4","marked":"^9.0.3","partysocket":"^1.0.2","postcss":"^8.5.6","solid-element":"^1.9.1","solid-js":"^1.9.9","@tailwindcss/postcss":"^4.1.16","tailwindcss":"^4.1.16"},"publishConfig":{"access":"public"},"nx":{"targets":{"build":{"executor":"@nx/esbuild:esbuild","outputs":["{options.outputPath}"],"defaultConfiguration":"production","options":{"outputPath":"{workspaceRoot}/packages/embeds/js/dist","main":"{workspaceRoot}/packages/embeds/js/src/index.ts","additionalEntryPoints":["{workspaceRoot}/packages/embeds/js/src/web.ts"],"tsConfig":"{workspaceRoot}/packages/embeds/js/tsconfig.lib.json","platform":"browser","format":["esm"],"bundle":true,"thirdParty":true,"declaration":true,"esbuildConfig":"{workspaceRoot}/packages/embeds/js/esbuild.config.cjs"},"configurations":{"development":{"minify":false,"deleteOutputPath":false},"production":{"minify":true}}},"copy-web-to-viewer":{"executor":"nx:run-commands","dependsOn":["build"],"inputs":["{workspaceRoot}/packages/embeds/js/dist/web.js"],"outputs":["{workspaceRoot}/apps/viewer/public/embed"],"options":{"command":"bash scripts/copy-embed-web-js.sh"}}}},"gitHead":"8f1ff3f85e6fece1f47dc4ce91a77f4fc9bfc1a9","_id":"@ailifebot/js@0.10.14","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-5ogsZQbyb2T2WwMrvNEtVWNw+QFgFHG16nNzE/xbxbwN1I45Ohrb9IjP+efdqS11A/U/ejNXV9UuZBHCWJIZPg==","shasum":"a2ab36f4e091d1a329b09758f0041d1fa8322db4","tarball":"https://registry.npmjs.org/@ailifebot/js/-/js-0.10.14.tgz","fileCount":291,"unpackedSize":918063,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH51raTyzULCW455pqhZ6YfnZwpHpS9sVfqIhAPaTUd0AiAIrxWewFjSVMgtVpW+HEXHH1EeEzM0qr+UV2tnqF5ZJw=="}]},"_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/js_0.10.14_1787037047986_0.024056917470637762"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-18T07:10:47.836Z","0.10.14":"2026-08-18T07:10:48.120Z","modified":"2026-08-18T07:10:48.299Z"},"maintainers":[{"name":"rajaryan001","email":"raj.aryan@ailifebot.in"}],"description":"Javascript library to display typebots on your website","license":"FSL-1.1-ALv2","readme":"# Typebot JS library\r\n\r\nFrontend library to embed typebots from [Typebot](https://www.typebot.io/).\r\n\r\n## Installation\r\n\r\n### Using npm\r\n\r\nTo install, simply run:\r\n\r\n```bash\r\nnpm install @ailifebot/js\r\n```\r\n\r\n### Directly in your HTML\r\n\r\nIf you're self-hosting Typebot, replace `your-domain.com` below with your own\r\nviewer domain — the build already serves a version-pinned copy of this\r\nlibrary at `/embed/<version>/web.js` (see the \"HTML & Javascript\" tab in the\r\nShare section of any typebot for the exact, up-to-date snippet). If you're\r\nnot self-hosting, you can load it from jsDelivr instead:\r\n`https://cdn.jsdelivr.net/npm/@ailifebot/js@0/dist/web.js`.\r\n\r\n```\r\n<script type=\"module\">\r\n  import Typebot from 'https://your-domain.com/embed/0.10.14/web.js'\r\n\r\n  Typebot.initStandard({\r\n    typebot: 'my-typebot',\r\n  })\r\n</script>\r\n\r\n<typebot-standard style=\"width: 100%; height: 600px; \"></typebot-standard>\r\n```\r\n\r\n## Standard\r\n\r\nYou can get the standard HTML and Javascript code by clicking on the \"HTML & Javascript\" button in the \"Share\" tab of your typebot.\r\n\r\nThere, you can change the container dimensions. Here is a code example:\r\n\r\n```html\r\n<script type=\"module\">\r\n  import Typebot from \"https://your-domain.com/embed/0.10.14/web.js\";\r\n\r\n  Typebot.initStandard({\r\n    typebot: \"my-typebot\",\r\n  });\r\n</script>\r\n\r\n<typebot-standard style=\"width: 100%; height: 600px; \"></typebot-standard>\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\nYou can get the popup HTML and Javascript code by clicking on the \"HTML & Javascript\" button in the \"Share\" tab of your typebot.\r\n\r\nHere is an example:\r\n\r\n```html\r\n<script type=\"module\">\r\n  import Typebot from \"https://your-domain.com/embed/0.10.14/web.js\";\r\n\r\n  Typebot.initPopup({\r\n    typebot: \"my-typebot\",\r\n    apiHost: \"http://localhost:3001\",\r\n    autoShowDelay: 3000,\r\n  });\r\n</script>\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\nTypebot.open();\r\n```\r\n\r\n```js\r\nTypebot.close();\r\n```\r\n\r\n```js\r\nTypebot.toggle();\r\n```\r\n\r\nYou can bind these commands on a button element, for example:\r\n\r\n```html\r\n<button onclick=\"Typebot.open()\">Contact us</button>\r\n```\r\n\r\n## Bubble\r\n\r\nYou can get the bubble HTML and Javascript code by clicking on the \"HTML & Javascript\" button in the \"Share\" tab of your typebot.\r\n\r\nHere is an example:\r\n\r\n```html\r\n<script type=\"module\">\r\n  import Typebot from \"https://your-domain.com/embed/0.10.14/web.js\";\r\n\r\n  Typebot.initBubble({\r\n    typebot: \"my-typebot\",\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      chatWindow: { backgroundColor: \"#ffffff\" },\r\n    },\r\n  });\r\n</script>\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\nTypebot.showPreviewMessage();\r\n```\r\n\r\n```js\r\nTypebot.hidePreviewMessage();\r\n```\r\n\r\n### Open or close the typebot\r\n\r\nYou can use these commands:\r\n\r\n```js\r\nTypebot.open();\r\n```\r\n\r\n```js\r\nTypebot.close();\r\n```\r\n\r\n```js\r\nTypebot.toggle();\r\n```\r\n\r\nYou can bind these commands on a button element, for example:\r\n\r\n```html\r\n<button onclick=\"Typebot.open()\">Contact us</button>\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```js\r\nTypebot.initStandard({\r\n  typebot: \"my-typebot\",\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\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 (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.\r\n","readmeFilename":"README.md","_rev":"1-0c7cb4b069c3b333f450fa1fd6abd3bf"}