{"id":15024723,"url":"https://github.com/alisaitteke/typebot-vue","last_synced_at":"2025-04-12T12:53:00.725Z","repository":{"id":256482303,"uuid":"855413949","full_name":"alisaitteke/typebot-vue","owner":"alisaitteke","description":"Vue.js plugin for easily integrating Typebot chatbots into your web applications with customizable components like standard, popup, and bubble formats.","archived":false,"fork":false,"pushed_at":"2024-09-11T02:06:45.000Z","size":99,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T07:36:38.161Z","etag":null,"topics":["typebot","vue3","vue3-plugin","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alisaitteke.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-09-10T20:35:21.000Z","updated_at":"2024-12-30T20:51:14.000Z","dependencies_parsed_at":"2024-09-11T02:30:27.799Z","dependency_job_id":"2b38cb67-1057-4648-9a37-7be9126248ce","html_url":"https://github.com/alisaitteke/typebot-vue","commit_stats":null,"previous_names":["alisaitteke/typebot-vue"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Ftypebot-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Ftypebot-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Ftypebot-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Ftypebot-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alisaitteke","download_url":"https://codeload.github.com/alisaitteke/typebot-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571637,"owners_count":21126520,"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","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":["typebot","vue3","vue3-plugin","vuejs"],"created_at":"2024-09-24T20:00:47.895Z","updated_at":"2025-04-12T12:53:00.706Z","avatar_url":"https://github.com/alisaitteke.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 [Typebot](https://typebot.io/) Components\n\n\u003cimg src=\"https://raw.githubusercontent.com/alisaitteke/typebot-vue/master/public/icons/vue-logo.svg\" alt=\"drawing\" height=\"40\"/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/alisaitteke/typebot-vue/master/public/icons/typebot-logo.svg\" alt=\"drawing\" height=\"40\"/\u003e\n\n### Install\n```shell\nyarn add @alisaitteke/typebot-vue\nnpm install @alisaitteke/typebot-vue\npnpm add @alisaitteke/typebot-vue\n```\n\n---\n### What is Typebot?\n[Typebot](https://typebot.io/) enables you to build customizable chatbots that can be embedded into websites or apps, allowing for user interaction in a friendly and automated way. The platform offers a drag-and-drop interface, making it easy to create conversations, forms, and workflows to engage users.\n\n---\n![screenshot](https://raw.githubusercontent.com/alisaitteke/typebot-vue/master/public/icons/components/screenshot.png)\n\n## Components\n\n### Standard View \n![screenshot](https://raw.githubusercontent.com/alisaitteke/typebot-vue/master/public/icons/components/standard.svg)\n\nThis component integrates the Typebot in a standard format. The bot is displayed directly on the page.\n\n#### Example Usage\n```vue\n\u003ctemplate\u003e\n  \u003ctype-bot-standard :config=\"typeBotStandardConfig\"\u003e\u003c/type-bot-standard\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst typeBotStandardConfig = {\n  typebot: \"product-recommendation-bn4nu5j\",\n  apiHost: \"https://typebot.co\",\n}\n\u003c/script\u003e\n```\n---\n### Popup View\n![screenshot](https://raw.githubusercontent.com/alisaitteke/typebot-vue/master/public/icons/components/popup.svg)\n\n\nThis component displays Typebot as a popup. You can control when the popup automatically appears using autoShowDelay after the page has loaded.\n\n#### Example Usage\n```vue\n\u003ctemplate\u003e\n  \u003ctype-bot-popup :config=\"typeBotPopupConfig\"\u003e\u003c/type-bot-popup\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst typeBotPopupConfig = {\n  typebot: \"product-recommendation-bn4nu5j\",\n  apiHost: \"https://typebot.co\",\n  autoShowDelay: 1000, // The popup will appear automatically after 1 second\n}\n\u003c/script\u003e\n```\n---\n### Bubble View\n![screenshot](https://raw.githubusercontent.com/alisaitteke/typebot-vue/master/public/icons/components/bubble.svg)\n\nThis component displays a chat bubble in the corner of the page. When the user clicks on the bubble, the chatbot opens. You can also customize the theme and the preview message displayed on the bubble.\n\n#### Example Usage\n```vue\n\u003ctemplate\u003e\n  \u003ctype-bot-bubble :config=\"typeBotBubbleConfig\"\u003e\u003c/type-bot-bubble\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst typeBotBubbleConfig = {\n  typebot: \"product-recommendation-bn4nu5j\",\n  apiHost: \"https://typebot.co\",\n  previewMessage: { message: \"I have a question for you!\" },\n  theme: {\n    button: { backgroundColor: \"#4A8BB2\", customIconSrc: \"🤩\", size: \"large\" },\n    previewMessage: {\n      backgroundColor: \"#598E71\",\n      textColor: \"#FFFFFF\",\n      closeButtonBackgroundColor: \"#9B74B7\",\n      closeButtonIconColor: \"#D09C46\",\n    },\n  },\n}\n\u003c/script\u003e\n\n```\n\n---\n\n\u003cimg src=\"https://raw.githubusercontent.com/alisaitteke/typebot-vue/master/public/icons/nuxt-logo.svg\" alt=\"drawing\" height=\"70\"/\u003e\n\n## Using with Nuxt.js\n\nTo use the Typebot Vue plugin in a Nuxt.js project, follow these steps:\n\n### Step 1. Create a Plugin File\nIn your Nuxt.js project, create a `typebot.client.js` file in the `plugins/` directory:\n\n```js\n// plugins/typebot.client.js\nimport { defineNuxtPlugin } from '#app'\nimport TypebotVue from '@alisaitteke/typebot-vue'\n\nexport default defineNuxtPlugin(nuxtApp =\u003e {\n    nuxtApp.vueApp.use(TypebotVue)\n})\n```\n\n### Step 2. Register the Plugin in nuxt.config.js\nAdd the following entry to your nuxt.config.js to register the plugin:\n\n```js\nexport default {\n  plugins: [\n    { src: '~/plugins/typebot.client.js', mode: 'client' }\n  ]\n}\n```\n\nThis setup ensures that the Typebot Vue plugin is initialized on the client-side only in your Nuxt.js project.\n\n\n---\n\n### Why Custom Component Names?\nNormally, the component names would follow the standard naming convention like ```typebot-standard```. However, to avoid conflicts with Typebot's own DOM objects and naming conventions, we used custom names such as ```type-bot-standard```, ```type-bot-popup```, and ```type-bot-bubble```. This small adjustment ensures smooth integration and prevents any potential issues with Typebot’s internal structure.\n\n---\n# Disclaimer\nThis project is an unofficial Vue.js plugin for integrating Typebot into web applications. [Typebot](https://typebot.io/) is a registered trademark of its respective owners. This plugin is not affiliated with or endorsed by the [Typebot](https://typebot.io/) team. For official information, please visit [typebot.io](https://typebot.io/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falisaitteke%2Ftypebot-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falisaitteke%2Ftypebot-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falisaitteke%2Ftypebot-vue/lists"}