A framework-agnostic floating chat window web component written in Svelte
The primary purpose is embedding engageable content, in particular: helpdesks, chatbots or anything else that requires a floating box
Features:
- Framework-agnostic integration (esmodule & umd)
- Responsive UI with animations
- Accessibility features
- Customisation options
- Custom javascript events
Add the following script to your <head>
<script defer src="https://unpkg.com/floating-chat@latest/dist/index.js"></script>Install the floating-chat package
npm i floating-chatThen import into your application with
import floatingChat from 'floating-chat'Add the tag to your template
<floating-chat content="https://example.com" />You can see the demo example in index.html
Content area
Available attributes:
content, content address (to be displayed in<iframe>)height, floating window height, default600px, always100%on mobilewidth, floating window width, default400px, always100%on mobiletextOpen, text when the window is closed, defaultOpen, hidden on mobiletextClose, text when the window is opened, defaultClose, hidden on mobiletextColor, the colour of text, default#000000(black)background, background color, can be either a color code or a css background property, default#FFFFFF(white)logo, logo url, css background property, egurl(https://storage.googleapis.com/cloudprod-apiai/a0b2e356-b43e-4ca5-a094-b219475fa4ca_x.png)position, y, x position on screen, defaultbottom right, possible optionsbottom,top,left,rightfont, font nameborderRadius, corner radius, default28px,0pxon mobile when openedopened, boolean, whether floating window should start opened, defaultfalse
Available variables:
--height, floating window height, default600px, always100%on mobile--width, floating window width, default400px, always100%on mobile--textcolor, the colour of text, default#000000(black)--background, background color, can be either a color code or a css background property, default#FFFFFF(white)--logo, logo url, css background property, egurl(https://storage.googleapis.com/cloudprod-apiai/a0b2e356-b43e-4ca5-a094-b219475fa4ca_x.png)--positiony, y position on screen, defaultbottom--positionx, x position on screen, defaultright--font, font name--borderradius, corner radius, default28px,0pxon mobile when opened
Available CSS classes (modifiers):
floating-chat-open, when floating chat is openfloating-chat-closed, when floating chat is closed
You can change the above HTML attributes in JS, example:
document.querySelector('floating-chat').width = '300px'
document.querySelector('floating-chat').opened = trueFollowing events are emmited:
open, when the floating window state went from closed to openclose, when the floating window state went from open to closedtoggle, when the floating window state was changed
Example in Vue:
<template>
<floating-chat @open="open" />
</template>
<script>
export default {
methods: {
open () {
alert('Opened!')
}
}
}
</script>-
Clone the repository
git clone https://github.com/mishushakov/floating-chat.git -
Install the dependencies
npm i -
Build
npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent