Integrating Intercom with Svelte 5

Integrating customer support and communication tools into your Svelte application can significantly enhance user engagement and satisfaction. One powerful tool for this purpose is Intercom, which provides chat support, customer messaging, and more. In this blog post, we’ll walk through how to set up Intercom in a Svelte application using the svelte-intercom package. We’ll cover both the initial setup and how to use the Intercom instance within your Svelte components.

Setting Up Intercom with svelte-intercom

Installation

First, you'll need to add the svelte-intercom package to your project. You can install it via npm:

npm install svelte-intercom

Configuration in Svelte

1. Configuring the Intercom Provider

To get started, you need to set up the Intercom provider in your Svelte layout. This ensures that Intercom is initialized correctly and available across your entire application.

Here's how you can configure it in your +layout.svelte file:

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

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

<IntercomProvider
  appId="yourAppId"        <!-- Replace with your Intercom App ID -->
  region="us"              <!-- Set the region to match your Intercom setup -->
  apiBase="https://api-iam.intercom.io"  <!-- API base URL -->
  actionColor="#0f172a"    <!-- Customize the action button color -->
  backgroundColor="#475569" <!-- Customize the background color -->
  verticalPadding={32}     <!-- Adjust padding for the chat widget -->
  onShow={() => {
    // Custom logic when Intercom chat is shown
  }}
  onHide={() => {
    // Custom logic when Intercom chat is hidden
  }}
  onUserEmailSupplied={() => {
    // Custom logic when user email is supplied
  }}
  onUnreadCountChange={(unreadCount) => {
    // Custom logic when unread message count changes
  }}
>
  {@render children()}
</IntercomProvider>

In this setup:

• appId is your unique Intercom application identifier.
• region specifies the region your Intercom instance is hosted in.
• apiBase is the API base URL for Intercom.
• actionColor, backgroundColor, and verticalPadding customize the appearance and behavior of the Intercom widget.
• The onShow, onHide, onUserEmailSupplied, and onUnreadCountChange functions allow you to add custom behavior when these events occur.

2. Using Intercom in Your Svelte Components

Once you have set up the Intercom provider, you can interact with it using the useIntercom hook in your components. Here’s how you can use it in your +page.svelte:

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

  const intercom = useIntercom();
</script>

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

In this example:

• intercom.hide() hides the Intercom chat widget.
• intercom.show() shows the Intercom chat widget.
• intercom.boot() initializes Intercom if it’s not already initialized.
• intercom.shutdown() shuts down Intercom and cleans up resources.

Conclusion

Integrating Intercom into your Svelte application with svelte-intercom is straightforward and allows for a seamless customer communication experience. By setting up the IntercomProvider in your layout and using the useIntercom hook in your components, you can easily control the Intercom chat widget and customize its behavior.

Feel free to adjust the colors, padding, and event handlers to fit your application's design and requirements. With this setup, you'll be able to offer real-time support and engage with your users more effectively.

Happy coding! 🚀

If you have any questions or need further assistance with integrating Intercom into your Svelte application, don’t hesitate to ask in the comments below.