feat: chatwoot

apps/nuxt-playground/package.json

@@ -38,7 +38,7 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-vue": "9.4.0",
-    "nuxt": "3.0.0-rc.10",
+    "nuxt": "3.0.0-rc.11",
     "prettier": "2.7.1",
     "prettier-plugin-tailwindcss": "0.1.13",
     "sass": "1.54.9",

apps/playground/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@huntersofbook/form-naiveui": "workspace*",
+    "@huntersofbook/chatwoot-vue": "workspace:*",
     "@vueuse/core": "9.2.0",
     "@vueuse/head": "0.7.11",
     "huntersofbook": "workspace*",

apps/playground/src/App.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useChatWoot } from '@huntersofbook/chatwoot-vue'
+const { isModalVisible, toggle, toggleBubbleVisibility, popoutChatWindow } =
+  useChatWoot()
+
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
@@ -41,5 +45,15 @@ useHead({
 </script>
 
 <template>
+  <div class="flex space-x-3">
+    <div>{{ isModalVisible }}</div>
+    <button @click="toggle('open')">open</button>
+    <button @click="toggle('close')">close</button>
+    <div class="flex space-x-3">
+      <button @click="toggleBubbleVisibility('hide')">hide</button>
+      <button @click="toggleBubbleVisibility('show')">show</button>
+      <button @click="popoutChatWindow">open popup</button>
+    </div>
+  </div>
   <RouterView />
 </template>

apps/playground/src/main.ts

@@ -1,3 +1,4 @@
+import { createChatWoot } from '@huntersofbook/chatwoot-vue'
 import { createHead } from '@vueuse/head'
 import { setupLayouts } from 'virtual:generated-layouts'
 import { createApp } from 'vue'
@@ -19,14 +20,24 @@ document.head.appendChild(meta)
 // https://github.com/antfu/vite-ssg
 export const app = createApp(App)
 const head = createHead()
-
+const chatwoot = createChatWoot({
+  init: {
+    websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'
+  },
+  settings: {
+    locale: 'en',
+    position: 'left',
+    launcherTitle: 'Hello Chat'
+  }
+})
 const router = createRouter({
   history: createWebHistory(),
   routes
 })
 
 app.use(router)
 app.use(head)
+app.use(chatwoot)
 
 async function init() {
   try {

docs/content/2.projects.md

@@ -64,7 +64,7 @@ Packages Nuxt 3
 
   ::package
   ---
-  title: ChatWoot (soon)
+  title: ChatWoot
   logo: chatwoot.png
   description: Chatwoot is an open-source customer engagement platform that helps companies ...
   username: '@productdevbook'

docs/content/3.guide/1.nuxt-packages/3.chatwoot.md

@@ -0,0 +1,121 @@
+# Chatwoot
+Chatwoot is an open-source customer engagement platform that helps companies engage their customers on their website, Facebook page, Twitter, Whatsapp, SMS, ...
+
+![alt text](https://github.com/huntersofbook/huntersofbook/blob/main/apps/docs/images/chatwoot-nuxt.png?raw=true)
+
+> [Chatwoot](https://www.chatwoot.com/help-center) integration for [Nuxt](https://nuxtjs.org)
+
+## Setup
+
+::code-group
+
+```shell [pnpm]
+pnpm add @huntersofbook/chatwoot-nuxt
+```
+
+```shell [yarn]
+yarn add @huntersofbook/chatwoot-nuxt
+```
+
+```shell [npm]
+npm add @huntersofbook/chatwoot-nuxt
+```
+
+::
+
+
+### Nuxt Config
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@huntersofbook/chatwoot-nuxt'
+  ],
+
+  huntersofbookChatwoot: {
+    init: {
+      websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'
+    },
+    settings: {
+      locale: 'en',
+      position: 'left',
+      launcherTitle: 'Hello Chat',
+      // ... and more settings
+    }
+  }
+})
+```
+
+
+
+### Composables
+Add app.vue or add wherever you want.
+
+```vue
+<script setup lang="ts">
+const { 
+  isModalVisible, 
+  toggle, 
+  toggleBubbleVisibility, 
+  popoutChatWindow, 
+  ...more } = useChatWoot()
+
+</script>
+
+<template>
+  <div class="flex space-x-3">
+    <div>{{ isModalVisible }}</div>
+    <button @click="toggle('open')">open</button>
+    <button @click="toggle('close')">close</button>
+    <div class="flex space-x-3">
+      <button @click="toggleBubbleVisibility('hide')">hide</button>
+      <button @click="toggleBubbleVisibility('show')">show</button>
+      <button @click="popoutChatWindow()">open popup</button>
+    </div>
+  </div>
+</template>
+```
+
+
+## Init Default
+
+| Option         | Type     | Description                                                       | Default                  |
+| -------------- | -------- | ----------------------------------------------------------------- | ------------------------ |
+| websiteToken         | `string` | The token given to you when you create a chat widget. |    |
+| baseUrl       | `bool`   | Your site's domain, as declared by you in Chatwoot's settings | `https://app.chatwoot.com`    |
+
+
+## useChatWoot
+
+`useChatWoot()` accepts some
+
+| Option         | Type     | Description                                                        |
+| -------------- | -------- | -----------------------------------------------------------------  |
+| isModalVisible   | `boolean` | This chat will show you its open status.    |
+| toggle       | `'open' or 'close' - Function `   |   You can open and close the chat   |
+| setUser       | `key: string, args: ChatwootSetUserProps - Function`   | You can send user information to chatwoot panel.     |
+| setCustomAttributes       | `attributes: { [key: string]: string } - Function`   | You can send custom attributes to chatwoot panel.   |
+| deleteCustomAttribute       | `key: string - Function`   | You can delete custom attributes to chatwoot panel.   |
+| setLocale       | `local: string - Function`   |  Change widget locale  |
+| setLabel       | `label: string - Function`   |  You can send label to chatwoot panel.        |
+| removeLabel       | `label: string - Function`   |  You can delete label to chatwoot panel.        |
+| reset       | `Function` |  You can reset all settings.   |
+| toggleBubbleVisibility       | `'hide' or 'show' - Function`   | You can set the speech bubble's hide state.    |
+| popoutChatWindow       |  | You can open the conversation as a popup.  |
+
+
+## 💻 Development
+
+- Clone this repository
+- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10)
+- Install dependencies using `pnpm install`
+- Stub module with `pnpm dev:prepare`
+- Run `pnpm dev` to start [playground](./playground) in development mode
+
+## Thanks
+
+Thanks to [@surmon-china](https://github.com/surmon-china), this project loadScript function is heavily inspired by [surmon-china.github.io](https://github.com/surmon-china/surmon-china.github.io).
+
+## License
+
+MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook)

docs/content/3.guide/2.vue-packages/2.chatwoot.md

@@ -1,10 +1,10 @@
 # Chatwoot
 
-Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected.
+Chatwoot is an open-source customer engagement platform that helps companies engage their customers on their website, Facebook page, Twitter, Whatsapp, SMS, ...
 
 ![alt text](https://github.com/huntersofbook/huntersofbook/blob/main/apps/docs/images/chatwoot-vue.png?raw=true)
 
-> [Plausible](https://plausible.io/docs) integration for [Nuxt](https://nuxtjs.org)
+> [Chatwoot](https://www.chatwoot.com/help-center) integration for [Vue](https://vuejs.org)
 
 ## Setup
 
@@ -25,48 +25,95 @@ npm add @huntersofbook/chatwoot-vue
 ::
 
 
-## Nuxt Config
+### Vue Config
 
+```ts [main.ts]
+import { createChatWoot } from '@huntersofbook/chatwoot-vue'
 
-```ts
-export default defineNuxtConfig({
-  modules: [
-    '@huntersofbook/naive-ui-nuxt'
-  ]
+const chatwoot = createChatWoot({
+  init: {
+    websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'
+  },
+  settings: {
+    locale: 'en',
+    position: 'left',
+    launcherTitle: 'Hello Chat'
+  }
 })
+
+app.use(chatwoot)
 ```
 
+
 ### Composables
+Add app.vue or add wherever you want.
 
-```vue [app.vue]
+```vue
 <script setup lang="ts">
-import { darkTheme } from 'naive-ui'
+import { useChatWoot } from '@huntersofbook/chatwoot-vue'
+
+const { isModalVisible, 
+toggle, 
+toggleBubbleVisibility, 
+popoutChatWindow, 
+...more } = useChatWoot()
 
 </script>
 
 <template>
-  <NConfigProvider :theme="darkTheme">
-    <NGlobalStyle />
-    <div>
-      Nuxt module playground!
-      <NButton>Default</NButton>
+  <div class="flex space-x-3">
+    <div>{{ isModalVisible }}</div>
+    <button @click="toggle('open')">open</button>
+    <button @click="toggle('close')">close</button>
+    <div class="flex space-x-3">
+      <button @click="toggleBubbleVisibility('hide')">hide</button>
+      <button @click="toggleBubbleVisibility('show')">show</button>
+      <button @click="popoutChatWindow()">open popup</button>
     </div>
-  </NConfigProvider>
+  </div>
 </template>
-```         
+```
+
+
+## Init Default
+
+| Option         | Type     | Description                                                       | Default                  |
+| -------------- | -------- | ----------------------------------------------------------------- | ------------------------ |
+| websiteToken         | `string` | The token given to you when you create a chat widget. |    |
+| baseUrl       | `bool`   | Your site's domain, as declared by you in Chatwoot's settings | `https://app.chatwoot.com`    |
+
 
-## Development 💻 
+## useChatWoot
+
+`useChatWoot()` accepts some
+
+| Option         | Type     | Description                                                        |
+| -------------- | -------- | -----------------------------------------------------------------  |
+| isModalVisible   | `boolean` | This chat will show you its open status.    |
+| toggle       | `'open' or 'close' - Function `   |   You can open and close the chat   |
+| setUser       | `key: string, args: ChatwootSetUserProps - Function`   | You can send user information to chatwoot panel.     |
+| setCustomAttributes       | `attributes: { [key: string]: string } - Function`   | You can send custom attributes to chatwoot panel.   |
+| deleteCustomAttribute       | `key: string - Function`   | You can delete custom attributes to chatwoot panel.   |
+| setLocale       | `local: string - Function`   |  Change widget locale  |
+| setLabel       | `label: string - Function`   |  You can send label to chatwoot panel.        |
+| removeLabel       | `label: string - Function`   |  You can delete label to chatwoot panel.        |
+| reset       | `Function` |  You can reset all settings.   |
+| toggleBubbleVisibility       | `'hide' or 'show' - Function`   | You can set the speech bubble's hide state.    |
+| popoutChatWindow       |  | You can open the conversation as a popup.  |
+
+
+## 💻 Development
 
 - Clone this repository
 - Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10)
 - Install dependencies using `pnpm install`
 - Stub module with `pnpm dev:prepare`
 - Run `pnpm dev` to start [playground](./playground) in development mode
 
-## License
+## Thanks
 
-MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook)
+Thanks to [@surmon-china](https://github.com/surmon-china), this project loadScript function is heavily inspired by [surmon-china.github.io](https://github.com/surmon-china/surmon-china.github.io).
 
-## 💚 Credits
+## License
 
-Nuxt 3 Plugin [danielroe](https://github.com/danielroe)
+MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook)

package.json

@@ -25,6 +25,7 @@
     "@huntersofbook/form-naiveui": "workspace:*",
     "@huntersofbook/plausible-nuxt": "workspace:*",
     "@huntersofbook/plausible-vue": "workspace:*",
+    "@huntersofbook/chatwoot-vue": "workspace:*",
     "@huntersofbook/naive-ui-nuxt": "workspace:*",
     "@huntersofbook/ui": "workspace:*",
     "@nuxtjs/eslint-config-typescript": "^11.0.0",

packages/chatwoot-nuxt/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

packages/chatwoot-nuxt/.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

packages/chatwoot-nuxt/.eslintrc

@@ -0,0 +1,4 @@
+{
+    "root": true,
+    "extends": ["../../.eslintrc"]
+}