Lovable and Smooch (now Zendesk Sunshine Conversations) integration: Step-by-Step Guide 2025

 

Adding Smooch Dependency in Your Lovable Project

 

• Create or open the package.json file in your project’s root directory.
• Add the Smooch (Sunshine Conversations) dependency entry under "dependencies". Since Lovable doesn’t have a terminal for installation, manually add the following lines to simulate installing the dependency:

• 
  {
    "dependencies": {
      "smooch-core": "^7.0.3"   / Use the latest stable version or adjust according to your needs /
    }
  }
      

• Save the changes. The Lovable platform will read your package.json and load the dependency automatically.

 

Creating the Smooch Integration File

 

• In your project directory, create a new folder named integrations (if it does not exist already).
• Inside the integrations folder, create a new file named smoochIntegration.ts.
• Copy and paste the following code snippet into smoochIntegration.ts. This code sets up the Smooch client using your API credentials (which you will provide) and exports a function to send messages through Smooch:

• 
  import SmoochCore from 'smooch-core';
  
  const smooch = new SmoochCore({
    keyId: process.env.SMOOCHKEYID || 'your-key-id',      // Replace with your real Smooch key id
    secret: process.env.SMOOCH_SECRET || 'your-secret-key',   // Replace with your real Smooch secret
    scope: 'app'
  });
  /**
  
  Send a text message using Smooch (Zendesk Sunshine Conversations)
  @param appId - Your Smooch App ID
  @param conversationId - The unique conversation id for the user
  @param text - The message content to send
  
   */
  export async function sendMessage(appId: string, conversationId: string, text: string): Promise {
    try {
      const response = await smooch.appUsers.sendMessage(appId, conversationId, {
        type: 'text',
        text: text
      });
      return response;
    } catch (error) {
      console.error('Failed to send message:', error);
      throw error;
    }
  }
      

  
  


• This file initializes the Smooch client using credentials defined either in environment variables or directly in the code (for testing purposes). It also provides an asynchronous function, sendMessage, which you can call to send messages.

 

Integrating Smooch in Your Main Application Code

 

• Open the main TypeScript file in your Lovable project where you handle messaging or user interactions. This might be a file like app.ts or similar.
• Import the sendMessage function using the following import statement:

• 
  import { sendMessage } from './integrations/smoochIntegration';
      

• Add a function or a call within your business logic to send a message. For example, you could call the sendMessage function when a user registers or performs an action. Insert the snippet below at the appropriate place in your file where you want to trigger a Smooch message:

• 
  async function notifyUser() {
    const appId = 'your-app-id';                // Replace with your Smooch App ID
    const conversationId = 'user-conversation-id'; // Replace with the actual conversation ID
    const messageText = 'Hello! Welcome to our service.';
  
    try {
      const result = await sendMessage(appId, conversationId, messageText);
      console.log('Message sent successfully:', result);
    } catch (error) {
      console.error('Error while sending message:', error);
    }
  }
  // Call notifyUser() based on your application logic. For example, after a successful user action:
  notifyUser();
      

  
  


• This snippet shows how to call the Smooch message function. Replace the placeholder values (your-app-id and user-conversation-id) with actual values provided by your Smooch setup.

 

Configuring Your Environment Variables in Code

 

• Since Lovable does not support traditional terminal-based approach, you need to define your environment variables within your code or configuration files. You can create a new file named config.ts in your project’s root and add the following:

• 
  export const SMOOCHKEYID = 'your-key-id';       // Replace with your actual key id
  export const SMOOCH_SECRET = 'your-secret-key';    // Replace with your actual secret
  export const SMOOCHAPPID = 'your-app-id';         // Replace with your Smooch App ID
      

• In your smoochIntegration.ts, adjust the code to import these variables from config.ts instead of directly relying on process.env:

• 
  import SmoochCore from 'smooch-core';
  import { SMOOCHKEYID, SMOOCH_SECRET } from '../config';
  
  const smooch = new SmoochCore({
    keyId: SMOOCHKEYID,
    secret: SMOOCH_SECRET,
    scope: 'app'
  });
      

  
  


• This method centralizes your configuration and is particularly useful in an environment without terminal access.

 

Final Steps and Testing

 

• Review all the changes and ensure that the file paths are correct for the imports.
• Run your Lovable project. When the logic triggering notifyUser is executed, it should send a message via the Smooch service.
• Monitor the console logs to verify that messages are sent successfully or to debug any errors.