Svelte Intercom

Intercom for svelte

Installation

npm install svelte-intercom
# pnpm add svelte-intercom
# yarn add svelte-intercom

Usage

• Add the IntercomProvider component to your root layout

<!-- +layout.svelte -->
<script>
  import {IntercomProvider} from 'svelte-intercom';

  let {children} = $props();
</script>

<IntercomProvider
  appId="yourAppId"
  autoboot
  bootOptions={{
    actionColor: '#0f172a',
    backgroundColor: '#475569',
  }}
>
  {@render children()}
</IntercomProvider>

• use the useIntercom store

<!-- +page.svelte -->
<script>
  import {useIntercom} from 'svelte-intercom';

  const intercom = useIntercom();
</script>

<button
  onclick={function () {
    intercom.hide();
  }}
>
  Hide
</button>
<button
  onclick={function () {
    intercom.show();
  }}
>
  Show
</button>
<button
  onclick={function () {
    intercom.boot();
  }}
>
  Boot
</button>
<button
  onclick={function () {
    intercom.shutdown();
  }}
>
  Shutdown
</button>

API Reference

IntercomProvider

Props

• appId

  Your intercom app ID

• region

  Your intercom app region

• apiBase

  Your intercom app api base

• autoboot

  Whether to boot intercom automatically

• bootOptions

  Global boot options. will be used everytime boot is called including when autoboot is set to true

• onHide

  Callback when messenger is hidden

• onShow

  Callback when messenger is visible

• onUserEmailSupplied

  Callback when user supplied thier email in the messenger

• onUnreadCountChange

  Callback when unread messages count changes

useIntercom

the useIntercom does not accept anything and returns the following methods:

• boot

  The boot function can be used if at somepoint the shutdown function was called or autoboot is set to false.

• reboot

  Calls shutdown then boot

• reboot.soft

  Similar to reboot except this will use the previously captured options from update/boot

• shutdown

  If you have the Inbox product (combined with another product like Messages) you should call the Intercom shutdown method to clear your users’ conversations anytime they logout of your application. Otherwise, the cookie we use to track who was most recently logged in on a given device or computer will keep these conversations in the Messenger for one week. This method will effectively clear out any user data that you have been passing through the JS API.

• shutdown.soft

  Similar to shutdown except this will not clear previously captured options from update/boot so that it can be used on subsequent calls to boot

• show

  This will show the Messenger. If there are no new conversations, it will open to the Messenger Home. If there are, it will open with the message list.

• hide

  This will hide the main Messenger panel if it is open

• showNews

  If you would like to trigger a news item in the Messenger, you can use the showNews method. The news item will be shown within the Messenger, and clicking the Messenger back button will return to the previous context. If the Messenger is closed when the method is called, it will be opened first and then the news item will be shown.

• showSpace

  This will open the Messenger as if a new conversation was just created.

• startTour

  If you would like to trigger a tour based on an action a user or visitor takes in your site or application, you can use this API method. You need to call this method with the id of the tour you wish to show. The id of the tour can be found in the Use tour everywhere section of the tour editor.

• trackEvent

  You can submit an event using the trackEvent method. This will associate the event with the currently logged in user and send it to Intercom

• showTicket

  If you would like to trigger a ticket in the Messenger, you can use the showTicket method. The ticket will be shown within the Messenger, and clicking the Messenger back button will return to the previous context. If the Messenger is closed when the method is called, it will be opened first and then the ticket will be shown.

• startSurvey

  If you would like to trigger a survey in the Messenger, you can use the startSurvey method. The id of the survey can be found in the Additional ways to share your survey section of the survey editor as well as in the URL of the editor.

• showArticle

  If you would like to trigger an article in the Messenger, you can use the showArticle method. The article will be shown within the Messenger, and clicking the Messenger back button will return to the previous context. If the Messenger is closed when the method is called, it will be opened first and then the article will be shown.

• getVisitorId

  A visitor is someone who goes to your site but does not use the messenger. You can track these visitors via the visitor user ID. This user ID can be used to retrieve the visitor or lead through the REST API.

• showMessages

  This will open the Messenger on the message list session

• showNewMessage

  This will open the Messenger as if a new conversation was just created

• startChecklist

  If you would like to trigger a checklist in the Messenger, you can use the startChecklist method. The id of the checklist can be found in the Additional ways to share your checklist section of the checklist editor as well as in the URL of the editor.

• showConversation

  You can show a conversation programatically in the Messenger by calling showConversation method

• hidden

  Whether the messenger is hidden or not

• getLauncherProps

  Returns button props which can be used for custom launcher

  <script>
    import {useIntercom} from 'svelte-intercom';
  
    let intercom = useIntercom()
  </script>
  
  <button {...intercom.getLauncherProps()}>
    <ChatIcon />
  <button>

Related

• @intercom/messenger-js-sdk