├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── cypress.json ├── demo ├── .browserslistrc ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── NavList.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── Custom.vue │ │ ├── Email.vue │ │ ├── Line.vue │ │ ├── Messeger.vue │ │ ├── Mixed.vue │ │ ├── RTL.vue │ │ ├── Telegram.vue │ │ ├── Twitter.vue │ │ ├── Viber.vue │ │ ├── WeChat.vue │ │ └── WhatsApp.vue └── vue.config.js ├── docs ├── .vuepress │ ├── config.js │ ├── enhanceApp.js │ └── styles │ │ ├── index.styl │ │ └── palette.styl ├── README.md ├── demo │ ├── custom.md │ ├── line.md │ ├── messenger.md │ ├── mixed.md │ ├── rtl.md │ ├── telegram.md │ ├── twitter.md │ ├── viber.md │ ├── wechat.md │ └── whatsapp.md ├── events.md ├── props.md ├── setup-v2.md ├── setup-v3.md └── slots.md ├── index.d.ts ├── jest.config.js ├── package-lock.json ├── package.json ├── rollup.config.dev.js ├── rollup.config.prod.js ├── src ├── ListChat.vue ├── SocialChat.vue ├── constants.js ├── icons │ ├── chat.svg │ ├── close.svg │ ├── email.svg │ ├── line.svg │ ├── messenger.svg │ ├── telegram.svg │ ├── twitter.svg │ ├── viber.svg │ ├── wechat.svg │ └── whatsapp.svg ├── index.js ├── logos │ ├── email.png │ ├── line.png │ ├── messenger.png │ ├── telegram.png │ ├── twitter.png │ ├── viber.png │ ├── wechat.png │ └── whatsapp.png └── plugin.js └── tests └── e2e └── support ├── commands.js └── index.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | "cypress/globals": true, 5 | browser: true, 6 | node: true 7 | }, 8 | plugins: [ 9 | 'cypress', 10 | 'vuejs-accessibility' 11 | ], 12 | extends: [ 13 | 'plugin:vue/recommended', 14 | '@vue/standard', 15 | 'plugin:vuejs-accessibility/recommended' 16 | ], 17 | parserOptions: { 18 | parser: 'babel-eslint' 19 | }, 20 | rules: { 21 | 'no-console': 'off' 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .temp 4 | demo/vue-social-chat.js -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [0.1.6](https://github.com/ktquez/vue-social-chat/compare/v0.1.5...v0.1.6) (2020-12-02) 6 | 7 | ### [0.1.5](https://github.com/ktquez/vue-social-chat/compare/v0.1.4...v0.1.5) (2020-07-30) 8 | 9 | 10 | ### Features 11 | 12 | * Using @vue-a11y/focus-loop to trap focus in social popup ([f2dbd51](https://github.com/ktquez/vue-social-chat/commit/f2dbd5138cbbcafdaf8bbf9b5541bacc00e669c9)) 13 | 14 | ### [0.1.4](https://github.com/ktquez/vue-social-chat/compare/v0.1.3...v0.1.4) (2020-06-25) 15 | 16 | 17 | ### Bug Fixes 18 | 19 | * Using string in aria-expanded attribute ([cb7ecf5](https://github.com/ktquez/vue-social-chat/commit/cb7ecf5c839a62beb38956da3f888dcafc91e7d4)) 20 | 21 | ### [0.1.3](https://github.com/ktquez/vue-social-chat/compare/v0.1.2...v0.1.3) (2020-06-25) 22 | 23 | 24 | ### Bug Fixes 25 | 26 | * Make aria-expanded dynamic ([3e43380](https://github.com/ktquez/vue-social-chat/commit/3e43380863bd4bc164dad522d50592335027e724)) 27 | 28 | ### [0.1.2](https://github.com/ktquez/vue-social-chat/compare/v0.1.1...v0.1.2) (2020-06-25) 29 | 30 | ### [0.1.1](https://github.com/ktquez/vue-social-chat/compare/v0.1.0...v0.1.1) (2020-06-25) 31 | 32 | 33 | ### Bug Fixes 34 | 35 | * Add text-align: left when dir=ltr ([b4529ff](https://github.com/ktquez/vue-social-chat/commit/b4529ff670a2f35dc0a4926dd8da65025f86fd25)) 36 | 37 | ## [0.1.0](https://github.com/ktquez/vue-social-chat/compare/v0.0.1...v0.1.0) (2020-06-24) 38 | 39 | 40 | ### Features 41 | 42 | * Add logo app in avatar ([94b0ff3](https://github.com/ktquez/vue-social-chat/commit/94b0ff3267b33a3c3787eb0056c4e6594fcb55f0)) 43 | * Add prop "open" in slot icon ([fc57fb3](https://github.com/ktquez/vue-social-chat/commit/fc57fb3ee9df5e80bd27895ca69e6588dabde0a6)) 44 | * Close popup when click outside and keydown Escape ([8c194f3](https://github.com/ktquez/vue-social-chat/commit/8c194f3827727b67b13221848e21c3c1d864e431)) 45 | * Custom href link by chat app ([608c9ca](https://github.com/ktquez/vue-social-chat/commit/608c9ca3fe20f7f6f6fb0875b6a3980e35c0b1e8)) 46 | * Event popup status (open nd close) ([aa8deab](https://github.com/ktquez/vue-social-chat/commit/aa8deab7f70338f8054be08394f5729fca7e0cea)) 47 | * Popup box animation ([485498b](https://github.com/ktquez/vue-social-chat/commit/485498b782a4fe5e5a4750abbf56a98852d0a3e1)) 48 | * Support text direction ([8f49b25](https://github.com/ktquez/vue-social-chat/commit/8f49b2534c821b3d328f2d22a94e9a68e3cc3979)) 49 | 50 | 51 | ### Bug Fixes 52 | 53 | * Change slot name from icon to button ([821ff4d](https://github.com/ktquez/vue-social-chat/commit/821ff4d2dc99cc803bf9ece4a75466b5b7bbcfbe)) 54 | * Get logo by property app in attendant ([fd65e8f](https://github.com/ktquez/vue-social-chat/commit/fd65e8f8749ee782fdf0ce9ca360bc8e0f5a00cb)) 55 | * Prop icon false as default ([97f251a](https://github.com/ktquez/vue-social-chat/commit/97f251a3a4f4ad826524d375e41b9aaab8ad54f8)) 56 | * removeEventListeners also in beforeDestroy hook ([a570d3b](https://github.com/ktquez/vue-social-chat/commit/a570d3bbe02574a9483b02eb2f506aeaf45cfaf9)) 57 | * Show close icon when popup open ([1fd25b4](https://github.com/ktquez/vue-social-chat/commit/1fd25b4c90dfa5612d98d46b7566b6b8a588d3fa)) 58 | * Use v-show in vsc-popup-box ([67d0c85](https://github.com/ktquez/vue-social-chat/commit/67d0c855b74efdee0848a71b91af71bcdbd3ce46)) 59 | * Using cdn github to svg icons ([b241124](https://github.com/ktquez/vue-social-chat/commit/b241124cacdfc16d004e11d0384cbd0aa481f0b3)) 60 | * z-index and other styles in SocialChat component ([6a430b4](https://github.com/ktquez/vue-social-chat/commit/6a430b4a0b258bb25c4cc85891c473ea5cd705e0)) 61 | * **style:** Max-height in popup-body ([682b840](https://github.com/ktquez/vue-social-chat/commit/682b840430afd7624bd6ee8d41deed4923b619c8)) 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Alan Ktquez 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-social-chat 2 | 3 | --- 4 | 🔥 HEADS UP! You are in the Vue 2 compatible branch, [check the branch for Vue 3 support](https://github.com/ktquez/vue-social-chat/tree/next). 5 | 6 | --- 7 | 8 | Vue.js component for your visitors and customers to send messages directly to you through social chats or customized form. 9 | 10 | `vue-social-chat` allows your customers to open a conversation from your website directly to chat apps like **WhatsApp**, **Telegram**, **Messenger**, **WeChat**, **Line**, **Viber** or even the same **custom form**. 11 | 12 | Most people use a chat app, so offering your customer a form of direct contact helps you cover visitors to customers, as well as providing you with **leads** to increase your sales or spread your content. 13 | 14 | ## Links 15 | 16 | - [Documentation](https://ktquez.github.io/vue-social-chat) 17 | - [Demo](https://vue-social-chat.surge.sh/) 18 | 19 | ## Contributing 20 | 21 | - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found; 22 | - Fork repository, make changes, add your name and link in the authors session CONTRIBUTING.md; 23 | - Send a pull request; 24 | 25 | ## Support me 26 | 27 | 28 | Support me on Ko-fi 29 | 30 | 31 |
32 | 33 | If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez) 34 | 35 | ## License 36 | 37 | VueDisqus is open-sourced package licensed under the [MIT](https://github.com/ktquez/vue-disqus/blob/master/LICENSE) license 38 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:8080", 3 | "fixturesFolder": "tests/e2e/fixtures", 4 | "screenshotsFolder": "tests/e2e/screenshots", 5 | "integrationFolder": "tests/e2e/integration", 6 | "fileServerFolder": "demo", 7 | "pluginsFile": false, 8 | "supportFile": "tests/e2e/support" 9 | } 10 | -------------------------------------------------------------------------------- /demo/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # demo 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "vue": "^2.6.11", 12 | "vue-router": "^3.2.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.4.0", 16 | "@vue/cli-plugin-router": "^4.4.4", 17 | "@vue/cli-service": "~4.4.0", 18 | "vue-template-compiler": "^2.6.11" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | 31 | -------------------------------------------------------------------------------- /demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/demo/src/assets/logo.png -------------------------------------------------------------------------------- /demo/src/components/NavList.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 70 | 71 | 84 | -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path: '/whatsapp', 9 | component: () => import(/* webpackChunkName: "whats-app" */ '../views/WhatsApp.vue') 10 | }, 11 | { 12 | path: '/messeger', 13 | component: () => import(/* webpackChunkName: "messeger" */ '../views/Messeger.vue') 14 | }, 15 | { 16 | path: '/telegram', 17 | component: () => import(/* webpackChunkName: "telegram" */ '../views/Telegram.vue') 18 | }, 19 | { 20 | path: '/wechat', 21 | component: () => import(/* webpackChunkName: "we-chat" */ '../views/WeChat.vue') 22 | }, 23 | { 24 | path: '/twitter', 25 | component: () => import(/* webpackChunkName: "twitter" */ '../views/Twitter.vue') 26 | }, 27 | { 28 | path: '/viber', 29 | component: () => import(/* webpackChunkName: "viber" */ '../views/Viber.vue') 30 | }, 31 | { 32 | path: '/line', 33 | component: () => import(/* webpackChunkName: "line" */ '../views/Line.vue') 34 | }, 35 | { 36 | path: '/email', 37 | component: () => import(/* webpackChunkName: "email" */ '../views/Email.vue') 38 | }, 39 | { 40 | path: '/mixed', 41 | component: () => import(/* webpackChunkName: "mixed" */ '../views/Mixed.vue') 42 | }, 43 | { 44 | path: '/custom', 45 | component: () => import(/* webpackChunkName: "custom" */ '../views/Custom.vue') 46 | }, 47 | { 48 | path: '/rtl', 49 | component: () => import(/* webpackChunkName: "rtl" */ '../views/RTL.vue') 50 | } 51 | ] 52 | 53 | const router = new VueRouter({ 54 | mode: 'history', 55 | base: process.env.BASE_URL, 56 | routes 57 | }) 58 | 59 | export default router 60 | -------------------------------------------------------------------------------- /demo/src/views/Custom.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 91 | 92 | 119 | -------------------------------------------------------------------------------- /demo/src/views/Email.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 79 | -------------------------------------------------------------------------------- /demo/src/views/Line.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 72 | 73 | 81 | -------------------------------------------------------------------------------- /demo/src/views/Messeger.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 75 | 76 | 85 | -------------------------------------------------------------------------------- /demo/src/views/Mixed.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 79 | -------------------------------------------------------------------------------- /demo/src/views/RTL.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 71 | 72 | 80 | -------------------------------------------------------------------------------- /demo/src/views/Telegram.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 61 | 62 | 70 | -------------------------------------------------------------------------------- /demo/src/views/Twitter.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 58 | 59 | 67 | -------------------------------------------------------------------------------- /demo/src/views/Viber.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 72 | 73 | 81 | -------------------------------------------------------------------------------- /demo/src/views/WeChat.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 70 | 71 | 79 | -------------------------------------------------------------------------------- /demo/src/views/WhatsApp.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 73 | 74 | 83 | -------------------------------------------------------------------------------- /demo/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | disableHostCheck: true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: '/vue-social-chat/', 3 | theme: 'default-vue-a11y', 4 | title: 'Vue social chat', 5 | description: 'Vue.js component for your visitors and customers to send messages directly to you through social chats or customized form.', 6 | serviceWorker: true, 7 | head: [ 8 | ['meta', { name: 'theme-color', content: '#fff' }] 9 | ], 10 | themeConfig: { 11 | home: false, 12 | repo: 'ktquez/vue-social-chat', 13 | docsDir: 'docs', 14 | docsBranch: 'master', 15 | editLinks: true, 16 | locales: { 17 | '/': { 18 | editLinkText: 'Edit this page on GitHub', 19 | sidebar: [ 20 | { 21 | title: 'Getting Started', 22 | collapsable: false, 23 | children: [ 24 | '/', 25 | '/setup-v2.md', 26 | '/setup-v3.md', 27 | '/props.md', 28 | '/slots.md', 29 | '/events.md', 30 | { 31 | title: 'Demo', 32 | path: 'https://vue-social-chat.surge.sh/' 33 | } 34 | ] 35 | } 36 | ] 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import VueSocialChat from '../../src' 2 | 3 | export default ({ Vue }) => { 4 | Vue.use(VueSocialChat) 5 | } -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | .whatsapp-chat { 2 | --whatsapp: #46c056; 3 | --vsc-bg-header: var(--whatsapp); 4 | --vsc-bg-button: var(--whatsapp); 5 | --vsc-outline-color: var(--whatsapp); 6 | } 7 | 8 | .wechat-chat { 9 | --wechat: #00ba59; 10 | --vsc-bg-header: var(--wechat); 11 | --vsc-bg-button: var(--wechat); 12 | --vsc-outline-color: var(--wechat); 13 | } 14 | 15 | .viber-chat { 16 | --viber: #6f3faa; 17 | --vsc-bg-header: var(--viber); 18 | --vsc-bg-button: var(--viber); 19 | --vsc-outline-color: var(--viber); 20 | } 21 | 22 | .twitter-chat { 23 | --twitter: #55acee; 24 | --vsc-bg-header: var(--twitter); 25 | --vsc-bg-button: var(--twitter); 26 | --vsc-outline-color: var(--twitter); 27 | } 28 | 29 | .telegram-chat { 30 | --telegram: #039be5; 31 | --vsc-bg-header: var(--telegram); 32 | --vsc-bg-button: var(--telegram); 33 | --vsc-outline-color: var(--telegram); 34 | } 35 | 36 | .messenger-chat { 37 | --messenger: #007ff8; 38 | --vsc-bg-header: var(--messenger); 39 | --vsc-bg-button: var(--messenger); 40 | --vsc-outline-color: var(--messenger); 41 | } 42 | 43 | .line-chat { 44 | --line: #22ba4f; 45 | --vsc-bg-header: var(--line); 46 | --vsc-bg-button: var(--line); 47 | --vsc-outline-color: var(--line); 48 | } 49 | 50 | .newsletter { 51 | display: flex; 52 | flex-wrap: wrap; 53 | } 54 | 55 | .newsletter label { 56 | width: 100%; 57 | margin-bottom: 20px; 58 | } 59 | 60 | .newsletter label > input { 61 | padding: 10px; 62 | width: 100%; 63 | margin-top: 4px; 64 | } 65 | 66 | .newsletter button { 67 | padding: 14px; 68 | background-color: #333; 69 | border:none; 70 | color: white; 71 | border-radius: 30px; 72 | cursor: pointer; 73 | margin-bottom: 8px; 74 | } -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $contentMaxWidth = 960px -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | Vue.js component for your visitors and customers to send messages directly to you through social chats or customized form. 4 | 5 | `vue-social-chat` allows your customers to open a conversation from your website directly to chat apps like **WhatsApp**, **Telegram**, **Messenger**, **WeChat**, **Line**, **Viber** or even the same **custom form**. 6 | 7 | Most people use a chat app, so offering your customer a form of direct contact helps you cover visitors to customers, as well as providing you with **leads** to increase your sales or spread your content. 8 | 9 | ## Features 10 | 11 | - Accessibility best practices; 12 | - Supports the most used app chats; 13 | - Flexible and customizable; 14 | - Support text direction (ltr/rtl); 15 | - And more; 16 | 17 | ### Donate 18 | 19 |
20 | 21 | 22 | Buy Me A Coffee 23 | 24 | 25 | 26 | Support me on Ko-fi 27 | 28 | 29 | ::: tip 30 | If you want a faster communication, find me on twitter [@ktquez](https://twitter.com/ktquez) 31 | ::: 32 | 33 | 34 | ## Contributing 35 | 36 | - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found; 37 | - Fork repository, make changes, add your name and link in the authors session CONTRIBUTING.md; 38 | - Send a pull request; 39 | 40 | ## License 41 | 42 | `vue-social-chat` is open-sourced package licensed under the [MIT](https://github.com/ktquez/vue-social-chat/blob/master/LICENSE) license 43 | 44 | 45 | 61 | 64 | 71 | Opening hours: 8am to 6pm 72 | -------------------------------------------------------------------------------- /docs/demo/custom.md: -------------------------------------------------------------------------------- 1 | # Custom 2 | 3 | ```vue 4 | 47 | 48 | 73 | ``` 74 | 75 | 76 |

Subscribe to our newsletter and know everything about anything

77 | 104 | 111 | -------------------------------------------------------------------------------- /docs/demo/line.md: -------------------------------------------------------------------------------- 1 | # Line App 2 | 3 | ```vue 4 | 18 | 19 | 46 | 47 | 55 | ``` 56 | 57 | 73 | 76 | 83 | Opening hours: 8am to 6pm 84 | -------------------------------------------------------------------------------- /docs/demo/messenger.md: -------------------------------------------------------------------------------- 1 | # Facebook Messenger 2 | 3 | ::: tip 4 | You can easily get the Facebook user ID via [Lookup ID website](https://lookup-id.com/#) 5 | ::: 6 | 7 | ```vue 8 | 22 | 23 | 50 | 51 | 59 | ``` 60 | 61 | 77 | 80 | 87 | Opening hours: 8am to 6pm 88 | -------------------------------------------------------------------------------- /docs/demo/mixed.md: -------------------------------------------------------------------------------- 1 | # Mixed chat apps 2 | 3 | ```vue 4 | 17 | 18 | 64 | ``` 65 | 66 | 100 |

Click one of our representatives below to chat.

101 | 105 | Opening hours: 8am to 6pm 106 | -------------------------------------------------------------------------------- /docs/demo/rtl.md: -------------------------------------------------------------------------------- 1 | # Right to left 2 | 3 | ```vue {6} 4 | 19 | ``` 20 | 21 | 38 | 41 | 48 | Opening hours: 8am to 6pm 49 | -------------------------------------------------------------------------------- /docs/demo/telegram.md: -------------------------------------------------------------------------------- 1 | # Telegram 2 | 3 | ```vue 4 | 18 | 19 | 46 | 47 | 55 | ``` 56 | 57 | 73 | 76 | 83 | Opening hours: 8am to 6pm 84 | -------------------------------------------------------------------------------- /docs/demo/twitter.md: -------------------------------------------------------------------------------- 1 | # Twitter 2 | 3 | ::: tip 4 | You can easily get the twitter user ID via [Tweeterid website](https://tweeterid.com/) 5 | ::: 6 | 7 | ```vue 8 | 22 | 23 | 50 | 51 | 59 | ``` 60 | 61 | 77 | 80 | 87 | Opening hours: 8am to 6pm 88 | -------------------------------------------------------------------------------- /docs/demo/viber.md: -------------------------------------------------------------------------------- 1 | # Viber 2 | 3 | ```vue 4 | 18 | 19 | 46 | 47 | 55 | ``` 56 | 57 | 73 | 76 | 83 | Opening hours: 8am to 6pm 84 | -------------------------------------------------------------------------------- /docs/demo/wechat.md: -------------------------------------------------------------------------------- 1 | # WeChat 2 | 3 | ```vue 4 | 18 | 19 | 46 | 47 | 55 | ``` 56 | 57 | 73 |

Click one of our representatives below to chat on WeChat.

74 | 81 | Opening hours: 8am to 6pm 82 | -------------------------------------------------------------------------------- /docs/demo/whatsapp.md: -------------------------------------------------------------------------------- 1 | # WhatsApp 2 | 3 | ```vue 4 | 18 | 19 | 46 | 47 | 55 | ``` 56 | 57 | 73 | 76 | 83 | Opening hours: 8am to 6pm 84 | -------------------------------------------------------------------------------- /docs/events.md: -------------------------------------------------------------------------------- 1 | # Events 2 | 3 | `VueSocialChat` trigger events ($emit) when `open` and `close` popup; 4 | 5 | e.g. 6 | 7 | ```vue {5,7,12} 8 | 19 | ``` -------------------------------------------------------------------------------- /docs/props.md: -------------------------------------------------------------------------------- 1 | # Props 2 | 3 | ## attendents 4 | 5 | | Type | Required | 6 | | -------- | ---------- | 7 | | Array | `false` | 8 | 9 | Array with the necessary data to create the contact list 10 | 11 | ### Properties 12 | 13 | - **app:** String with the name of the app. (Note: Used to generate the link and icon in the avatar); 14 | - **label:** Additional information, such as job or position. 15 | - **name:** Name of user; 16 | - **id (optional):** Only used to WeChat, Twitter and FB Messenger; 17 | - **number (optional):** Only used to WhatsApp and Viber app; 18 | - **username (optional):** Only used to Telegram and Line; 19 | - **href (optional):** User to custom link; 20 | - **avatar** 21 | - **src:** Path or CDN to image avatar; 22 | - **alt:** Alternative text to user avatar; 23 | 24 | ::: tip 25 | Apps that VueSocialChat supports in generating links and icons: 26 | `whatsapp`, `telegram`, `messenger`, `wechat`, `viber` and `line` 27 | ::: 28 | 29 | e.g. 30 | 31 | ```js 32 | [ 33 | { 34 | app: 'whatsapp', 35 | label: 'Technical support', 36 | name: 'Alan Ktquez', 37 | number: '5581983383532', 38 | avatar: { 39 | src: 'https://avatars0.githubusercontent.com/u/8084606?s=460&u=20b6499a416cf7129a18e5c168cf387e159edb1a&v=4', 40 | alt: 'Alan Ktquez avatar' 41 | } 42 | } 43 | ] 44 | ``` 45 | 46 | ## icon 47 | 48 | | Type | default | 49 | | ---------- | ---------- | 50 | | Boolean | `false` | 51 | 52 | Used to adapt the style of the button for the use of icons. (Note: If using text, you don't need to use this property) 53 | 54 | 55 | ```vue {5} 56 | 67 | ``` 68 | 69 | ## dir 70 | 71 | | Type | default | 72 | | ---------- | ---------- | 73 | | String | `ltr` | 74 | 75 | Specifies the direction of the element's content. 76 | 77 | - [See demo](https://vue-social-chat.surge.sh/rtl) 78 | 79 | ::: tip 80 | See more about [Structural markup and right-to-left text in HTML](https://www.w3.org/International/questions/qa-html-dir) 81 | ::: 82 | 83 | -------------------------------------------------------------------------------- /docs/setup-v2.md: -------------------------------------------------------------------------------- 1 | # Setup for Vue 2 2 | 3 | ## Installation 4 | 5 | ```bash 6 | $ npm install -S vue-social-chat 7 | # or 8 | $ yarn add vue-social-chat 9 | ``` 10 | 11 | ## Usage 12 | 13 | ```js 14 | import Vue from 'vue' 15 | import VueSocialChat from 'vue-social-chat' 16 | 17 | Vue.use(VueSocialChat) 18 | ``` 19 | 20 | Or import component locally 21 | 22 | ```vue 23 | 34 | ``` 35 | 36 | Using the component in the template, por exemplo 37 | 38 | ```vue {5,7,12} 39 | 58 | 59 | 80 | ``` 81 | 82 | ## Custom style 83 | 84 | `vue-social-chat` uses CSS variables, so you can customize it with the colors you want. 85 | 86 | ```css 87 | --vsc-bg-header: $bg; 88 | --vsc-bg-footer: #fafafa; 89 | --vsc-text-color-header: white; 90 | --vsc-text-color-footer: inherit; 91 | --vsc-bg-button: $bgButton; 92 | --vsc-text-color-button: white; 93 | --vsc-outline-color: #333; 94 | --vsc-border-color-bottom-header: transparent; 95 | --vsc-border-color-top-footer: #f3f3f3; 96 | ``` 97 | -------------------------------------------------------------------------------- /docs/setup-v3.md: -------------------------------------------------------------------------------- 1 | # Setup for Vue 3 2 | 3 | ## Installation 4 | 5 | ```bash 6 | $ npm install -S vue-social-chat@next 7 | # or 8 | $ yarn add vue-social-chat@next 9 | ``` 10 | 11 | ## Usage 12 | 13 | Globally: 14 | 15 | ```js 16 | import { createApp } from 'vue' 17 | import App from './App.vue' 18 | import VueSocialChat from 'vue-social-chat' 19 | 20 | createApp(App) 21 | .use(VueSocialChat) 22 | .mount('#app') 23 | ``` 24 | 25 | Or import component locally 26 | 27 | ```vue 28 | 39 | ``` 40 | 41 | Using the component in the template, por exemplo 42 | 43 | ```vue {5,7,12} 44 | 67 | 68 | 91 | ``` 92 | 93 | ## Custom style 94 | 95 | `vue-social-chat` uses CSS variables, so you can customize it with the colors you want. 96 | 97 | ```css 98 | --vsc-bg-header 99 | --vsc-bg-footer 100 | --vsc-text-color-header 101 | --vsc-text-color-footer 102 | --vsc-bg-button 103 | --vsc-text-color-button 104 | --vsc-outline-color 105 | --vsc-border-color-bottom-header 106 | --vsc-border-color-top-footer 107 | ``` 108 | -------------------------------------------------------------------------------- /docs/slots.md: -------------------------------------------------------------------------------- 1 | # Slots 2 | 3 | ## header 4 | 5 | Add content at the top of the popup 6 | 7 | ```vue 8 | 11 | 12 | ``` 13 | 14 | ## body 15 | 16 | Usado para customizar o que irá aparecer no corpo da popup. 17 | 18 | ```vue 19 | 22 | ``` 23 | 24 | ::: tip 25 | See custom body with [newsletter form demo](/demo/custom.html) 26 | ::: 27 | 28 | ## footer 29 | 30 | Add content at the bottom of the popup 31 | 32 | ```vue 33 | 36 | ``` 37 | 38 | ## button 39 | 40 | Add icons or text to the button that triggers the popup 41 | 42 | ```vue 43 | 46 | ``` 47 | 48 | With the slot button you can also customize the text when the popup is open. 49 | 50 | ```vue 51 | 55 | ``` -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import { PluginFunction } from 'vue' 2 | 3 | declare class VueSocialChat 4 | { 5 | static install: PluginFunction 6 | } 7 | 8 | export default VueSocialChat -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | '^@/(.*)$': '/$1', 4 | '^vue$': 'vue/dist/vue.common.js' 5 | }, 6 | moduleFileExtensions: ['js', 'vue', 'json'], 7 | testMatch: [ 8 | '**/(*.)test.(js|jsx|ts|tsx)' 9 | ], 10 | transform: { 11 | '^.+\\.js$': 'babel-jest', 12 | '.*\\.(vue)$': 'vue-jest' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-social-chat", 3 | "version": "0.1.6", 4 | "description": "Vue.js component for your visitors and customers to send messages directly to you through social chats or customized form.", 5 | "main": "dist/vue-social-chat.ssr.js", 6 | "browser": "dist/vue-social-chat.esm.js", 7 | "module": "dist/vue-social-chat.esm.js", 8 | "unpkg": "dist/vue-social-chat.min.js", 9 | "types": "index.d.ts", 10 | "scripts": { 11 | "dev": "rollup --config rollup.config.dev.js --watch", 12 | "build": "npm run build:ssr & npm run build:es & npm run build:unpkg", 13 | "build:ssr": "rollup --config rollup.config.prod.js --format cjs --file dist/vue-social-chat.ssr.js", 14 | "build:es": "rollup --config rollup.config.prod.js --format es --file dist/vue-social-chat.esm.js", 15 | "build:unpkg": "rollup --config rollup.config.prod.js --format iife --file dist/vue-social-chat.min.js", 16 | "docs:dev": "vuepress dev docs --no-cache", 17 | "docs:build": "vuepress build docs --no-cache", 18 | "docs:publish": "gh-pages -d docs/.vuepress/dist", 19 | "demo:dev": "cd demo && npm run serve", 20 | "demo:build": "cd demo && npm run build", 21 | "demo:publish": "cp ./demo/dist/index.html ./demo/dist/200.html && surge ./demo/dist https://vue-social-chat.surge.sh/", 22 | "release": "standard-version", 23 | "test:unit": "jest", 24 | "test:e2e": "node_modules/.bin/cypress run --headless", 25 | "test:e2e:open": "node_modules/.bin/cypress open ", 26 | "project:publish": "git push --tags origin master && npm run build && npm publish" 27 | }, 28 | "repository": { 29 | "type": "git", 30 | "url": "git+https://github.com/ktquez/vue-social-chat.git" 31 | }, 32 | "keywords": [ 33 | "vue", 34 | "component", 35 | "vue.js", 36 | "social network", 37 | "social chat", 38 | "chat", 39 | "social support", 40 | "support", 41 | "whatsapp", 42 | "messeger", 43 | "telegram" 44 | ], 45 | "author": "Alan Ktquez (https://ktquez-play.web.app/en/)", 46 | "contributors": [ 47 | { 48 | "name": "Lucas Lima", 49 | "email": "lucasferreiralimax@gmail.com", 50 | "url": "https://github.com/lucasferreiralimax" 51 | }, 52 | { 53 | "name": "Mihajlo Nikodijevic", 54 | "email": "mihajloomozaik@gmail.com", 55 | "url": "https://github.com/mihajlon97" 56 | } 57 | ], 58 | "license": "MIT", 59 | "bugs": { 60 | "url": "https://github.com/ktquez/vue-social-chat/issues" 61 | }, 62 | "homepage": "https://github.com/ktquez/vue-social-chat#readme", 63 | "devDependencies": { 64 | "@rollup/plugin-buble": "^0.21.3", 65 | "@rollup/plugin-commonjs": "^13.0.0", 66 | "@rollup/plugin-node-resolve": "^8.0.1", 67 | "@rollup/plugin-replace": "^2.3.3", 68 | "@vue/eslint-config-standard": "^5.1.2", 69 | "@vue/test-utils": "^1.0.3", 70 | "babel-eslint": "^10.1.0", 71 | "babel-jest": "^26.0.1", 72 | "chokidar": "^3.4.0", 73 | "cypress": "^4.8.0", 74 | "eslint": "^6.8.0", 75 | "eslint-plugin-cypress": "^2.11.1", 76 | "eslint-plugin-import": "^2.21.1", 77 | "eslint-plugin-node": "^11.1.0", 78 | "eslint-plugin-promise": "^4.2.1", 79 | "eslint-plugin-standard": "^4.0.1", 80 | "eslint-plugin-vue": "^6.2.2", 81 | "eslint-plugin-vuejs-accessibility": "^0.1.3", 82 | "gh-pages": "^3.0.0", 83 | "jest": "^26.0.1", 84 | "rollup": "^2.17.0", 85 | "rollup-plugin-eslint": "^7.0.0", 86 | "rollup-plugin-terser": "^6.1.0", 87 | "rollup-plugin-vue": "^5.1.9", 88 | "standard-version": "^8.0.0", 89 | "vue": "^2.6.11", 90 | "vue-template-compiler": "^2.6.11", 91 | "vuepress": "^1.5.2", 92 | "vuepress-theme-default-vue-a11y": "^0.1.15" 93 | }, 94 | "dependencies": { 95 | "@vue-a11y/focus-loop": "^0.1.0" 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /rollup.config.dev.js: -------------------------------------------------------------------------------- 1 | import buble from '@rollup/plugin-buble' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import commonjs from '@rollup/plugin-commonjs' 4 | import chokidar from 'chokidar' 5 | import { eslint } from 'rollup-plugin-eslint' 6 | import vue from 'rollup-plugin-vue' 7 | 8 | export default { 9 | input: 'src/index.js', 10 | watch: { 11 | chokidar, 12 | include: ['src/**'] 13 | }, 14 | plugins: [ 15 | commonjs(), 16 | resolve(), 17 | eslint({ 18 | include: './src/**' 19 | }), 20 | vue({ 21 | css: true, 22 | compileTemplate: true 23 | }), 24 | buble({ 25 | objectAssign: true 26 | }) 27 | ], 28 | output: [ 29 | { 30 | name: 'VueSocialChat', 31 | file: 'demo/vue-social-chat.js', 32 | format: 'esm', 33 | exports: 'named' 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /rollup.config.prod.js: -------------------------------------------------------------------------------- 1 | import buble from '@rollup/plugin-buble' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import replace from '@rollup/plugin-replace' 4 | import { terser } from 'rollup-plugin-terser' 5 | import vue from 'rollup-plugin-vue' 6 | 7 | export default commandLineArgs => { 8 | return { 9 | input: 'src/index.js', 10 | external: ['@vue-a11y/focus-loop'], 11 | plugins: [ 12 | commonjs(), 13 | replace({ 14 | 'process.env.NODE_ENV': JSON.stringify('production') 15 | }), 16 | vue({ 17 | css: true, 18 | compileTemplate: true, 19 | template: { 20 | isProduction: true, 21 | optimizeSSR: commandLineArgs.format === 'cjs' 22 | } 23 | }), 24 | buble({ 25 | objectAssign: true 26 | }), 27 | commandLineArgs.format === 'iife' && terser() 28 | ], 29 | output: { 30 | name: 'VueSocialChat', 31 | exports: 'named', 32 | globals: { 33 | '@vue-a11y/focus-loop': 'FocusLoop' 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/ListChat.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 58 | -------------------------------------------------------------------------------- /src/SocialChat.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 168 | 169 | 349 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const URL_ASSETS_LOGOS = 'https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/logos' 2 | export const URL_ASSETS_ICONS = 'https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons' 3 | 4 | export const HREF_BY_APP = { 5 | whatsapp: 'https://api.whatsapp.com/send?phone=%ph%&text=', 6 | messenger: 'https://m.me/%ph%', 7 | telegram: 'https://telegram.me/%ph%', 8 | viber: 'viber://chat?number=%ph%', 9 | wechat: 'weixin://dl/chat?%ph%', 10 | line: 'https://line.me/R/oaMessage/%ph%/', 11 | twitter: 'https://twitter.com/messages/compose?recipient_id=%ph%' 12 | } 13 | -------------------------------------------------------------------------------- /src/icons/chat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/messenger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/viber.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/wechat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/whatsapp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import VueSocialChat from './plugin' 2 | 3 | export default VueSocialChat 4 | 5 | export { default as SocialChat } from './SocialChat.vue' 6 | -------------------------------------------------------------------------------- /src/logos/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/email.png -------------------------------------------------------------------------------- /src/logos/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/line.png -------------------------------------------------------------------------------- /src/logos/messenger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/messenger.png -------------------------------------------------------------------------------- /src/logos/telegram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/telegram.png -------------------------------------------------------------------------------- /src/logos/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/twitter.png -------------------------------------------------------------------------------- /src/logos/viber.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/viber.png -------------------------------------------------------------------------------- /src/logos/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/wechat.png -------------------------------------------------------------------------------- /src/logos/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-social-chat/46a24713fe19959edf1511cd28fa4819302c1c05/src/logos/whatsapp.png -------------------------------------------------------------------------------- /src/plugin.js: -------------------------------------------------------------------------------- 1 | import SocialChat from './SocialChat.vue' 2 | 3 | export default function install (Vue) { 4 | if (install.installed) return 5 | install.installed = true 6 | Vue.component('SocialChat', SocialChat) 7 | } 8 | 9 | // auto install 10 | if (typeof window !== 'undefined' && typeof window.Vue !== 'undefined') { 11 | window.Vue.use(install) 12 | } 13 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) -------------------------------------------------------------------------------- /tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | --------------------------------------------------------------------------------