├── .github
└── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── rollup.config.js
├── screen-area.png
├── screen-desktop.png
├── screen-mobile.png
└── src
├── FloatingChat.svelte
└── index.js
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: https://paypal.me/ushakovhq
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dist/
3 |
4 | .DS_Store
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Mikhail Ushakov
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 | # Floating Chat web component
2 |
3 | 
4 |
5 | 
6 |
7 | [Demo](https://mishushakov.github.io/floating-chat)
8 |
9 | A framework-agnostic floating chat window web component written in [Svelte](https://github.com/sveltejs/svelte)
10 |
11 | The primary purpose is embedding engageable content, in particular: helpdesks, chatbots or anything else that requires a floating box
12 |
13 | Features:
14 |
15 | - Framework-agnostic integration (esmodule & umd)
16 | - Responsive UI with animations
17 | - Accessibility features
18 | - Customisation options
19 | - Custom javascript events
20 |
21 | ## Installation
22 |
23 | ### Browser
24 |
25 | Add the following script to your ``
26 |
27 | ```html
28 |
29 | ```
30 |
31 | ### Using NPM
32 |
33 | Install the `floating-chat` package
34 |
35 | ```sh
36 | npm i floating-chat
37 | ```
38 |
39 | Then import into your application with
40 |
41 | ```js
42 | import floatingChat from 'floating-chat'
43 | ```
44 |
45 | Add the tag to your template
46 |
47 | ```html
48 |
49 | ```
50 |
51 | You can see the demo example in [index.html](index.html)
52 |
53 | ## Customisation
54 |
55 | 
56 |
57 | Content area
58 |
59 | ### HTML properties
60 |
61 | Available attributes:
62 |
63 | - `content`, content address (to be displayed in `
50 |
51 |
52 |
53 |
54 |
153 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './FloatingChat.svelte'
2 |
--------------------------------------------------------------------------------