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-chat
Then 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
,right
font
, font nameborderRadius
, corner radius, default28px
,0px
on 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
,0px
on 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 = true
Following 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