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

 

Creating a FullStory Integration File

 

• Create a new file in your project’s source folder (for example, src/fullstory.ts). This file will contain the TypeScript code needed to inject the FullStory snippet.
• Paste the following code into src/fullstory.ts. This code declares the necessary global interface and defines a function to initialize FullStory by dynamically adding the script tag to your document.

declare global {
  interface Window {
    fsdebug: boolean;
    fshost: string;
    fsorg: string;
    fsnamespace: string;
    FS?: any;
  }
}

export function initFullStory(orgId: string): void {
  // Configure FullStory settings
  window.fsdebug = false;
  window.fshost = 'fullstory.com';
  window.fsorg = orgId;
  window.fsnamespace = 'FS';

  // Inject FullStory script into the document
  (function(m: any, n: any, e: any, t: any, l: any, o: any, g: any, y: any) {
    if (e in m) {
      if (m.console && m.console.log) {
        m.console.log('FullStory namespace conflict.');
      }
      return;
    }
    g = m[e] = function(a: any, b: any) {
      g.q ? g.q.push([a, b]) : g._api(a, b);
    };
    g.q = [];
    o = n.createElement(t);
    o.async = 1;
    o.src = 'https://' + window.fshost + '/s/fs.js';
    y = n.getElementsByTagName(t)[0];
    y.parentNode.insertBefore(o, y);
  })(window, document, 'FS', 'script');
}

 

Initializing FullStory in Your Project

 

• Open your main project file (for example, src/index.ts or src/app.ts).
• Import the initFullStory function you just created and call it with your FullStory organization ID (replace YOUR-ORG-ID with the actual ID).

import { initFullStory } from './fullstory';

// Initialize FullStory using your organization ID
initFullStory('YOUR-ORG-ID');

 

Optional: Tracking Custom Events with FullStory

 

• If you need to log custom events to FullStory, add the following helper function to src/fullstory.ts or another appropriate file. This function checks if FullStory is loaded before sending the event.

export function recordEvent(eventName: string, properties?: any): void {
  if (window.FS) {
    window.FS('log', eventName, properties);
  }
}

• You can now import and use recordEvent anywhere in your project to track custom events.

 

Notes on Dependency Installation

 

• Since your v0 project does not have a terminal, you cannot run commands like npm install. Instead, if your project requires any dependencies for TypeScript or FullStory that are not already present, add the necessary script tags or package links directly into your code or configuration files as needed.
• For example, if you need to ensure TypeScript definitions, consider including them via a CDN or by embedding them into your project manually.