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

 

Step 1: Create a ScheduleOnce Integration Module

 

• Create a new file in your project directory and name it scheduleOnce.ts.
• This module will dynamically load ScheduleOnce’s embedded script and initialize the scheduling widget.
• Copy and paste the following TypeScript code into scheduleOnce.ts:

/ Declare ScheduleOnce on the window object to avoid TypeScript errors /
interface Window {
  ScheduleOnce: any;
}

/ Function to load the ScheduleOnce embed script and initialize the widget /
export function loadScheduleOnce(bookingUrl: string): void {
  / Create a script element to load ScheduleOnce's embed script /
  const script = document.createElement('script');
  script.src = 'https://js.scheduleonce.com/embed.js';
  script.async = true;
  script.onload = () => {
    / Once the script is loaded, initialize the ScheduleOnce widget /
    if (window.ScheduleOnce && typeof window.ScheduleOnce.init === 'function') {
      window.ScheduleOnce.init({
        bookingUrl: bookingUrl,
        targetElement: '#scheduleOnceContainer',
        / Additional configuration options can be added here /
      });
    }
  };
  document.head.appendChild(script);
}

 

Step 2: Modify Your Main Application File

 

• Open your main TypeScript file (for example, main.ts or the entry point of your v0 project).
• Import the loadScheduleOnce function from the module you just created.
• Call this function by passing your specific booking URL from ScheduleOnce.
• Insert the following code snippet at an appropriate initialization point in your main file:

import { loadScheduleOnce } from './scheduleOnce';

/ Replace 'YOURBOOKINGURL' with your actual ScheduleOnce booking URL /
const bookingUrl = 'YOURBOOKINGURL';

/ Initialize the ScheduleOnce widget when the application loads /
document.addEventListener('DOMContentLoaded', () => {
  loadScheduleOnce(bookingUrl);
});

 

Step 3: Set Up the HTML Container for the ScheduleOnce Widget

 

• Locate your main HTML file (for example, index.html).
• Add a container element where the ScheduleOnce widget will be rendered.
• Insert the following HTML snippet in the body of your document at the desired position:

<!-- ScheduleOnce Widget Container -->
<div id="scheduleOnceContainer"></div>

 

Step 4: Configure ScheduleOnce Options

 

• Review the configuration inside the loadScheduleOnce function.
• If you need to customize the widget’s behavior (for example, widths, heights, themes, etc.), add the corresponding options inside the configuration object passed to window.ScheduleOnce.init.
• Consult ScheduleOnce’s documentation for available settings to further customize the widget.