https://github.com/beyonk-group/svelte-intercom
Intercom for Svelte or Vanilla JS Apps
https://github.com/beyonk-group/svelte-intercom
crm customer-chat help intercom messenger support svelte sveltejs
Last synced: 9 months ago
JSON representation
Intercom for Svelte or Vanilla JS Apps
- Host: GitHub
- URL: https://github.com/beyonk-group/svelte-intercom
- Owner: beyonk-group
- License: mit
- Created: 2019-12-13T20:18:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-15T16:41:44.000Z (over 3 years ago)
- Last Synced: 2025-06-25T17:16:54.230Z (9 months ago)
- Topics: crm, customer-chat, help, intercom, messenger, support, svelte, sveltejs
- Language: JavaScript
- Size: 566 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## Svelte Intercom
[](http://standardjs.com) [](https://svelte.dev) 
Pure vanilla JS Intercom integration
## Install
```bash
$ npm install --save-dev @beyonk/svelte-intercom
```
## Usage (With Svelte)
Place the IntercomLauncher at the top level of your application (_layout.svelte for Sapper)
```html
import { IntercomLauncher, intercom } from '@beyonk/svelte-intercom'
```
## Other configuration attributes
There are a number of configuration attributes you can pass, all but appId are optional.
List of possible options in the module:
| Option | Default | Required | Description |
|-------------------|--------------|----------|---------------------------------------------------------------------------------------------------------------------------------------|
| appId | - | true | Your Intercom app id |
## Events
The Component emits all events emitted by the intercom module:
```html
import { IntercomLauncher } from '@beyonk/svelte-intercom'
function logUnreadCount (unreadCount) {
console.log('Unread count', unreadCount)
}
```
List of possible events in the module:
| Event | Description |
|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| unread-count-change | [onUnreadCountChange](https://developers.intercom.com/installing-intercom/docs/intercom-javascript#section-intercomonunreadcountchange) |
| show | [onShow](https://developers.intercom.com/installing-intercom/docs/intercom-javascript#section-intercomonshow) |
| hide | [onHide](https://developers.intercom.com/installing-intercom/docs/intercom-javascript#section-intercomonhide) |
| ready | Dispatched when the intercom component has finished initialising |
## Methods
The Component has all methods listed in [the intercom documentation](https://developers.intercom.com/installing-intercom/docs/intercom-javascript).
These methods are exposed by the `intercom` module. This module can be imported anywhere in your project to call methods on the Messenger.
```html
import { IntercomLauncher, intercom } from '@beyonk/svelte-intercom'
intercom.startTour()
```
The component implements a couple of extra convenience methods:
List of possible events in the module:
| Event | Description | |
|----------------------|-------------------|
| showLauncher() | show the launcher |
| hideLauncher() | hide the launcher |
## The underlying instance
You can access the underlying intercom instance for anything else you require:
```html
import { IntercomLauncher } from '@beyonk/svelte-intercom'
const rawIntercom = intercom.getIntercom()
```
## Troubleshooting
### Q. How do I hide the launcher for specific pages?
Because of the strange way intercom's launcher hiding works, you need to add the following to your route to hide it for that specific page.
```
import { onMount, onDestroy } from 'svelte'
onMount(async () => {
intercom.overrideBootSettings({ hide_default_launcher: true })
intercom.hideLauncher()
})
onDestroy(intercom.showLauncher)
```
This will:
* add a boot setting for intercom to hide the launcher by default, if the page is the first page the user visits in your application.
* hide the launcher immediately for the page
* set a hook so that if the user navigates away from the page, the launcher shows again.
## Developing
In order to run the local demo you *must* pass a valid intercom app id otherwise it won't work:
```
APP_ID= npm run dev
```
## License
[MIT License](./LICENSE)