{"id":13588886,"url":"https://github.com/mishushakov/dialogflow-web-v2","last_synced_at":"2025-04-05T12:07:26.298Z","repository":{"id":34336622,"uuid":"165597532","full_name":"mishushakov/dialogflow-web-v2","owner":"mishushakov","description":"Dialogflow Web Integration. Supports rich components","archived":false,"fork":false,"pushed_at":"2023-01-06T02:18:25.000Z","size":3153,"stargazers_count":425,"open_issues_count":15,"forks_count":134,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-29T11:09:13.312Z","etag":null,"topics":["agent","bot","chat","chatbot","conversational-agents","conversational-ai","conversational-ui","dark-theme","dialogflow","dialogflow-v2","javascript","nlp","ui","vue","vue3","webchat"],"latest_commit_sha":null,"homepage":"https://mishushakov.github.io/dialogflow-web-v2/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mishushakov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://paypal.me/ushakovhq"}},"created_at":"2019-01-14T04:55:29.000Z","updated_at":"2025-03-04T17:27:45.000Z","dependencies_parsed_at":"2023-01-15T06:24:18.102Z","dependency_job_id":null,"html_url":"https://github.com/mishushakov/dialogflow-web-v2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mishushakov%2Fdialogflow-web-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mishushakov%2Fdialogflow-web-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mishushakov%2Fdialogflow-web-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mishushakov%2Fdialogflow-web-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mishushakov","download_url":"https://codeload.github.com/mishushakov/dialogflow-web-v2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332609,"owners_count":20921853,"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":["agent","bot","chat","chatbot","conversational-agents","conversational-ai","conversational-ui","dark-theme","dialogflow","dialogflow-v2","javascript","nlp","ui","vue","vue3","webchat"],"created_at":"2024-08-01T15:07:00.425Z","updated_at":"2025-04-05T12:07:26.274Z","avatar_url":"https://github.com/mishushakov.png","language":"Vue","funding_links":["https://paypal.me/ushakovhq"],"categories":["Vue","agent"],"sub_categories":[],"readme":"![Dialogflow for Web v2](https://i.imgur.com/J8aTIwt.png)\n\n# Dialogflow for Web *v2*\n\n\u003e [Dialogflow](https://dialogflow.com) lets you build conversational interfaces on top of your products and services by providing a powerful natural language understanding (NLU) engine to process and understand natural language input\n\nThis is a unofficial Web Integration for the Dialogflow V2\n\n\u003e **Notice**: August 2021, i upgraded the web app to Vue 3, fixed security vulnerabilities and updated dependencies. The software comes for free, but my time is not. Consider supporting me on [PayPal](https://paypal.me/ushakovhq) or through a commercial agreement\n\n## Features\n\n- Progressive Web App (100/100 Lighthouse score)\n- Accessibility Features\n- Extensive Browser Support (IE8+), offline capabilities (history) and great SEO\n- Familiar UI \u0026 UX, based on the official Google Assistant Design Specifications\n- Dark Mode \u0026 [Theming](#theming)\n- Hands-free interaction with Voice Input and Speech Feedback (with SSML)\n- Language independent\n- [Docker](./Dockerfile) and [Kubernetes](./k8s) support\n- Rich-component, Webhook and Actions on Google Support ([demo](https://mishushakov.github.io/dialogflow-web-v2/))\n- Floating Widget for embedding on websites ([repo and demo](https://github.com/mishushakov/floating-chat))\n- Based on Vue **3**, Webpack, Babel and PostCSS\n- Lightweight (build is ~50KB gzipped)\n- Free and fully Documented\n- Made in Germany\n- Recommended by [Dialogflow](https://twitter.com/Dialogflow/status/923976390201847809) and [MadeWithVueJS](https://twitter.com/MadeWithVueJS/status/1130147606666063875)\n\nsponsored by [Vokode](https://www.vokode.com) - an audio marketing studio from Paris, which does: sound design, podcast and voice apps\n\n![Vokode](https://www.vokode.com/wp-content/uploads/2019/01/vokode-horizontal-web.png)\n\n# Installation\n\n## Requirements\n\n- NodeJS\n- npm or yarn\n- Google Account and Dialogflow V2 Agent (if you look for V1, please use my [old repo](https://github.com/mishushakov/dialogflow-web))\n\n## Backend\n\nDialogflow Gateway enables third-party integrations like this to securely access the Dialogflow V2 API\n\n- [Documentation](https://github.com/mishushakov/dialogflow-gateway-docs)\n- [Implementations](https://github.com/mishushakov/dialogflow-gateway-docs#implementations)\n\n`AD` [Dialogflow Gateway by Ushakov (Hosted)](https://dialogflow.cloud.ushakov.co) is the quickest way to get started with Dialogflow for Web v2\n\n## Clone the repository\n\nYou can use git or download from GitHub\n\n![Clone Dialogflow for Web v2](https://imgur.com/bpHE9K6.png)\n\n## Install the dependencies\n\nOpen the cloned folder. Then, using your package manager install the dependencies\n\nUsing npm\n\n`npm i`\n\nUsing yarn\n\n`yarn`\n\n## Connect the Agent\n\nOpen `src/config/index.js` and change the `endpoint` variable to your Dialogflow Gateway URL\n\nHint: the URL for [Dialogflow Gateway Hosted by Ushakov](https://dialogflow.cloud.ushakov.co) is always your google cloud project id + `.core.ushaflow.io`. If you have any troubles, make sure you connected your Agent to the Gateway, then visit the [console](https://dialogflow.cloud.ushakov.co/console/), click on \"Manage\" and copy the Gateway URL\n\nExample\n\n```js\nexport default {\n    endpoint: 'https://dialogflow-web-v2.core.ushaflow.io'\n    [...]\n}\n\n[...]\n```\n\nThe logo, agent name, description and available languages are fetched from Dialogflow. Change them in Dialogflow and it will sync to the UI. Please note, when adding new languages, you may have to translate some of the UI as well (`translations.json` in `src/translations`)\n\n## Develop\n\nOpen your cloned folder. Then, using your favorite package manager run the `serve` command\n\nUsing npm\n\n`npm run serve`\n\nUsing yarn\n\n`yarn serve`\n\nYour default browser should open and redirect to `localhost:8080`. If the port 8080 is already in use, you can give a `port` argument to connect at specified port\n\nUsing npm\n\n`npm run serve --port 9090`\n\nUsing yarn\n\n`yarn serve --port 9090`\n\n**PLEASE DO NOT USE THE DEVELOPMENT SERVER TO SERVE YOUR APP FOR VISITORS, DEVELOPMENT SERVER IS MEANT FOR THE DEVELOPMENT. PLEASE UPLOAD BUILD ARTIFACTS TO A STATIC WEB-SERVER**\n\n## Theme\n\nYou can make a custom theme for Dialogflow for Web v2, according to the specification:\n\n![Theme Dialogflow for Web v2](https://i.imgur.com/nQ7tK3d.png)\n\nTo apply the variables, open `src/style/theme.sass` and change them in the `\\:root` selector\n\nYou can also optimize your theme for Dark-mode-enabled clients within the same file and selector under the `@media (prefers-color-scheme: dark)`\n\n## Build\n\nYour app will be bundled to the `dist` directory\n\nTo build it you can use npm or yarn\n\nUsing npm\n\n`npm run build`\n\nUsing yarn\n\n`yarn build`\n\n## Update\n\nRun `git pull origin master` to integrate changes\n\nAdditionally, keep vue packages up-to-date\n\n```\nvue upgrade\n```\n\n## Frequently Asked Questions\n\n- Q: I don't see any changes\n- A: Make sure you **cleaned the cache** and **rebuilt the app**. In Safari go to \"Develop\" \u003e \"Empty Caches\". In Chrome: \"Developer Tools\" \u003e \"Application\" \u003e \"Clear storage\" \u003e \"Clear site data\"\n\n## Inquiries\n\n[Contact the developer](https://mish.co/contact) or [open a issue](https://github.com/mishushakov/dialogflow-web-v2/issues/new)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmishushakov%2Fdialogflow-web-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmishushakov%2Fdialogflow-web-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmishushakov%2Fdialogflow-web-v2/lists"}