v0 and Intercom integration: Step-by-Step Guide 2025

 

Step 1: Create a TypeScript Declaration File for Intercom

 

• Create a new file named intercom.d.ts in your project's root folder or in the src folder.
• This file provides TypeScript with type definitions for the global Intercom function.
• Insert the following code snippet in intercom.d.ts:

declare global {
    interface Window {
        Intercom: any;
    }
}
export {};

 

Step 2: Insert the Intercom Widget Script in Your HTML File

 

• Locate your main HTML file (typically named index.html) at the root of your project.
• Before the closing </body> tag, add the Intercom widget script by inserting the following code snippet.
• Remember to replace YOURAPPID with your actual Intercom application ID.

<script>
  window.intercomSettings = {
    appid: "YOURAPPID"  // Replace YOURAPP_ID with your Intercom app ID
  };
</script>
<script>
  (function() {
    var w = window;
    var ic = w.Intercom;
    if (typeof ic === "function") {
      ic('reattach_activator');
      ic('update', window.intercomSettings);
    } else {
      var d = document;
      var i = function() { i.c(arguments); };
      i.q = [];
      i.c = function(args) { i.q.push(args); };
      w.Intercom = i;
      var l = function() {
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://widget.intercom.io/widget/YOURAPPID';  // Replace YOURAPPID with your app ID
        var x = d.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
      };
      if (w.attachEvent) {
        w.attachEvent('onload', l);
      } else {
        w.addEventListener('load', l, false);
      }
    }
  })();
</script>

 

Step 3: Initialize Intercom in Your Main TypeScript File

 

• Open your main TypeScript file (for example, main.ts).
• After your application has been initialized, add code to boot up Intercom.
• Add the following snippet to initialize Intercom. Replace YOURAPPID with your actual app ID and include any user information as needed.

function initializeIntercom() {
  if (typeof window.Intercom === "function") {
    window.Intercom('boot', {
      appid: "YOURAPPID",  // Replace YOURAPP_ID with your Intercom app ID
      // Optionally, include user and company data:
      // name: "John Doe",
      // email: "[email protected]",
      // created_at: Math.floor(Date.now() / 1000)
    });
  }
}

// Call initializeIntercom when your app is ready (e.g., after user login or app startup)
initializeIntercom();

 

Step 4: Using Intercom Functions in Your Code

 

• You can create helper functions to update user information or shut down Intercom when needed. For example, create functions to update or shutdown Intercom as follows:

function updateIntercomUser(data: object) {
  if (typeof window.Intercom === "function") {
    window.Intercom('update', data);
  }
}

function shutdownIntercom() {
  if (typeof window.Intercom === "function") {
    window.Intercom('shutdown');
  }
}

// Use these functions in your application when needed, such as on user profile updates or logout.