This is a mobile-friendly Web Application for Dialogflow V2.
For a live demo, check this.

• NodeJS & NPM (or Yarn)
• Dialogflow V2 Project (for V1, use this old repo)

To connect this UI with Dialogflow, you need to use a backend server.

• Dialogflow Gateway API - Host this server and get the hosted URL.

Clone this repo first and cd into it.

• Using npm: npm i
• (Or) Using yarn: yarn

Open src/Config/index.js and change the API_URL variable to your Dialogflow Gateway API that you hosted.

The logo, agent name, description and available languages are fetched from your Dialogflow project. Change them there and it will sync to the UI.

To serve the web application (development purpose):

• Using npm: npm run serve
• (Or) Using yarn: yarn serve

Your browser should open and redirect to localhost:8080. You can also give a --port argument to serve at specific port.

Your app will be bundled to the dist directory

• Using npm: npm run build
• (Or) Using yarn: yarn build

Note: This is an unofficial Web Integration

• Dark Mode & Theming
• Voice Input and Speech Feedback (with SSML)
• Docker and Kubernetes support
• Rich-component, Webhook and Actions on Google Support (demo)
• Floating Widget for embedding on websites (repo and demo)
• Based on Vue, Webpack, Babel and PostCSS
• Lightweight (build is <50KB gzipped)
• Free and fully Documented
• Recommended by Dialogflow and MadeWithVueJS

You can make a custom theme for Dialogflow for Web v2, according to the specification:

To apply the variables, open src/Style/Theme.sass and change them in the \:root selector

You can also optimize your theme for Dark-mode-enabled clients within the same file and selector under the @media (prefers-color-scheme: dark)

Please note, when adding new languages, you may have to translate some of the UI as well (translations.json in src/Translations)