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

 

Step 1: Creating the ConvertKit Service File

 

• Create a new file named convertkit.ts in your project’s src folder.
• This file will contain the functions to interact with ConvertKit’s API.

const CONVERTKITAPIKEY = 'YOURAPIKEY'; // Replace with your ConvertKit API Key
const FORMID = 'YOURFORM_ID'; // Replace with your ConvertKit Form ID

export interface Subscriber {
  firstName: string;
  email: string;
}

export async function subscribeUser(subscriber: Subscriber): Promise {
  const url = https://api.convertkit.com/v3/forms/${FORM_ID}/subscribe;
  
  const body = {
    apikey: CONVERTKITAPI_KEY,
    first_name: subscriber.firstName,
    email: subscriber.email
  };

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(body)
    });
    
    if (!response.ok) {
      throw new Error('Failed to subscribe user');
    }
    return await response.json();
  } catch (error) {
    console.error('Error subscribing user:', error);
    throw error;
  }
}

 

Step 2: Using the ConvertKit Service in Your Existing Code

 

• Locate the TypeScript file where you handle user interactions or form submissions.
• Import the subscribeUser function from convertkit.ts.
• Attach an event listener to your subscription form to call subscribeUser on form submission.

import { subscribeUser } from './convertkit';

const formElement = document.getElementById('subscribe-form');

if (formElement) {
  formElement.addEventListener('submit', async (event) => {
    event.preventDefault();
    
    // Retrieve input values; ensure these elements exist in your HTML
    const firstNameInput = document.getElementById('first-name') as HTMLInputElement;
    const emailInput = document.getElementById('email') as HTMLInputElement;

    try {
      const result = await subscribeUser({
        firstName: firstNameInput.value,
        email: emailInput.value
      });
      console.log('Subscription successful:', result);
      // Add further handling logic here (e.g., show a success message)
    } catch (error) {
      console.error('Subscription error:', error);
      // Add error handling logic here (e.g., display an error message)
    }
  });
}

 

Step 3: Adding the Subscription Form in Your HTML

 

• Create or update the HTML file where you want your subscription form to appear.
• Make sure the form element and its inputs have the correct ID attributes as referenced in your TypeScript code.

  
  
  Subscribe

 

Step 4: Configuring the API Key and Form ID

 

• Open the convertkit.ts file.
• Replace YOURAPIKEY with your actual ConvertKit API Key and YOURFORMID with your ConvertKit Form ID.

 

Step 5: Final Testing

 

• Save all your changes.
• Open your application in a browser.
• Submit the subscription form and check the console for confirmation or error logs.
• If you experience issues, review the API key, Form ID, and console logs for debugging.