Step 1: Adding Sendinblue Dependency to Your Project

 

• Create or open the file package.json in your project’s root directory.
• Add the dependency for Sendinblue’s SDK by inserting the following line into the "dependencies" section:

• 
  "sib-api-v3-sdk": "^8.4.0"
        

• Since your v0 project does not have a terminal, please manually update the package.json file with this dependency. When the project loads, it will automatically fetch the dependency.

 

Step 2: Creating the Sendinblue Integration File

 

• Create a new file in your project. Name it sendinblue.ts in the appropriate folder (for example, in the src directory).
• This file will contain the TypeScript code to configure Sendinblue and send transactional emails.
• Insert the following code snippet into sendinblue.ts:

• 
  import SibApiV3Sdk from 'sib-api-v3-sdk';
  
  // Configure Sendinblue API Key
  const defaultClient = SibApiV3Sdk.ApiClient.instance;
  const apiKey = defaultClient.authentications['api-key'];
  // Replace 'your-sendinblue-api-key' with your actual API key or use an environment variable
  apiKey.apiKey = process.env.SENDINBLUEAPIKEY || 'your-sendinblue-api-key';
  /**
  
  Function to send a transactional email via Sendinblue
  @param toEmail - Recipient's email address
  @param toName - Recipient's name
  @param subject - Subject of the email
  @param htmlContent - HTML content of the email
  
   */
  export function sendEmail(toEmail: string, toName: string, subject: string, htmlContent: string): void {
    const apiInstance = new SibApiV3Sdk.TransactionalEmailsApi();
    // Create the email object with necessary properties
    const sendSmtpEmail = new SibApiV3Sdk.SendSmtpEmail();
    sendSmtpEmail.subject = subject;
    sendSmtpEmail.htmlContent = htmlContent;
    sendSmtpEmail.sender = { email: 'your-email@example.com', name: 'Your Sender Name' };
    sendSmtpEmail.to = [{ email: toEmail, name: toName }];
    // Trigger the API call to send the email
    apiInstance.sendTransacEmail(sendSmtpEmail)
      .then((data: any) => {
        console.log('Email sent successfully:', data);
      })
      .catch((error: any) => {
        console.error('Error while sending email:', error);
      });
  }
        

  
  




• Replace placeholders such as 'your-sendinblue-api-key' and 'your-email@example.com' with your actual API key and sender email address.

 

Step 3: Integrating the Sendinblue Function into Your Main Code

 

• Open your main TypeScript file (for example, main.ts or any file where you handle user actions).
• Import the sendEmail function from sendinblue.ts at the top of the file:

• 
  import { sendEmail } from './sendinblue';
        

• Identify the part of your code where an email should be sent (for instance, after a user registration or a specific event).
• Insert the following code snippet to invoke the email sending function:

• 
  function onUserRegistration(userEmail: string, userName: string): void {
    const subject = 'Welcome to Our App';
    const htmlContent = '
  Welcome!
  Thank you for registering with us.
  ';
  
    // Call the sendEmail function to dispatch the welcome email
    sendEmail(userEmail, userName, subject, htmlContent);
  }
  // Example usage:
  // onUserRegistration('newuser@example.com', 'New User');
        

  
  




• This function can be called from any event handler relevant to when you want to send a transactional email.

 

Step 4: Configuring Environment Variables

 

• If your project supports environment variables, ensure that you add your Sendinblue API key as SENDINBLUEAPIKEY.
• If your project does not have a terminal or a built-in environment variable manager, you can hardcode the API key temporarily in the code (as indicated in Step 2). Remember to secure your API key appropriately in a production environment.

 

Step 5: Testing the Integration

 

• Save all changes to your project files.
• Trigger the functionality (such as user registration) which calls the onUserRegistration function.
• Check your project’s console output for success or error messages to confirm that the email was sent successfully.